Recents in Beach

header ads

قائمة عمودية جانبية مع روابط وايقونات HTML + CSS | معدلة

مدونة بوتوسوفت 2:13 م

قائمة عمودية جانبية مع روابط وايقونات HTML + CSS | معدلة

 

صورة من الأداة :

طريقة تركيب القائمة العمودية الجانبية روابط وايقونات 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>

مع تحيات بوتوسوفت

 

 

 

Tags:

إرسال تعليق

0 تعليقات