أضافة قائمة جانبية رأسية أحترافية لمدونات بلوجر
اضافات بلوجرسي اس اس
السلام عليكم ورحمة الله وبركاته
أهلا ومرحبا بكم أخوانى الكرام من جديد فى مدونة مدون قبل أن أدخل فى الموضوع أعتذر عن التأخير فى التدوين
ولكن ذلك راجع لأنشغال فريق عمل المدونة بالدراسة والعلم ..... أما بعد اليوم أقدم لكم أضافة جديدة ورائعة فى عالم أضافات بلوجر
وهى أضافة قائمة رأسية جانبية أحترافية وفى منتهى الروعة.... أتمنى أن تعجبكم ألاضافة وأتركككم مع شرح تركيبها
شرح تركيب القائمة
توجه لقالب >>تحرير HTML
ابحث بإستعمال Ctrl+F عن </head> :
ضع الكود التالى فوقه
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
ثانيا نقوم بالبحث عن ]]></b:skin> ونضيف قبله هذا الكود
.menu-right{top:226px;}}
/**/.menu-right{background:none repeat scroll 0 0 #fff;border-left:1px solid #F0F0F0;top:166px;width:41px;position:absolute;z-index:9999999;}.menu-right ul li{border-bottom:1px solid #EBEBEB;box-shadow:0 1px 0 0 #FFFFFF;}.menu-right .na{/**/width:0;right:41px;padding:0;position:absolute;overflow:hidden;/**/font-family:droid arabic kufi;font-size:16px;font-weight:bold;letter-spacing:0.6px;white-space:nowrap;line-height:39px;/**/-webkit-transition:0.25s;/**/-moz-transition:0.25s;transition:0.25s;}.menu-right.ss:hover .ka{color:#FFFFFF;}.menu-right .ss{display:block;height:39px;text-align:center;position:relative;width:41px;z-index:99999;/**/}/**/.menu-right .ss:hover .na{width:auto;padding:0 20px;overflow:visible;}/**/.menu-right .hom:hover{background:none repeat scroll 0 0 #00BAC7;}.menu-right .hom .na{background:none repeat scroll 0 0 #00BAC7;}.fa-home{color:#00BAC7;}/**/.menu-right .win:hover{background:none repeat scroll 0 0 #8F8898;}.menu-right .win .na{background:none repeat scroll 0 0 #8F8898;}.fa-windows{color:#8F8898;}/**/.menu-right .cog:hover{background:none repeat scroll 0 0 #43AF95;}.menu-right .cog .na{background:none repeat scroll 0 0 #43AF95;}.fa-cogs{color:#43AF95;}/**/.menu-right .goo:hover{background:none repeat scroll 0 0 #F3594D;}.menu-right .goo .na{background:none repeat scroll 0 0 #F3594D;}.fa-google-plus{color:#F3594D;}/**/.menu-right .des:hover{background:none repeat scroll 0 0 #5792B2;}.menu-right .des .na{background:none repeat scroll 0 0 #5792B2;}.fa-desktop{color:#5792B2;}/**/.menu-right .unl:hover{background:none repeat scroll 0 0 #F6C231;}.menu-right .unl .na{background:none repeat scroll 0 0 #F6C231;}.fa-unlock-alt{color:#F6C231;}/**/.menu-right .che:hover{background:none repeat scroll 0 0 #C61F89;}.menu-right .che .na{background:none repeat scroll 0 0 #C61F89;}.fa-check-square{color:#C61F89;}/**/.menu-right .thu:hover{background:none repeat scroll 0 0 #F75940;}.menu-right .thu .na{background:none repeat scroll 0 0 #F75940;}.fa-thumbs-o-up{color:#F75940;}/**/.menu-right .dow:hover{background:none repeat scroll 0 0 #4aa3df;}.mdwanblog {margin-top: 0;position: fixed;top: 0!important;z-index: 9999999;}.menu-right .dow .na{background:none repeat scroll 0 0 #4aa3df;}.menu-right .fa-cloud-download{color:#4aa3df;}/**/.menu-right .arc:hover{background:none repeat scroll 0 0 #34495e;}.menu-right .arc .na{background:none repeat scroll 0 0 #34495e;}.arc .fa-archive{color:#34495e;}/**/.menu-right .exc:hover{background:none repeat scroll 0 0 #f1c40f;}.menu-right .exc .na{background:none repeat scroll 0 0 #f1c40f;}.fa-exclamation-triangle{color:#f1c40f;}/**/.menu-right .plu:hover{background:none repeat scroll 0 0 #9b59b6;}.menu-right .plu .na{background:none repeat scroll 0 0 #9b59b6;}.fa-plus{color:#9b59b6;}.fa-minus{color:#9b59b6;}/**/.menu-right .ka{font-size:21px;line-height:36px;transform:rotate(0deg);transition:all 0.5s ease 0s;}.menu-right .na{color:#FFFFFF;}.menu-right .ss:hover .ka{color:#FFFFFF;transform:rotate(360deg);transition:all 0.5s ease 0s;}
الأن نبحث عن <body> ونضيف تحتها هذا الكود
<div class="menu-right mdwanblog" style="height: 2681px;">
<ul>
<li>
<a class="ss hom" href="/">
<i class="ka fa fa-home"></i>
<span class="na">الرئيسية </span>
</a>
</li>
<li>
<a class="ss win" href="#">
<i class="ka fa fa-windows"></i>
<span class="na">الويندوز </span>
</a>
</li>
<li>
<a class="ss cog" href="#">
<i class="ka fa fa-cogs"></i>
<span class="na">البرامج </span>
</a>
</li>
<li>
<a class="ss goo" href="#">
<i class="ka fa fa-google-plus"></i>
<span class="na">جوجل </span>
</a>
</li>
<li>
<a class="ss des" href="#">
<i class="ka fa fa-desktop"></i>
<span class="na">انترنت </span>
</a>
</li>
<li>
<a class="ss unl" href="#">
<i class="ka fa fa-unlock-alt"></i>
<span class="na">الحماية </span>
</a>
</li>
<li>
<a class="ss che" href="#">
<i class="ka fa fa-check-square"></i>
<span class="na">شروحات عامة </span>
</a>
</li>
<li>
<a class="ss thu" href="#">
<i class="ka fa fa-thumbs-o-up"></i>
<span class="na">مواقع مفيدة </span>
</a>
</li>
<li>
<a class="ss dow" href="#">
<i class="ka fa fa-cloud-download"></i>
<span class="na">تحميل </span>
</a>
</li>
<li><a class="ss arc" href="/p/archive.html">
<i class="ka fa fa-archive"></i>
<span class="na">الارشيف </span>
</a>
</li>
<li>
<a class="ss exc" href="/404">
<i class="ka fa fa-exclamation-triangle"></i>
<span class="na">خطا 404 </span>
</a>
</li>
</ul>
</div>
وهكذا يكون مبروك عليك الأضافة والقائمة الأكثر من رائعة
أذا ضافتك أى مشكلة فى التركيب فلا تترد فى طرحها فى التعليقات
إشترك بالنشرة البريدية
تحويل كودإخفاء محول الأكواد الإبتساماتإخفاء