مدونة محمد عماد : اضافة قائمة للأقسام بتقنية CSS

السلام عليكم ورحمة الله تعالى وبركاته اخواني اعضاء وزوا مدونة محمد عماد في هذا الموضوع سنتعرف عن كيفية اضافة قائمة للأقسام بتقنية CSS اضافة اكثر من رائعة كما انه يبحث عنها الكثير من المدوننين وانا الان اجلبها لكم

صورة الاضافة 

طريقة التركيب
قم بالذهاب الى لوحة تحكم مدونتك ثم اذهب الى تخطيط ثم اضافة اداة HTML/JavaScirpt وبعدها قم باضافة هذا الكود

<style>#vbar ul{list-style-type:none;list-style: none;margin:0px;padding:0px 8px 6px 8px;border-top:1px solid #d6d6d6;}#vbar ul li{background:#f8f7f7;padding:10px 10px;margin-right: 6px;color:#666;box-shadow:inset 0 0 1px #fff;border-bottom:1px solid #d6d6d6;border-left:1px solid #d6d6d6;border-right:1px solid #d6d6d6;margin:0;-webkit-transition: All 0.5s ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s ease;transition: All 0.5s ease;}#vbar ul li:hover{background:#efefef;box-shadow:inset 0 0 2px #ddd;-webkit-transition: All 0.5s ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s ease;transition: All 0.5s ease;}#vbar a{text-decoration:none;color:#2D2D2D;}#vbar a:hover{text-decoration:none;color:#037DFF;}#vbar h2{margin:8px;color:#666;border:1px solid #d6d6d6;background: -moz-linear-gradient(top, #f8f8f8, #eaeaea);background: -webkit-gradient(linear top, #f8f8f8, #eaeaea);background: -ms-linear-gradient(top, #f8f8f8, #eaeaea);background: -o-linear-gradient(top, #f8f8f8, #eaeaea);padding:8px;font-family:'alweeam', 'Droid Arabic Kufi', Arial,Helvetica,Sans-serif;font-size:12px;line-height:24px;font-weight:bold;-webkit-transition: All 1s ease;-moz-transition: All 1s ease;-o-transition: All 1s ease;-ms-transition: All 1s ease;transition: All 1s ease;}#vbar ul li a {color:#000;font-size:12px;font-family: Tahoma, Arial;font-weight: normal;text-decoration: none;-webkit-transition: All 0.5s ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s ease;transition: All 0.5s ease;}#vbar .widget { border: 1px solid #ddd; background-color: #fff; margin-bottom: 10px; box-shadow:inset 0 0 4px #eee; }.menu a img {float:right;padding-left:10px;}</style> <div id="vbar"><ul><li class="menu"><a href="http://blogger/"><img src="http://im38.gulfup.com/jFpV7.png" />الرئيسية</a></li><li class="menu"><a href="http://blogger/2013/08/add-comment-facebook.html"><img src="http://im38.gulfup.com/U00k5.png" />من نحن</a></li><li forclass="menu"><a href="http://blogger/2013/08/You-Might-Also-Like.html"><img src="http://im38.gulfup.com/SrrEm.png" />سجل الزوار</a></li><li class="menu"><a href="http://blogger/search/label/%D8%A7%D9%84%D8%B1%D8%A8%D8%AD"><img src="http://im35.gulfup.com/V9qDM.png" />الربح</a></li><li class="menu"><a href="http://blogger/">

<img src="http://im38.gulfup.com/LmV2W.png" />اتصل بنا</a></li></ul></div>

مع تغيير ما يلزم من المشار اليه باللون الازرق والاحمر 

الى هنا يكون قد انتهى الدرس الى اللقاء في درس اخر