منتدى الدعم العربي لمنتديات أحلى منتدى
مرحبا بك في منتدى دعم منتديات AhlaMontada

لتتمكن من الإستمتاع بكافة ما يوفره لك هذا المنتدى من خصائص, يجب عليك أن تسجل الدخول الى حسابك في المنتدى. إن لم يكن لديك حساب بعد, نتشرف بدعوتك لإنشائه.


انشاء منتدى مجاني شبيه بهذا المنتدى

كود لجعل ازرار التصفح بكشل احترافي {رامي كاتي}

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

كود لجعل ازرار التصفح بكشل احترافي {رامي كاتي}

مُساهمة من طرف رامي كاتي في الأربعاء 28 يناير 2015 - 21:47

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

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

http://i38.servimg.com/u/f38/18/69/71/26/uo_ouo10.png
 
وبعد مرور الماوس عليها
http://i38.servimg.com/u/f38/18/69/71/26/1111110.png


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





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

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

الكود:

<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}">
         {GENERATED_NAV_BAR}
         </ul>


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

الكود:


ul.navlinks a.mainmenu {
    -moz-transition-duration: 500ms;
    -o-transition-duration: 500ms;
    -webkit-transition-duration: 500ms;
    line-height: 40px;
    color: #FFFFFF;
    font-size: 15px;
    outline: none;
}
ul.linklist li {
    display: inline;
    font-size: 1.1em;
    line-height: 2.2em;
    list-style-type: none;
    width: auto;
}
ul.navlinks {
    -moz-border-radius: 0 0 7px 7px;
    -o-border-radius: 0 0 7px 7px;
    -webkit-border-radius: 0 0 7px 7px;
    background: url('http://illiweb.com/fa/fdf3/bg_cat.png') repeat-x #1675BC;
    border-bottom: 1px solid #fff;
    border-radius: 0 0 7px 7px;
    border-top: 1px solid #fff;
    bottom: 16px;
    font-weight: 700;
    height: 40px;
    position: relative;
    text-align: center;
}
ul.borderless {
    border-bottom: 0;
}
ul.navlinks {
    border-bottom: 1px solid #fff;
    font-weight: 700;
    text-align: center;
}
ul.navlinks a.mainmenu:hover {
    text-shadow: 1px 1px 10px;
    font-size: 16px;
    font-weight: bold;
    color: #FFFF71;
}
.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://illiweb.com/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://illiweb.com/fa/email.gif") no-repeat scroll right top transparent;
    color: #FFCC00;
    padding-right: 2em;
}
 


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

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


ارجو النقل للقسم المناسب
avatar
رامي كاتي
 
 

ذكر
عدد المساهمات : 799
معدل النشاط : 4452
السُمعة : 18

http://anime.digimon.tv/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة


 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى