اضافة قائمة روابط جانبية مندسلة

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

طريقة التركيب :
اذهب للوحة تحكم بلوجر
التخطيط
إضافة أداة ثم اختر أداة HTML/JavaScript
ومن ثم ضع الكود التالي :

c="http://safir85.ucoz.com/bdlab-blogspot/24work/side-bar-menu/prototype.js" type="text/javascript"></script>
 <script src="http://safir85.ucoz.com/bdlab-blogspot/24work/side-bar-menu/effects.js" type="text/javascript"></script>
  <script src="http://safir85.ucoz.com/bdlab-blogspot/24work/side-bar-menu/side-bar.js" type="text/javascript"></script>
     /* by 7loll.blogspot.com */
   <style>
   body{ font-size:75%; }
    a{ outline: none; }
    a:active{ outline: none; }
    #sideBar{ text-align:left; }
    #sideBar h2{ color:#F0FFFF; font-size:110%; font-family:arial; margin:10px 10px 10px 10px; font-weight:bold !important; }
    #sideBar h2 span{ font-size:125%; font-weight:normal !important; }
    #sideBar ul{ margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; }
    #sideBar li{ margin:0px 5px 5px 10px; padding: 0 0 0 10px; list-style-type:none; display:block; background-color:#575BFF; width:177px; color:#FFFFFF; }
    #sideBar li a{ width:100%; }
    #sideBar li a:link, #sideBar li a:visited{ color:#FFFFFF; font-family:verdana; font-size:100%; text-decoration:none; display:block; margin:0px 0px 0px 0px; padding:0 0 0 20px; width:100%; }
    #sideBar li a:hover{ color:#FFFF00; text-decoration:underline; } #sideBar{ position: fixed; width: auto; height: auto; top: 140px; left:0px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEN8IpUZWiyKx1AYKfRQl40rpOb0eDoLrFW-RN9SqYzq7YwkTo-duDvMp9yT5WlMCUHAPYutxHPbCmDJ2jNOVWgogFuYwYi84E1EhZ5fqEa1fIPOzqnE6gQhZr0WUKuaLtQiY7OGInU9rh/s320/left.collapse.border.png); background-position:top right; background-repeat:repeat-y; }
    #sideBarTab{ float:left; height:137px; width:28px; }
    #sideBarTab img{ border:0px solid #FFFFFF; }
    #sideBarContents{ float:left; overflow:hidden !important; width:200px; height:320px; }
    #sideBarContentsInner{ width:200px; }
    </style>
       /* blogbzm.blogspot.com */
     <div id="sideBar">
      <div id="sideBarContents" style="display:none;">
       <div id="sideBarContentsInner">
        <h2>روابط مهمة</h2>
         <ul>
          <li><a href="الرابط 1">العنوان 1</a></li>          <li><a href="الرابط 2">العنوان 2</a></li>          <li><a href="الرابط 3">العنوان 3</a></li>          <li><a href="الرابط 4">العنوان 4</a></li>          <li><a href="الرابط 5">العنوان 5</a></li>          <li><a href="الرابط 6">العنوان 6</a></li>          </ul>
          <div dir="rtl" style="text-align: right;" trbidi="on"> </div> </div> </div>
          <a id="sideBarTab" href="#"><img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinicePVogzeLzjqu0EsIvSOZfXHESsV7hN9PZvyP5Gp00yBDnvaO0fvvg5cwZgb5s9c7o78ZfKtlrFw6ifUnvsFJxEkbc3KyXzh01Vc8WO64hhxmKctUoZnOw2vQ3DSiSfVHI0WOH8tA4/s1600/sidebarcollapse.png" title="sideBar" /></a>
          </div>

 قم بتعديل الروابط الى مايناسبك

من فضلك اضغظ لايك لمشاهدة لينك التحميل