[بلوجر] أضافة قائمة رأسية جانبية احترافية

السلام عليكم ورحمة الله وبركاتة

مرحبا متابعي موقع المطور .نت اليكم اليوم اضافة بلوجر 2015 احترافية ومميزة , قائمة جانبية بلوجر 2015 , بتأثير مميز يمكنك معاينتها في موقع المطور .نت ,
القائمة في غاية الروعة تعرض اقسام الموقع عن طريق ايقونات وثأثير عند الظغط عليها , بشكل رأسي في الجهة الجانبية لقالب مدونتك , الاضافة تمتاز بالخفة والسرعة بحيث لا ثؤثر على سرعة تحميل موقع , اتمنى ان تعجبكم الاضافة لاتنسو ترك تعليق تشجيعي واترككم مع الشرح

مواضيع ذات صلة
[بلوجر] قائمة جانبية احترافية متجاوبة 2014
عمل قائمة جانبية لاقسام المدونة بلوجر
للمزيد من اضافات بلوجر 

Demo
click to view

تحميل الأكواد

معاينة الاضافة

طريقة التركيب

• في البداية قم بالذهاب الى لوحة تحكم بلوجر 
• ثم اظغط على قالب  
• ثم قم بالبحث عن  </head>
• وضع الكود الاتي فوقة / قبلة

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

•  بعد ذلك قم بالبحث عن </body>
• وضع فوقة الكود الاتي 

<div class="menu-right almtwr" style="height: 2681px;">
<ul>
<li>
<a class="ss hom" href="http://www.almtwr.net/">
<i class="ka fa fa-home"></i>
<span class="na">الرئيسية </span>
</a>
</li>
<li>
<a class="ss win" href="http://www.almtwr.net/search/label/%D8%A7%D9%84%D9%88%D9%8A%D9%86%D8%AF%D8%B2">
<i class="ka fa fa-windows"></i>
<span class="na">الويندوز </span>
</a>
</li>
<li>
<a class="ss cog" href="http://www.almtwr.net/search/label/%D8%A7%D9%84%D8%A8%D8%B1%D9%85%D8%AC%D8%A9">
<i class="ka fa fa-cogs"></i>
<span class="na">البرمجة</span>
</a>
</li>
<li>
<a class="ss goo" href="http://www.almtwr.net/search/label/%D8%A7%D9%84%D8%B3%D9%8A%D9%88">
<i class="ka fa fa-google-plus"></i>
<span class="na">السيو</span>
</a>
</li>
<li>
<a class="ss des" href="http://www.almtwr.net/search/label/%D9%81%D9%88%D8%AA%D9%88%D8%B4%D9%88%D8%A8">
<i class="ka fa fa-desktop"></i>
<span class="na">التصميم</span>
</a>
</li>
<li>
<a class="ss unl" href="http://www.almtwr.net/search/label/%D8%A7%D9%84%D8%AD%D9%85%D8%A7%D9%8A%D8%A9">
<i class="ka fa fa-unlock-alt"></i>
<span class="na">الحماية </span>
</a>
</li>
<li>
<a class="ss che" href="http://www.almtwr.net/search/label/%D8%A7%D9%84%D8%AD%D9%84%D9%82%D8%A7%D8%AA?max-results=8">
<i class="ka fa fa-check-square"></i>
<span class="na">شروحات عامة </span>
</a>
</li>
<li>
<a class="ss thu" href="http://www.almtwr.net/search/label/%D9%85%D9%88%D8%A7%D9%82%D8%B9">
<i class="ka fa fa-thumbs-o-up"></i>
<span class="na">مواقع مفيدة </span>
</a>
</li>
<li>
<a class="ss des" href="http://www.almtwr.net/search/label/%D9%85%D9%88%D8%A7%D9%82%D8%B9%20%D8%A7%D9%84%D8%AA%D9%88%D8%A7%D8%B5%D9%84%20%D8%A7%D9%84%D8%A7%D8%AC%D8%AA%D9%85%D8%A7%D8%B9%D9%8A">
<i class="ka fa fa-desktop"></i>
<span class="na">مواقع أجتماعية</span>
</a>
</li>
<li>
<a class="ss che" href="http://www.almtwr.net/search/label/%D8%A7%D9%84%D9%85%D9%82%D8%A7%D9%84%D8%A7%D8%AA">
<i class="ka fa fa-check-square"></i>
<span class="na">المقالات </span>
</a>
</li>
<li>
<a class="ss dow" href="http://www.almtwr.net/search/label/%D8%A8%D9%84%D9%88%D8%AC%D8%B1">
<i class="ka fa fa-cloud-download"></i>
<span class="na">بلوجر</span>
</a>
</li>
<li><a class="ss arc" href="http://www.almtwr.net/p/blog-page_6.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>

• ثم قم بالبحث ]]></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;}.almtwr {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;}