كيفية إضافة قائمة جانبية أحترافية لمدونات بلوجر

أهلا وسهلا بكم زوار ومتابعي المدونة الكرام 

اليوم سوف نتعرف على إضافة في قمة الجمال والجاذبية تضيف إلى مدونتك لمسة جمالية غ إحترافية وهي سهلة التركيب ، تركب على الشريط الجانتي للمدونة .

للمعاينة أنقر هنا

- طريقة التركيب :

1- ادخل إلى مدونتك ثم اختر لوحة التحكم .

2- من لوحة التحكم اختر تخطيط .

3- من تخطيط اختر إضاافة أداة HTML/JavaScript

4- اللصق الكود التالي في صندوق الأداة ثم احفظ .

 <style>
/***** Menu CSS *****/
.side-nav { width: 100%; }
.side-nav ul { -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; list-style: none; margin: 0; padding: 0; overflow: hidden; }
.side-nav ul li { clear: both; display: inline-block; margin: 0; padding: 0; width: 100%; }
.side-nav ul li a { background: #e74c3c; border-right: 5px solid #C0392B; border-left: 5px solid #C0392B; color: #fff; display: block; font-style: italic; padding: 7px 12px; text-align: center; }
.side-nav ul li:nth-child(even) a { background: #c0392b; border-right: 5px solid #E74C3C; border-left: 5px solid #E74C3C; }
.side-nav ul li a:hover, .side-nav ul li:nth-child(even) a:hover { background: #000; }
</style>
<div class="side-nav">
<ul>
<li><a href="#">الرئيسية</a></li>
<li><a href="#">تعديل 1</a></li>
<li><a href="#">تعديل  2</a></li>
<li><a href="#">تعديل  3</a></li>
<li><a href="#">تعديل  4</a></li>
<li><a href="#">تعديل  5</a></li>
<li><a href="#">تعديل  6</a></li>
<li><a href="#">تعديل  7</a></li>
</ul>
<div class="clr"></div>
</div> 

وأخيراً نترككم برعاية الله وتوفيقه