كود لجعل ازرار التصفح مثل ازرار منتدى الدعم
الرئيسيةالرئيسية  أحدث الصورأحدث الصور  القرآن الكريم  التسجيلالتسجيل  دخولدخول  


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


موقع الاتصال الروحي و الفكري بين جميع العرب في دائرة الاتصال الودي المشروط بالحبة
 


شاطر

كود لجعل ازرار التصفح مثل ازرار منتدى الدعم Emptyالإثنين سبتمبر 21, 2015 8:31 am
المشاركة رقم:

علم حسن

إحصائية العضو

الفصيلة العربية الفصيلة العربية : السودان
الهوية الهوية : المطالعة
الجنس الجنس : ذكر
عدد المساهمات عدد المساهمات : 1896
نقاط الاعجابات : 9
العمر العمر : 33
مكان الاقامة مكان الاقامة : الخرطوم
الحاله الحاله : رايق
مُساهمةموضوع: كود لجعل ازرار التصفح مثل ازرار منتدى الدعم


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


السلام عليكم ورحمة الله وبركاته

  اقدم لكم كود تومبيلات + 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 


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








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


توقيع : علم حسن








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






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

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