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




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

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






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

  السبت 4 يونيو 2016 - 17:07

  • عدد المساهمات : 820
  • تاريخ التسجيل : 28/05/2016


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




السلام عليكم ورحمة الله وبركاته
اخواني اعضاء وزوار منتدى الدعم والمساعدة
  اقدم لكم كود تومبيلات + 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

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





الكود:
</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://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;        }                     .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 


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




توقيع : MR.MESHO







  
hotel deals in sharm el sheikh

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

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






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

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




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