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


بسم الله الرحمن الرحيم
والصلاة والسلام على خير خلق الله سيدنا محمد عليه الصلاة واتم التسليم السلام عليكم ورحمة الله وبركاته .  
عدت اليكم بعد انقطاع بسيط , وعدت اليكم بهذه الأداة الجميلة والرائعة والتس تتناسب مع جميع المواقع وليس فقط بلوجر , الأدات تعتمد اعتماد اساسي على الـ HTML + CSS فقط , ورغم انها متكونة بهذه اللغتين البدائيتين الى انها رائعة في نظري وستكون رائعة في نظركم ايضاَ انشاءالله

طريقة تركيب الإضافة

اولاَ ادخل مدونتك كالعادة .
ثم أذهب مباشرة الى التخطيط , حيث اننا سنقوم بزرع الاداة هناك .
اضف اداة جديدة عبارة عن HTML/javacript .
ضع هذا الكود داخلها مع تعديل ماسأذكره

<style>
/* design blogbzm.blogspot.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 blogbzm.blogspot.com */
</style>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<div id="menu">
 <ul>
<!--design:blogbzm.blogspot.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.blogbzm.blogspot.com/' style='display: none;'>blogbzm</a></div>

بعض الروابط و العناوين يجب تغيرها وهي علي النحو التالي

# : رابط الموضوع او الصفحة 
اللون البرتقالي : وصف قصير للموضوع او الصفحة
اللون الازرق : رابط الأيقونة في حال اردت تغيرها
للون الأحمر:اعنوان الموضوع او الصفحة

في انـتظار تعليقاتكم لتقديم المزيد تحياتي 
الكاتب: محمد الكوري بوزوم
من فضلك اضغظ لايك لمشاهدة لينك التحميل

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

  1. كالعادة تدوينة جميلة اخي
    www.devpens.blogspot.com

    ردحذف
    الردود
    1. شكرا اخي الفاضل علي مرورك العطر وتعليقك المشجع :))

      حذف
  2. رائعة جدا الاظافة لك موفور الشكر
    مجلة حوش النعاس

    ردحذف
    الردود
    1. العفو أخي الفاضل تشرفت بمرورك الكريم (h)

      حذف
  3. تشرفت بمرورك اخي الكريم

    ردحذف
  4. جميييييييييييييييييله جدا هذة الأده
    وتوفر مساحه أيضا فى القائمه الجانبية وخفيفه ولا تسبب ثقل على متصفحى الموقع

    ردحذف
    الردود
    1. أشكرك جزيل الشكر علي هذا المرور الكريم =r

      حذف
  5. الردود
    1. وفيك بوركت ايضا تحياتي ياغالي =r

      حذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب وعدم نشر روابط إشهار حتى ينشر التعليق
ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود
=q =s =d =f =g =h =t =y =u =z =x =c =v =b =n =a =e =r