طريقة تركيب القائمة العمودية الجانبية روابط وايقونات HTML + CSS :
اولاَ ادخل مدونتك كالعادة .
ثم أذهب مباشرة الى التخطيط , حيث اننا سنقوم بزرع الاداة هناك .
اضف اداة جديدة عبارة عن HTML/javacript .
ضع هذا الكود داخلها مع تعديل ماسأذكره .
<style>
/* design by 7lolblogger.com */
#menu {background: white;width: 280px;padding:10px;margin: 0 auto;direction: rtl;}
#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 {padding: 3px 10px 0 0px;}
#menu ul li a {font: normal 18px tahoma ,arial;color: #007195;float: right;text-align: right;text-decoration:none;}
#menu ul li a:hover {color:#CC3332;}
#menu ul li span {font: normal 13px tahoma ,arial;color:#7D7D7D;float: right;text-align: right;}
#menu li span:hover {color: #494949;}
/* design by 7lolblogger.com */
</style>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<div id="menu">
<ul>
<!--design:7lolblogger.com-->
<li><img src="https://cdn1.iconfinder.com/data/icons/free-red-cloud-icons/48/Youtube_TV.png" border="0" alt="" /><a href="#">قنوات تلفزونية تعليمية<br />
<span>هنا ضع وصف قصير كالذي كتبته الأن ..</span></a></li>
<li><img src="https://cdn1.iconfinder.com/data/icons/humano2/48x48/actions/bookmark-new.png" border="0" alt="" /><a href="#">أدوات جديدة خاصة بالتطوير<br />
<span>هنا ضع وصف قصير كالذي كتبته الأن .</span></a></li>
<li><img src="https://cdn1.iconfinder.com/data/icons/snowish/48x48/apps/gnome-control-center.png" border="0" alt="" /><a href="#">دعم فني مجانا لموقعك<br />
<span>هنا ضع وصف قصير كالذي كتبته الأن .</span></a></li>
<li><img src="https://cdn1.iconfinder.com/data/icons/humano2/48x48/emblems/emblem-symbolic-link.png" border="0" alt="" /><a href="#">ضع رابطك في موقعنا<br />
<span>هنا ضع وصف قصير كالذي كتبته الأن .</span></a></li>
</ul><a href='http://www.7lolblogger.com/' style='display: none;'>7lolblogger</a></div>
اللون الأحمر : رابط الموضوع او الصفحة .
اللون الأصفر : عنوان الموضوع او الصفحة .
اللون الازرق : رابط الأيقونة في حال اردت تغيرها .
اللون البرتقالي : وصف قصير للموضوع او الصفحة .
إرسال تعليق