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

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

من لوحة التحكم

الى التخطيط

اضافة اداة 

اختر اداة HTML/JAVASCRIPT

 وفيها قم باضافة هذا الكود : 

<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://aboumarwane2002.blogspot.com/"><img src="http://s01.arab.sh/i/00029/z4mfqkt8rhxw.png" />الرئيسية</a></li><li class="menu"><a href="http://aboumarwane2002.blogspot.com/"><img src="http://s01.arab.sh/i/00029/r5v95qwdzkk6.png" />من نحن</a></li><li forclass="menu"><a href="http://aboumarwane2002.blogspot.com/"><img src="http://s01.arab.sh/i/00029/h69swd8gpeod.png" />سجل الزوار</a></li><li class="menu"><a href="http://aboumarwane2002.blogspot.com/"><img src="http://s01.arab.sh/i/00029/q7qepetu6oef.png" />الربح</a></li><li class="menu"><a href="http://aboumarwane2002.blogspot.com/"><img src="http://s01.arab.sh/i/00029/g17k27yal2pp.png" />اتصل بنا</a></li>

</ul></div>

الروابط بالاحمر هي روابط صور الاضافة وهي بصيغة .png. مقاسها 16X16 . اذا اردت غييرها بما يناسبك .

بعض الصور بصيغة . 16X16  png .

         

          

الروابط باللون الازرق هي روابط مدونتي غييرها بالروابط التي تريد الانتقال اليها .

اضافة قسم معين 

اذا اردت ان تضيف قسم اخر كرر فقط الكود التالي :

مع تغيير اسم القسم .رابط الصورة .ورابط مدونتي طبعا .

بشرط ان يكون تكرار الكود بين بداية ونهاية الوسم...

<div id="vbar"><ul>

يعني هنا.....بينهما

</ul></div>

الكـــــــــــود :

<li class="menu"><a href="http://aboumarwane2002.blogspot.com/"><img src="http://s01.arab.sh/i/00029/g17k27yal2pp.png" />اتصل بنا</a></li>

معاينة

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

لكم مني احلى سلام

المصدر :

***************************************************

تم التعديل ورفع الصور لعدم ظهورها

اذا لم تظهر الصور في الاضافة فقم برفعها من جديد

           

***************************************************