قائمة للأقسام عمودية بتقنية css3 لقوالب بلوجر
السلام عليكم ... زوار مدونتى الأعزاء سوف اشرح لكم طريقة عمل قائمة للأقسام الرئيسية للمدونة بشكل عمودى كما بمدونتى الأن ولكن بشكل مختلف ؛ الطريقة سهلة وجميلة لمحبى القوائم العمودية ...
نبداء على بركة الله ...
سوف تكون القائمة بهذا الشكل :
طريقة التركيب سهلة :
1- الذهاب الى لوحة التحكم
2- انقر على تخطيط
3- اختار اضافة اداة
4- اختر اداة الـ 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://new2015.blogspot.com/"><img src="http://www.yazansat.com/images/home.png" />الرئيسية</a></li><li class="menu"><a href="http://new2015.blogspot.com/2013/08/add-comment-facebook.html"><img src="http://www.sanachildren.org/templates/ca_faith_j25/images/icons/icon-sana-blue.png" />من نحن</a></li><li forclass="menu"><a href="http://new2015.blogspot.com/2013/08/You-Might-Also-Like.html"><img src="https://www.treesforlife.org/sites/all/themes/basic/treesforlife/images/myspace.png" />سجل الزوار</a></li><li class="menu"><a href="http://new2015.blogspot.comb.blogspot.com/search/label/%D8%A7%D9%84%D8%B1%D8%A8%D8%AD"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLwveFz54fjiDMD2oLU-VbLtRSlhhubvuBmC7in7GPlZdfrd56o0Ffo1kOxkb0cj5uMJ874wNEdEfBrV1OWKRXFrfLFQM0G75bBA-83tmOsOohGLvKtOmaoU2W5Hb6Z-H91B8EbBSk8EI/s1600/Arrow-Up-green--add-b.blogspot.com+%252816+x+16%2529.png" />الربح</a></li><li class="menu"><a href="http://new2015.blogspot.com/"><img src="http://mixnet.com/images/mixnet-message-contact.png" />اتصل بنا</a></li></ul></div>
غير رابط مدونتى برابط مدونتك : new2015.blogspot.com
اى مساعدة انا بالخدمة ...
عنوان التدوينة:
قائمة للأقسام عمودية بتقنية css3 لقوالب بلوجر
تقييم : 100من 100مرتكز على 53 تقييم.
الكاتب / المدير : Unknown
التسميات : أضافات بلوجر
توقيت النشر : 2:31 م
تقييم : 100من 100مرتكز على 53 تقييم.
الكاتب / المدير : Unknown
التسميات : أضافات بلوجر
توقيت النشر : 2:31 م
عدد التعليقات : 0
عدد المشاهدات :
