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








https://medonajib.blogspot.co.at
 فما بالك بإصدارها الثانى؟ فقط كن على إطلاع دائم بموضوعات المدونة بالإشتراك خلال صفحتها على الفيسبوك.يمكنك معاينة الإضافة من خلال اصورة أعلاه , فاذا أعجبتك يمكنك اتباع الخطوات التالية. قبل كل شئ خذ نسخة إحتياطية من قالبك :)

1- الدخول الى قالب ثم تحرير HTML ونقوم بالبحث (CTRL+F) عن الكود التالى
 ]]></b:skin>
2- نضع الكود التالى (الكود الخاص بالـCSS) فوق السابق أو قبله
 /*===MBL METRO UI Menu==*/
body {
 font-family:sans-serif;
}
a {
 text-decoration:none;
}
.mblmetromenu {
 width:960px;
 margin:auto;
}
@media screen and (max-width:960px) {
 .mblmetromenu {
 width:100%;
 }
}
/* MblMetroMenu */
.MblMetroMenu {
 position:relative;
}
.om-nav {
 position:absolute;
 width:100%;
 z-index:999;
 display:none;
}
.om-ctrlbar {
 width:100%;
 height:48px;
}
.om-ctrlitems {
 margin:auto;
 padding:0px;
 height:48px;
 display:inline-block;
 text-align:center;
}
.om-ctrlitem {
 height:48px;
 width:48px;
 display:none;
 cursor:pointer;
 float:left;
 opacity:0.5;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
 filter: alpha(opacity=50) !important; /* For IE8 and earlier */ }
.om-ctrlitem:hover {
 opacity:0.8;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)" !important;
 filter: alpha(opacity=80) !important; /* For IE8 and earlier */ }
.om-activectrlitem {
 opacity:1 !important;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
 filter: alpha(opacity=100) !important; /* For IE8 and earlier */ }
.om-controlitems {
 width:960px;
 margin:auto;
}
.om-controlitem {
 height:48px;
 cursor:pointer;
}
.om-closenav {
 float:left;
}
.om-movenext {
 float:right;
}
.om-itemholder {
 margin:auto;
 padding:20px 0px;
}
@media screen and (max-width:960px) {
 .om-closenav {
  position:absolute;
  z-index:9999;
  left:0;
  top:0;
 }
 .om-movenext {
  position:absolute;
  z-index:9999;
  right:0;
  top:0;
 }
 .om-controlitems {
  width:100%;
 }
 .om-itemholder {
  width:100%;
 }
 }
.om-centerblock {
 display:inline-block;
}
.om-item {
 display:none;
}
.om-showitem {
 margin:5px;
 float:left;
 display:none;
}
/* END MblMetroMenu */
/* TILE BUTTONS */
/* Standar Buttons */
.tile-bt {
 text-align:center;
 cursor:pointer;
 width:90px;
 height:90px;
}
.tile-bt a {
 display:block;
 padding-top:12px;
 text-decoration: !important;
}
.tile-bt img {
 margin:0 auto 0 auto;
 padding-bottom:5px;
 height:48px;
 width:48px;
 position:relative;
 display:block;
}
.tile-bt span {
 font-size:12px;
 padding-bottom:10px;
 display:block;
}
.tile-bt:active {
 opacity:0.5;
}
/* End Standard Buttons */

/* Large Buttons */
.tile-bt-large {
 width:190px;
 height:90px;
 line-height:90px;
 text-align:center;
 cursor:pointer;
}
.tile-bt-large a {
 display:block;
 text-decoration: !important;
}
.tile-bt-large img {
 vertical-align: middle;
 margin:auto;
 padding:0px;
 position:relative;
 width:48px;
 height:48px;
}
.tile-bt-large span {
 vertical-align: middle;
 display:inline;
}
.tile-bt-large:active {
 opacity:0.5;
}
/* End Large Buttons */
/* Extralarge Buttons */
.tile-bt-extralarge {
 text-align:center;
 cursor:pointer;
 width:190px;
 height:190px;
}
.tile-bt-extralarge a {
 display:block;
 padding-top:52px;
 text-decoration: !important;
}
.tile-bt-extralarge img {
 margin:0 auto 0 auto;
 padding-bottom:22px;
 height:80px;
 width:80px;
 position:relative;
 display:block;
}
.tile-bt-extralarge span {
 font-size:14px;
 padding-bottom:20px;
 display:block;
}
.tile-bt-extralarge:active {
 opacity:0.5;
}
/* End Extralarge Buttons */
/* END TILE BUTTONS */
/* SHADOW LIST */
.shadow-white, .shadow-black, .shadow-blue, .shadow-green, .shadow-red {
 /*display:inline-block;*/
}
.shadow-white:hover {
 box-shadow:0px 0px 6px 3px #fff;
 -webkit-box-shadow:0px 0px 6px 3px #fff;
 -moz-box-shadow:0px 0px 6px 3px #fff;
 -o-box-shadow:0px 0px 6px 3px #fff;
 -ms-box-shadow:0px 0px 6px 3px #fff;
}
.shadow-blue:hover {
 box-shadow:0px 0px 6px 3px #38D1F7;
 -webkit-box-shadow:0px 0px 6px 3px #38D1F7;
 -moz-box-shadow:0px 0px 6px 3px #38D1F7;
 -o-box-shadow:0px 0px 6px 3px #38D1F7;
 -ms-box-shadow:0px 0px 6px 3px #38D1F7;
}
.shadow-green:hover {
 box-shadow:0px 0px 6px 3px #AACA37;
 -webkit-box-shadow:0px 0px 6px 3px #AACA37;
 -moz-box-shadow:0px 0px 6px 3px #AACA37;
 -o-box-shadow:0px 0px 6px 3px #AACA37;
 -ms-box-shadow:0px 0px 6px 3px #AACA37;
}
.shadow-red:hover {
 box-shadow:0px 0px 6px 3px #E81750;
 -webkit-box-shadow:0px 0px 6px 3px #E81750;
 -moz-box-shadow:0px 0px 6px 3px #E81750;
 -o-box-shadow:0px 0px 6px 3px #E81750;
 -ms-box-shadow:0px 0px 6px 3px #E81750;
}
.shadow-black:hover {
 box-shadow:0px 0px 6px 3px #444;
 -webkit-box-shadow:0px 0px 6px 3px #444;
 -moz-box-shadow:0px 0px 6px 3px #444;
 -o-box-shadow:0px 0px 6px 3px #444;
 -ms-box-shadow:0px 0px 6px 3px #444;
}
/* END SHADOW LIST */
/* BACKGROUND LIST */
/* Solid Colors */
.solid-blue { background:#00BBE2; }
.solid-blue-2 { background:#2C84EE; }
.solid-darkblue { background:#044E94; }
.solid-violetred { background:#781766; }
.solid-red { background:#E51400;}
.solid-red-2 { background:#E81750; }
.solid-pink { background:#FF539B; }
.solid-purple { background:#D02090; }
.solid-orange { background:#FB8F02; }
.solid-orange-2 { background:#FF6600; }
.solid-orange-3 { background:#DD5F37; }
.solid-coral { background:#CD5B45; }
.solid-green { background:#67B239; }
.solid-green-2 {background:#96BF01; }
.solid-darkgreen { background:#016C38; }
.solid-olive { background:#999900}
.solid-grass { background:#CDCD00; }
.solid-darkred { background:#5F0000; }
.solid-gold { background:#FEE9AE; }
.solid-yellow { background:#F7D100; }
.solid-black { background:#000; }
.solid-smoke { background:#F5F5F5; }
/* End Solid Colors */
/* MISC */
.clearspace { clear: both; }
.floatleft { float:left; }
.floatright { float:right; }
.none { display: none !important; width:0px !important; }
.light-text {
 color:#fff;
}
.dark-text {
 color:#1e1e1e;
}
.gradient {
 background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.3))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* IE10+ */
 background: linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* W3C */
}
.margin-5 { margin:5px; }
3- نقوم بالبحث عن content.width ثم نغيير عرض الصفحة لـ 1130 كي نضمن ظهور الاضافة بكامل محتوياتها بشكل سليم واذا لم تريد تغيير عرض الصفحة لمدونتك يكفيك الاستغناء عن جزء من الإضافة مثلا. كما تحب! - اذا واجهت مشكلة ما ضعها فى تعليقك وسنساعدك إن شاء الله -

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

 <!-- mblmetromenu --><div class="mblmetromenu">
<div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatright MblMetroMenu"> <a href="http://medonajib.blogspot.com/" class="gradient"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg98XAoDZkZw9ru7aaZ_psBOuulYiH1zXjK5YsVh7ZJkafvCmd8JpDFaMrwb282vmI4XXO97GE_r8KVEIOcMW4damIrve36NCXGEs2V3uuZkTksRy0NDtXFXx0iwRKg2iGZCr3VVRtf6t0/s1600/home.png" alt="" /><span class="light-text">الرئيسية</span></a></div>
 <div data-navid="om-nav" class="tile-bt-large solid-coral shadow-red margin-5 floatright MblMetroMenu"><a href="#" class="gradient"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiczGFH-BZmUOHMisSQtNu6X3LLnoOYcZk70YevAWErsSRe2Ma9bAMcuZHXnPn1Hkb8XrBq8gvp4ZirYsefso630EWBNLN8Z96hc9nLDdoRReLC57A4ELIYCx2f2uIRPdc1eefgwzUpgRA/s1600/messanger.png" alt="" /><span class="light-text">عن المدونة</span></a></div>   
 <div data-navid="om-nav2" class="tile-bt solid-purple shadow-blue margin-5 floatright MblMetroMenu"><a href="#" class="gradient"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJsmf66EN22wFxMHFAyEUyRJ4wtNAYPrrEDb854D0C613eEKghmfI-KXiKSdbetbHuWawDiCVE8IH3a3wVFDHhn_Vynu-T7pXCEHu2EReALwabeRJ6yuHbwc8DUBTLG9JjxaorszpIyJM/s1600/rss.png" alt="" /><span class="light-text">الخلاصات</span></a></div>   
 <div data-navid="om-nav" class="tile-bt-large solid-red shadow-red margin-5 floatright MblMetroMenu"><a href="#" class="gradient"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmx2oCm-w8E6-aUP-oe3Av_xBaDkveZRNKlCuOUjI3LGCZszSfxWYTV3ArojVNh3h3kONUmDx_lWbwVUB4614-gYHOJU6_JsDKVxCspiW_F2UWuULiessJ7Vc4BeMAdV6ad3ZDkpgyb3c/s1600/search.png" alt="" /><span class="light-text">البحث</span></a></div>     
 <div data-navid="om-nav2" class="tile-bt solid-darkred shadow-red margin-5 floatright MblMetroMenu"><a href="#" class="gradient"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcFtUhnzNfeqZNFCI52B9ISZufzyTgcys9k2kASu6PmPKdUB129Foc2iiklALXxJ9IyUyO5LdzoQ9jp2O4Hy6Rp23C2Dg1w0igkSW1mNKf7klI4pHFu8C6umQXklR2DuAptCTJQ4oQgnI/s1600/mail.png" alt="" /><span class="light-text">اتصل بنا</span></a></div>     
 <div data-navid="om-nav2" class="tile-bt solid-black shadow-black margin-5 floatright MblMetroMenu"><a href="#" class="gradient"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFLe6-A14x9TrigTpnpdwz-XkgS8dFYvEdQisoQUeet_hP6eRcfT709R2gPiUwFvNeLC3G2f4AVYsuZXD2ZnRogxDbktu64fNDcP2UCqi4WqXV6exUnk4kYoCw6SRL9Cw5o1HeAJG3TMs/s1600/help.png" alt="" /> <span class="light-text">مساعدة</span></a> </div>     
 <div data-navid="om-nav2" class="tile-bt solid-orange shadow-black margin-5 floatright MblMetroMenu"><a href="#" class="gradient"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7YVmP4zau-aVmXj_y5Kx9m1LbDUarv7u8hzIAVfmQFXjXlD9TyNSthAyzuDLvSGN3kyaYLwBaH_OlP69I41VRRawhte0yKSwvFc-GfrsJVbN5XaZT7Yf-dbkdPhFBTSgSHdpXQKJhuOU/s1600/youtbe.png" alt="" /><span class="light-text">يوتيوب</span></a></div>     
 <div data-navid="om-nav2" class="tile-bt solid-darkblue shadow-blue margin-5 floatright MblMetroMenu"><a href="#" class="gradient"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPDrbjWZyZSIjR86jS9QTm52Xou5We6A8jcXa083G5paRlXDWCUjPO1GAd_ZeoECYsbt_QVs__Y60hoVfV-24NCj1lLcEEQAzX-JFa_X2T80huy6NNJ2mozS3k1MlDa9Ie5y60yR9CEKI/s1600/face.png" alt="" /><span class="light-text">فيسبوك</span></a></div>     
 <div data-navid="om-nav" class="tile-bt-large solid-blue shadow-blue margin-5 floatright MblMetroMenu"><a href="#" class="gradient"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_VlnbJQ2TW5bkUqGl5PkpzSzNHmERVuquzO3D0zMuL0mIQ0fFXRqjxa067oKmwcuaa3Jnk_fCXsBo1ZMcKcgR97Z4a9QUP2JSVzJ_o65bX3kJrY_6l8bTmpTugB1l2vviGJjC_zCsMsM/s1600/photo.png" alt="" /><span class="light-text">صور</span></a></div>     
 <div data-navid="om-nav2" class="tile-bt solid-olive shadow-green margin-5 floatright MblMetroMenu"><a href="#" class="gradient"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizeHi7ujpnAx-l-UpjAuJDFxOVszEwcwCBdocsbgR1L51OhieSyLaypPPjo7Zj0TvThu94ApD9V91sUERb1r1FZaOTi0z33ikhyLtUbxzRvpLwO234LiTrzySgwh6c0s9PoWr1Ju25GrI/s1600/music.png" alt="" /><span class="light-text">قرآن كريم</span></a> </div>     
 <div data-navid="om-nav" class="tile-bt-large solid-blue-2 shadow-blue margin-5 floatright MblMetroMenu"><a href="http://medonajib.blogspot.com/2014/07/what-is-adobe-after-effects.html#.U8r66aghDEYl" class="gradient"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_aO_nyeyJZRZa3eM3QgWoCCXt5hWJgf54JzeXhUkGjaP87ozhjAw6OmoXnhyphenhyphenAbWZVUyPPVtRWsnZxi4NoaQtn6oYy99gVq82UFk9fwolx4jdcbvsHPbwvDuZxQ0U_1SJ_lq6DeTCuXhM/s1600/MBL.png" alt="" /><span class="light-text">فريق العمل</span></a></div> <!-- End MblMetroMenu -->  </div><!-- END mblmetromenu -->
6- الان قم بحفظ الأداة وقم بالمعاينة .
ملاحظة: بإمكانك التعديل على ألوان القائمة بكل سهولة عن طريق الكود الخاص بالـ CSS. وأى استفسار ضعه في  التعليق وسأساعدك في الحل بإذن الله .