القائمة الأفقية الأكثر تطورا Metro UI لمدونات بلوجر بإصدارها الأول

عدد مشاهدات الموضوع:

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

1- الدخول الى قالب ثم تحرير HTML ونقوم بالبحث (CTRL+F) عن الكود التالى 
]]></b:skin>
2- نضع الكود التالى (الكود الخاص بالـCSS) فوق السابق أو قبله
/* Header------www.abu-iyad.com----------------- */ #header_mainmenu { margin-bottom:10px; } #header_mainmenu a { float:right; display:block; color:#fff; text-decoration:none; } #header_mainmenu .mm_logo, #header_mainmenu .mm_home, #header_mainmenu .mm_wishlist, #header_mainmenu .mm_account, #header_mainmenu .mm_checkout, #header_mainmenu .mm_shopcart { margin-right: 3px; width:265px; height:150px; } #header_mainmenu a.mm_home, #header_mainmenu a.mm_wishlist, #header_mainmenu a.mm_account, #header_mainmenu a.mm_checkout, #header_mainmenu a.mm_shopcart { margin-right: 3px; width:100px; padding-top:115px; padding-left:20px; padding-right:20px; height:35px; } #header_mainmenu .mm_logo { background:#FFB200 no-repeat center center; } #header_mainmenu a.mm_home { background:#ffaa31 url(http://4.bp.blogspot.com/-cEL6UtHKjFE/USDC_smZrLI/AAAAAAAAOjs/CkxyU7_6ygo/s1600/home.png) center 20px no-repeat; } #header_mainmenu a.mm_wishlist { background:#6cbe42 url(http://3.bp.blogspot.com/-qEL-FHhpWf4/USDDODcxRZI/AAAAAAAAOj0/A6eZdqceWac/s1600/wishlist.png) center 20px no-repeat; } #header_mainmenu a.mm_account { background:#0066B3 url(http://4.bp.blogspot.com/-u_GM_e6bWtY/USDDUo6JAXI/AAAAAAAAOj8/rdYWaQnA4Rw/s1600/account.png) center 20px no-repeat; } #header_mainmenu a.mm_checkout { background:#6cbe42 url(http://1.bp.blogspot.com/-8hNYDCW5dEg/USDDaY2-aVI/AAAAAAAAOkE/z9OPQzUBOes/s1600/checkout.png) center 20px no-repeat; } #header_mainmenu .mm_shopcart { background:#58bae9 url(http://1.bp.blogspot.com/-KqE3oqs02G0/USDDhdmRlCI/AAAAAAAAOkM/5ClbP42xbcE/s1600/cart.png) center 20px no-repeat; float:left; display:block; text-decoration:none; margin-right: 0px; width:100px; padding-top:110px; padding-left:20px; padding-right:20px; height:40px; position:relative; }
/* Nav Bar----------------------------------------------- */
.nav-container { } #nav { margin-bottom:10px; } #nav li { float: left; padding: 12px 0px 12px 15px; } #nav li a { color: #4B4747; } #nav li a { text-transform: uppercase; border-right:1px solid #E0E0E4; padding-right:15px; } #nav li:hover { background: #008c8d; } #nav li:hover a { color:#fff; border-right: 1px solid #008c8d; } #nav li.over, #nav li:hover, #nav li.active { } #nav li a span { } #nav li.over.parent { } #nav .homelink { } #nav .custommenuitem { float: right; } #nav .custommenuitem a { border-right:none; } #nav li.custommenuitem { } #nav li.block_li a span, #nav li.block_li a { cursor: default; } #nav li div.custom_menu_item { position: absolute; z-index: 1500; width: 950px; margin-left: 0px; top:42px; }
/* Animation---------------------------------------------- */
a, a:visited, a b {
-webkit-transition: color 200ms linear;
-moz-transition: color 200ms linear;
-o-transition: color 200ms linear;
-ms-transition: color 200ms linear;
transition: color 200ms linear;
}
a:hover {
-webkit-transition: color 200ms linear;
-moz-transition: color 200ms linear;
-o-transition: color 200ms linear;
-ms-transition: color 200ms linear;
transition: color 200ms linear;
}
#header_mainmenu  a {
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
transition: all 0.1s linear;
}
#header_mainmenu  a:hover {
   -webkit-transform: scale(0.95,0.95);
   -moz-transform: scale(0.95,0.95);
   -o-transform: scale(0.95,0.95);
   -ms-transform: scale(0.95,0.95);
   transform: scale(0.95,0.95);
}
#header_mainmenu  a {
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
transition: all 0.1s linear;
}

 

3- نقوم بالبحث عن content.width ونقوم بتغيير عرض الصفحة لـ 1130 وهذا لنضمن ظهور الاضافة بكامل محتوياتها بشكل سليم واذا لم تفضل تغيير عرض الصفحة لمدونتك يمكنك الاستغناء عن جزء من الإضافة مثلا. كما تحب! - اذا واجهت مشكلة ما ضعها فى تعليقك وسنساعدك إن شاء الله -


4- نقوم بحفظ القالب
5- نذهب الأن الى تخطيط Layout ثم نضيف أداة Java Script تحت هيدر المدونة تماما كما بالصورة التالية ونضع بداخلها الكود التالى - لا تنسى يمكنك بسهولة التعديل عليه من حيث الكلمات مثل الرئيسية أو فيسبوك وغيرها - ويمكنك أيضا تغيير رمز # بالرابط المراد توجيه الزائر اليه.

<div class='header-container'>
    <div class='header'>
          <div class='clearfix' id='header_mainmenu'>
<!-- Logo -->
<a class='mm_logo' expr:href='data:blog.homepageUrl' style='background-image: url(http://i59.tinypic.com/2mnoyg3.png);'/>
<!-- Header Nav-->
<a class='mm_home' href='#'>الرئيسية</a>
<a class='mm_wishlist' href='#' id='wishlist-total'>مفضلاتي</a>
<a class='mm_account' href='#'>فيسبوك</a>
<a class='mm_checkout' href='#'>بحث</a>
<a class='mm_account' href='#'>اتصل بنا</a>
</a></div>
  </div>
    </div>

6- قم بحفظ الأداة وقم بمعاينة قالبك الأن.
لاحظ: يمكنك التعديل على ألوان القائمة بكل سهولة عن طريق الكود الخاص بالـ CSS. وأى سؤال يمكنك التعليق وسندعمك بالحل إن شاء الله. الى اللقاء.

هناك 12 تعليقًا:

  1. @Ahmed dhen

    مرحبا بك وشكرا لتواجدك :)

    ردحذف
  2. @Ameer Ahmed
    أنت الأروع يا مبدع

    ردحذف
  3. اكيد هتكون روعه ولكن لسه ما شوفتها وشكرا يا باشمهندس محمد

    ردحذف
  4. مشكووور اخي على القائمة الرائعة

    ردحذف
  5. رؤؤؤعة جداً شكراً لك ;D

    ردحذف
  6. مشكور علي الكود الرائع

    ردحذف
  7. بارك الله فيك موضوع مفيد و قيم

    ردحذف
  8. جميل وقد ركبتها لكن عرضها مرتفع عما أريد ممكن مساعدة
    ممكن ترسل الرد هنا بعد التعليق او ترسله لي على الجميل
    konan.ran52@gmail.com

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية