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

 بسم الله الرحمن الرحيم 

السلام عليكم ورحمة الله وبركاتة 

قائمة الروابط الجانبية المنسدلة تعرض فيها لزوارك الروابط المهمة لهم والتي يستفيدون منها في تصفح مدونتك ,

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

مرة تلو الأخرى ,

نبداء بصورة للأضافة , 

والان طريقة التركيب على البلوجر 

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

ومن ثم ضع الكود التالي

<a href="http://al-a7mari.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><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> <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/AVvXsEhSiYGFhb05O1gl0NXf9ItBUZ_Nn2w0dGG14zQS8C3ZrWo-4obbQgpnySWt5o0EPFwb7HJUkKtBQte0vYxIMa0bvZrcY9EXe7n3lYe1j8i7xGXlM-EOV6BDg83cIPzFHkCIkuyeDvQfocxi/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"> <a href="http://al-a7mari.blogspot.com/" target="_blank"><span style="color: #666666; font-size: xx-small;">Get this</span></a></div> </div> </div> <a id="sideBarTab" href="#"><img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjTXJWk5qFJlicdmpTWN4bowTv5B3_vmSuui1y7gXT30GXxH6yK5SMkOQIaqHe9itJPlkHDcNvgJdh5MSuilLeY3rkKYU66FBkj52sidWxF96uDUHO8ti_LkH_KgTxVRQCPgtXB1pSEZk/s1600/sidebarcollapse.png" title="sideBar" /></a> </div> 

وعدل على الكود بما يناسبك , 

ما يجب تعديلة بالكود ليناسبك ,

مكان  العنوان   > ضع الكلمة التي يظهر بها الرابط , 

مكان كلمة الرابط > ضع الرابط الذي تريدة ,

( مع مراعاة ان كل عنوان ورابط لة رقم ) 

في الختام نتمنى ان الإضافة حازت على رضاكم متمنين لكم دوام الصحة والهناء ,

هشام ابرشى

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