اضافة " قائمة الروابط " منسدلة بشكل عائم لمدونات بلوجر

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

صورة للمعاينة 

كيفية إضافة قائمة روابط جانبية منسدلة بشكل عائم لمدونات بلوجر

 تركيب الاضافة

اتبع الخطوات التالية:

• اذهب الى لوحه التحكم فى blogger
•  تخطيط
• أضافه أداة
• اختار HTML/JavaScript
• اضف الكود التالي  واضغط حفظ :

 /* by Ta3lemblog.blogspot.com */<script src="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 Ta3lemblog.blogspot.com */   <style>   body{ font-size:95%; }    a{ outline: none; }    a:active{ outline: none; }    #sideBar{ text-align:left; }    #sideBar h2{ color:#FFFF00; 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:#00000; text-decoration:underline; } #sideBar{ position: fixed; width: auto; height: auto; top: 140px; left:0px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaFq-JP87ulBuwNSUX2adY36JmHsXxfZI6hfQ_gg-m4rYrSf6a-wIPRs8ckyjotD4MSo0czzFK-qEqkesp4qajSm2KoA-AGDHrubppvjxTO8LdD8UtStckhHKpMJ-KB3pmZelUFrbq85Ry/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>           <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/AVvXsEjj3PZ9JB1v4IVHdXnuxfxUs6lF0tCu8jxZkJbCEyls2HIvrp6IAd1F4HjqcXw-KK8rQlfgeCgNDOdayq8kmDs3tAXaIM-Z3fBeLtP4Z_UEec1zY3CcNJ5FVCumjZeaJRfictrIVPLEWoQ/s1600/sidebarcollapse.png" title="sideBar" /></a>          </div> /* by Ta3lemblog.blogspot.com */

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

منشورة في: اضافات وادوات بلوجر