اختر لونك المفضل




العودة  Egyword - كلمة مصرية

أهلا وسهلا بك زائرنا الكريم، إذا كانت هذه زيارتك الأولى للشبكة، فيرجى التكرم بزيارة صفحة التعليمـــات، بالضغط هنا. كما يشرفنا أن تقومبالتسجيل بالضغط هنا إذا رغبت بالمشاركة في المنتدى، أما إذا رغبت بقراءة المواضيع والإطلاع فتفضل بزيارة القسم الذي ترغب أدناه.






Egyword :: خدمات المواقع والمنتديات :: قسم تطوير منتديات Ahlamontada :: قسم أكواد الانماط الانسيابية Css

 كود لجعل ازرار التصفح مثل ازرار منتدى الدعم  Empty  السبت 4 يونيو 2016 - 17:07

  • عدد المساهمات : 820
  • تاريخ التسجيل : 28/05/2016
 كود لجعل ازرار التصفح مثل ازرار منتدى الدعم  Fav210
 كود لجعل ازرار التصفح مثل ازرار منتدى الدعم  User110


افتراضي موضوع: كود لجعل ازرار التصفح مثل ازرار منتدى الدعم




السلام عليكم ورحمة الله وبركاته
اخواني اعضاء وزوار منتدى الدعم والمساعدة
  اقدم لكم كود تومبيلات + css  لجعل ازرار التصفح كأزرار منتدى الدعم

صوره للازرار بعد تريكب الكود

https://i.servimg.com/u/f38/18/69/71/26/uo_ouo10.png

تكبير الصورة معاينة الأبعاد الأصلية.
 كود لجعل ازرار التصفح مثل ازرار منتدى الدعم  Uo_ouo10 
وبعد مرور الماوس عليها
https://i.servimg.com/u/f38/18/69/71/26/1111110.png

تكبير الصورة معاينة الأبعاد الأصلية.
 كود لجعل ازرار التصفح مثل ازرار منتدى الدعم  1111110

وعند وصول رساله جديده
https://i.servimg.com/u/f38/18/69/71/26/2222210.png

تكبير الصورة معاينة الأبعاد الأصلية.
 كود لجعل ازرار التصفح مثل ازرار منتدى الدعم  2222210




اولا للنسخه الثانيه
لوحة الاداره - مظهر المنتدى - التومبيلات والقوالب - اداراه عامه 
ثم ابحث في قالب overall_header

ثم ابحث عن الكود التالي





الكود:
</td>
                  <!-- BEGIN switch_logo_right -->
 
                 <td><a href="{U_INDEX}"><img
src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1"
/></a></td>
                  <!-- END switch_logo_right -->
               </tr>
            </table>

            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>

            <div style="clear: both;"></div>


واستبدله بالكود التالي





الكود:
</div>

         <span class="corners-bottom"><span></span></span></div>
      </div>

      <div class="navbar">
         <div class="inner"><span class="corners-top"><span></span></span>

         <ul class="linklist navlinks{NAVBAR_BORDERLESS}">
         <li>{GENERATED_NAV_BAR}</li>
         </ul>

ثم ضع الكود التالي بورقة css





الكود:
 a.mainmenu { 
color:#FFF;  font-size:11px;  text-shadow:1px 1px 2px #000; 
-webkit-transition:400ms;  -moz-transition:400ms;  -o-transition:400ms; 
 transition:400ms;}a.mainmenu:hover {  color:#C5DE39;  font-size:13px; 
text-shadow:1px 1px 10px #C5DE39;}                       ul.navlinks
{            background: url('http://2img.net/i/fa/fdf3/bg_cat.png')
repeat-x #1675BC;            border-radius: 0 0 7px 7px;           
-moz-border-radius: 0 0 7px 7px;            -o-border-radius: 0 0 7px
7px;            -webkit-border-radius: 0 0 7px 7px;           
border-top: 1px solid white;            bottom: 9px;           
position: relative;            text-align: center;            height:
40px;        }                     .new-message {             
color:#F85 !important;              font-weight:bold;            }

وضع الكود التالي بالجافا
واختر جميع الصفحات





الكود:
$(function() {
      var pm = document.getElementById('i_icon_mini_new_message');
      if (pm) pm.parentNode.className += ' new-message';
    });

ويمكنك اختيار الخلفيه للازرار والتحكم الكامل بها من كود الcss 



ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ



اما النسخه الثالثه
لا يحتاج الى اي خطوه من الخطوات اعلاه

كل ماعليك وضع الكود التالي في ورقة css





الكود:
ul.navlinks a.mainmenu {
  -moz-transition-duration: 500ms;
  -o-transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  color: white;
  font-size: 15px;
  outline: none;
  text-shadow: 1px 1px 2px black;
  
}

ul.navlinks a.mainmenu:hover {
 text-shadow: 1px 1px 10px;
 font-size: 16px;
  font-weight: bold;
  color: #FFFF71;
}

ul.navlinks {
    background: url('http://2img.net/i/fa/fdf3/bg_cat.png') repeat-x #1675BC;
    border-radius: 0 0 7px 7px;
    -moz-border-radius: 0 0 7px 7px;
    -o-border-radius: 0 0 7px 7px;
    -webkit-border-radius: 0 0 7px 7px;
    border-top: 1px solid white;
    bottom: 9px;
    position: relative;
    text-align: center;
    height: 40px;
}

ul.navlinks span.new-message {
    transform:rotate(-4deg);
    -ms-transform:rotate(-4deg);
    -moz-transform:rotate(-4deg);
    -webkit-transform:rotate(-4deg);
    -o-transform:rotate(-4deg);
    background: url("http://2img.net/i/fa/email.gif") no-repeat scroll right top transparent;
    color: #FFCC00;
    padding-right: 2em;
}
 

ويمكنك اختيار الخلفيه والتحكم الكامل بالازرار من كود الcss 


ومبروك عليك الكود
والله يوفق الجميع يارب




توقيع : MR.MESHO







  
hotel deals in sharm el sheikh

الــرد الســـريـع
..

هل تريد التعليق؟
انضم إلى ( Egyword - كلمة مصرية ) للحصول على حساب مجاني أو قم بتسجيل الدخول إذاكنت عضوًا بالفعل






 كود لجعل ازرار التصفح مثل ازرار منتدى الدعم  Collapse_theadتعليمات المشاركة
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة




Powered by vBulletin® Copyright ©2000 - 2015, Jelsoft Enterprises Ltd

 كود لجعل ازرار التصفح مثل ازرار منتدى الدعم