كيفيه اضافة قائمة عمودية للأقسام الرئيسيه بمدونتك

بسم الله الرحمن الرحيم 

اقدم لكم زوارنا الكرام اضافه جديده وهي كيفيه اضافة قائمة عمودية للأقسام الرئيسيه بمدونتك 

اضافه جميل ومميز جدا وايضا سهله التركيب لا تحتاج الا تعديل الاقسام الموجود باقسام مدونتك

طريقة اضافه الاداة 

1- الذهاب الى لوحة التحكم

2- انقر على تخطيط

3- اختار اضافة اداة

4- اختر اداة html/javascript

5-انسخه الكود واضغط حفظ

الكود

----------------------------------------------

<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=" 1 الرابط"><img src="http://im38.gulfup.com/jFpV7.png" />الرئيسية</a></li><li class="menu"><a href="الرابط 2"><img src="http://im38.gulfup.com/U00k5.png" />من نحن</a></li><li forclass="menu"><a href="الرابط 3"><img src="http://im38.gulfup.com/SrrEm.png" />سجل الزوار</a></li><li class="menu"><a href="الرابط 4"><img src="http://im35.gulfup.com/V9qDM.png" />الربح من النت</a></li><li class="menu"><a href="الرابط 5"><img src="http://im38.gulfup.com/LmV2W.png" />اتصل بنا</a></li></ul></div>

----------------------------------------------

وعدل بما يناسبك مدونتك