إضافة قائمة أفقية روعة لمدونات بلوجر بإستايل 2013

السلام عليكم ورحمة الله وبركاته في هذه التدوينة سوف نقوم بشرح قائمة أفقية مميزة لمدونات بلوجر بأحدث الاستيلات 2013

المعاينة

لاضاقتها الي مدونتك اتبع الاتي

1- الذهاب الي لوحة تحكم مدونتك من هنا
2- ثم نذهب الي قالب ثم تحرير html ثم نضع علامة صح لتوسيع الادوات
3- ثم نقوم بالبحث عن هذا الكود  ]]></b:skin>
4- نضع هذا الكود قبله مباشرة

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:right;
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:right;
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:right; }
.floatright { float:left; }
.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; }

5 - نذهب الي تخطيط ونضيف  html/javascriptونضع بها هذا الكود

<div class="mblmetromenu">

<div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MblMetroMenu">
<a href="ضع رابط هنا" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioxh7BGlK3cSPhqNvSg26S34tc_ifdTsJ8NgL7e8tzVsTvb5_rqNLwQ_kxnFl2uDtpID6d0eMqonVGpkjUdwcy6aPfHVuaJjIz68BS6_INLTPADLsbU_HjOU59-Ydy8MEeMUYuXkdUtA/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 floatleft MblMetroMenu">
<a href="ضع رابط هنا" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcs98wi4FDbWqnduYl84vsWV2aYaCInj3NoTsBxcFLJLzJKPELY7yrfx4qaFxo9KnyZe3dxT7H7PhYc6NSmEgo9Sr2m-mjR7ZExazvwwdHjqPY6SGvWoQAEqkFk5miYNMLvtDCe8_hYg/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 floatleft MblMetroMenu">
<a href="ضع رابط هنا" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyRSNg-TRivCzgbxWTFc-rBdrrWh8om0lPYDKeU9oT_Lji8T2p9pRMX94axME7R9AOPfmSj3gLm8e075m263CtB9BvG5yUMcWISOVypyiKiUfnP7cA7fkn9Lr5YGV-Ds1SPkjmmBmjuw/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 floatleft MblMetroMenu">
<a href="ضع رابط هنا" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdiNCnRTAvphm4qzL-DXtLVnzto6XzrWflUjyJyxO9ZyUxQ28RW_EN3JQ5ZpLB9bASrxHpnIbO7I1CqHJ3J4ypEnDh_rKtYCK7jLcaS23Hf7kf-9YG_EULlWDU166o2srcB2iAYIoyuA/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 floatleft MblMetroMenu">
<a href="ضع رابط هنا" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVSvzB8LWFd1KB9JXlnLwKOQA3qgk2IJ51QedLzj70hnOqDiK3yk-7pkeuEBimjx4jeaGHV9OAdHxy7w0mhPvGG3iMxU-iFPjpQsY7b9OTdJKoK3TuLbPchyphenhyphenMENfIv0XsmwAlMJL2a2g/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 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT_sc5eUJXVDqTKjYNcAHXBmELPSCVl1tYp87DvXrz5XQywqqCe2qSZ-0gKQjHUAbbwnXAh1_ZKKwUnJVGBDuuP0ygbHmgKN73nJVfV7zImkkWmpWAJdt4BIhWXCn11QM9hs8oNzsvqQ/s1600/help.pn" alt="" />
 <span class="light-text">الدعم الفني</span>
</a>
 </div>
     
<div data-navid="om-nav2" class="tile-bt solid-orange shadow-black margin-5 floatleft MblMetroMenu">
<a href="ضع رابط هنا" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0rHxRnMFz2F1yUEuvBgJfc8M1WUY3p_ya5rcymx2dR49yQdTpFReUYQVhbY5mghn0EhJbAvD11hchAf9-wzjIlrCNBD9rn04zO7yTg_eXPvzWYEPLMNn_4qlENuzOJZBmEjwpCOXKRg/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 floatleft MblMetroMenu">
<a href="ضع رابط هنا" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg0MVvQqy1sMmDQUMzBfwfRdKMKOeRQNTpYtDvBZQd0_KbzD2k5gXwUGFfNIqnlwt43d2Or6-B3wK_l9ke6VO-sgVbWOEaJuyzgQBclxGLP8dI9Dku4grmqOgdsC0DGQaxSmaqr-BSug/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 floatleft MblMetroMenu">
<a href="ضع رابط هنا" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf1Q6q8DytzzDarr9ENksDCeejWc9MkkOE7cED0FwrV0NuE09i6oRW-bcrFtRUsR6f1KD7dWERrAUjU65edyrS-m4TGAUo1Wh9hpp97LSdUdIQ9-61cMHDPflNHgqaAKb9XMVWjGpn4A/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 floatleft MblMetroMenu">
<a href="ضع رابط هنا" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ9xURCsbfDJUA3-D_ZdUvS_LgdkykkjN8tckLMdxlaVpnwC0eF2kI85JbBj7kRapTuEbOWHHQhjhyphenhyphensLihqCY5aX4pgB-yIGPZyxDMkwbvHizIcfPJnCr18FduMenS3faTRbeQMiJgQQ/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 floatleft MblMetroMenu">
<a href="ضع رابط هنا" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDWgk6uUHtwED2qaMzEInm0hAOfyAOnCnfmG2LqQbqQoT_2GT9iIa9BQOFkNG5n4qDbWyHSmQDakzTw7uyluEEJvjM-nM4zq-GtRPbZgz8fqV-btVATk4MXHTL9L8SBDqi8MNkSRZRIg/s1600/MBL.png" alt="" />
<span class="light-text">أقسام المدونة</span>
</a>
</div>
</div>

ثم نقوم بتغير ما باللون الازرق الي روابط المواضيع والصفحات التي تريدها وبذلك نكون أَضفنا القائمة.....أتمني لكم التوفيق والسلام عليكم ورحمة الله وبركاته

ملاحظة عرض القائمة960px لذلك يجب مراعاة العروض عند تركيبها حتي تأخذ الشكل المناسب في مدونتك