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

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

فى البداية نذهب لمعاينة سريعة للقائمة 

من هنا

شرح التركيب 

اذهب للوحة تحكم مدونتك >> التخطيط  >> اضافة أداة >> html/javascript

ضع بها هذا الكود 

<style>

#menu {

 background: white;

 width: 280px;

 padding:10px;

}

#menu ul {

 margin:0;

 padding:0;

 list-style: none;

}

#menu ul li {

 margin: 0;

 padding: 5px 0 10px;

 border-bottom: 1px dashed #EAEAEA;

}

#menu ul li img {

 float: right;

 padding: 3px 0 0 10px;

}

#menu ul li a {

 font: normal 18px default ;

 color: #007195;

 text-decoration:none;

}

#menu ul li a:hover {

 color:#CC3332;

}

#menu ul li span {

 font: normal 13px ;

 color:#7D7D7D;

}

#menu li span:hover {

 color: #494949;

}

</style>

<div id="menu">

 <ul>

 <li><img  src="http://icons.iconarchive.com/icons/double-j-design/origami-colored-pencil/32/blue-home-icon.png"  border="0" alt="" /><a href="#">الرئيسية<br />

 <span>رئيسية المدونة</span></a></li>

 <li><img  src="http://icons.iconarchive.com/icons/mattahan/umicons/32/Folder-Folder-Options-icon.png"  border="0" alt="" /><a href="#">مدونة ابداعاتى<br />

 <span>الوصـــــف</span></a></li>

 <li><img  src="http://icons.iconarchive.com/icons/aha-soft/free-large-boss/32/Admin-icon.png"  border="0" alt="" /><a href="#">مدونة ابداعاتى<br />

 <span>الوصــــــف</span></a></li>

<li><img  src="http://icons.iconarchive.com/icons/iconshock/real-vista-networking/32/phone-icon.png"  border="0" alt="" /><a href="#">مدونة ابداعاتى<br />

 <span>الوصــــــف</span></a></li>

<li><img  src="http://icons.iconarchive.com/icons/gakuseisean/aire/32/Images-icon.png"  border="0" alt="" /><a href="#">مدونة ابداعاتى<br />

 <span>الوصــــــف</span></a></li>

<li><img  src="http://icons.iconarchive.com/icons/kyo-tux/ginux/32/Start-Menu-Prorgrams-icon.png"  border="0" alt="" /><a href="#">مدونة ابداعاتى<br />

 <span>الوصــــــف</span></a></li>

 </ul>

</div>

♦ ملاحظات هامة على الكود ♦

استبدل الكلمات المحددة فى الكود أعلاه بما يناسبك

مع مراعاة استبدال الـــ ( # ) بالرابط 

تعليقاتكم المشجعة تترك فى أنفسنا الثقة وتعطينا دفعة للتطوير وتقديم المحتوى الحصرى الجيد