بسم الله الرحمن الرحيم
مرحبا بكم في مدونة مسطرة ... و موعدنا اليوم مع طريقة اضافة قائمة عمودية للاقسام بتقنية CSS
اهلا بكم زوارنا
الاعزاء مع اضافة جديده لبلوجر مقدمه من مدونة مسطرة الاضافة التى جئت لكم
بها اليوم هي مميزة حقا ويبحث عنها الكثير من المدونين ولكن لا فائده لا
يعرف كيف يوتي بها وقمنا بالاتيان بها لزوار مدونة اضافات بلوجر مع سهولة
التركيب وبدون التعديل فى الكود والازعاج كما تعودتم دائما
طريقة التركيب
1 - قم بالذهاب الى لوحة التحكم
2 - قم بالدخول الى التخطيط
3 - قم باضافة اداة HTML/JAVASRCIPT
4 - وقم باضافة هذا الكود بها
<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://blogadditoins.com/"><img src="http://im38.gulfup.com/jFpV7.png" />الرئيسية</a></li><li class="menu"><a href="http://blogadditoins.com/2013/08/add-comment-facebook.html"><img src="http://im38.gulfup.com/U00k5.png" />من نحن</a></li><li forclass="menu"><a href="http://blogadditoins.com/2013/08/You-Might-Also-Like.html"><img src="http://im38.gulfup.com/SrrEm.png" />سجل الزوار</a></li><li class="menu"><a href="http://blogadditoins.com/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://blogadditoins.com/"><img src="http://im38.gulfup.com/LmV2W.png" />اتصل بنا</a></li></ul></div>
الذى ملون باللون الاحمر قم بتعديله برابط موقعك
اما المكتوب بالعربى فهو واضح بالنسبة لك الرئيسية وهكذا
و بكده نكون انتهينا من موضوعنا وهو طريقة اضافة قائمة عمودية للاقسام بتقنية CSS شكرا لكم جميعا ...
و السلام عليكم و رحمة الله و بركاته
.png)
.jpg)
.png)
ليست هناك تعليقات :
إرسال تعليق