سلام عليكم اخواني
في هذا الدرس من دروس بلوجر سنتعلم اضافة قائمة جانبية احترافية لمدونات بلوجر هي اضافة رائعة , وسهلة اضافة ,وتتميز بعدة مميزات منها سهولة الاضافة وشكل الرائع لن اطول عليكم اترككم مع الشرح .
طريقة تركيب اضافة :
- اذهب الى لوحة التحكم الخاصة بمدونتك »»» تم التخطيط »»» تم اضغط على اضافة اداة
- قم اختر اداة HTML/JavaScript
- تم اضف الكود التالي مع تغيير ما ساذكر.
<div class='menu-by-sofaxeblogspot'>
<ul>
<li>
<a dir="rtl" href="http://sofaxe.blogspot.com//search/label/%D8%A8%D8%B1%D8%A7%D9%85%D8%AC?&max-results=11">برامج</a>
</li>
<li>
<a dir="rtl" href="http://sofaxe.blogspot.com//search/label/%D9%82%D9%88%D8%A7%D9%84%D8%A8%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1%20?&max-results=11">قوالب بلوجر</a>
</li>
<li>
<a dir="rtl" href="http://sofaxe.blogspot.com//search/label/%D8%A7%D8%B6%D8%A7%D9%81%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1%20?&max-results=11">إضافات بلوجر</a>
</li>
<li>
<a dir="rtl" href="http://sofaxe.blogspot.com//search/label/%D8%AA%D8%AD%D9%85%D9%8A%D9%84%20%D8%A7%D9%84%D8%B9%D8%A7%D8%A8%20%D8%A7%20%D9%84%D9%83%D9%85%D8%A8%D9%8A%D9%88%D8%AA%D8%B1%20?&max-results=11">العاب ا لكمبيوتر</a>
</li>
<li>
<a dir="rtl" href="http://sofaxe.blogspot.com//search/label/%D9%85%D9%88%D8%A7%D9%82%D8%B9?&max-results=11">مواقع</a>
</li>
<li>
<a dir="rtl" href="http://sofaxe.blogspot.com//search/label/%D8%AD%D9%85%D8%A7%D9%8A%D8%A9?&max-results=11">حماية</a>
</li>
<li>
<a dir="rtl" href="http://sofaxe.blogspot.com//search/label/%D8%A7%D9%86%D8%AF%D8%B1%D9%88%D9%8A%D8%AF?&max-results=11">اندرويد</a>
</li>
<li>
<a dir="rtl" href="http://sofaxe.blogspot.com//search/label/?&max-results=11">انظمة التشغيل</a>
</li>
</ul>
</div>
<style>
/* this is menu by : http://sofaxe.blogspot.com -- */
.menu-by-sofaxeblogspot ul{width:300px;float:right;display:block;}.menu-by-sofaxeblogspot li{margin: 0;text-align: right;list-style:none;width:48%;float:right;padding:0 2px 0 3px;}.menu-by-sofaxeblogspot li a{position:relative;display:block;padding:.4em .4em .4em .4em;margin:.1em 0 .1em 2.5em;background:#F1F1F1;border:1px solid #DDD;border-radius:3px;color:#444;text-decoration:none;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;-ms-transition:all .3s ease-out;transition:all .3s ease-out;font:12px tahoma,arial;text-shadow:1px 1px rgba(255, 255, 255, 0.48);}.menu-by-sofaxeblogspot li a:before{content:'#';position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#39C4FF;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}.menu-by-sofaxeblogspot li a:after{position:absolute;content:'';border:.5em solid rgba(0, 0, 0, 0);left:-1em;top:50%;margin-top:-.5em;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;-ms-transition:all .3s ease-out;transition:all .3s ease-out;font:12px tahoma,arial;text-shadow:1px 1px rgba(255, 255, 255, 0.53);}.menu-by-sofaxeblogspot li a:hover:after{left:-.5em;border-left-color:#39C4FF;}
</style>
استبدل لون احمر برابط
استبدل لون اصفر باسم رابط