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

Share |

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

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

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

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

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

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

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

اذهب للوحة تحكم بلوجر ثم التخطيط ثم إضافة أداة ثم اختر أداة 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/AVvXsEiBwDx3M8TsNmOAXXvZFZ2MHkz_lqhxlSs7IXwMpsx5RsHvCsSO_smULC7SrtihGBKKEpIxgMyahltaAyvVWRazqn9CMgtTn5WXzvuiDownLdeorhQvZDuAGQaPN2sjJbOr6uUxS5sFoJcG/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/AVvXsEizY7nrynsqpoOKUnPfDed8IHtxKCJbo7h4i_e1Na7zKm9fuxc-An1jA0OPOHsfglIXjwLEPUOAeWryzrG1jEndjyyw8aVc_yxfCUIuf1DOn8DtdM52VwD7sPmSvmNf2SyZV_vCt2UGjRg/s1600/sidebarcollapse.png" title="sideBar" /></a>
</div>

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

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

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

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

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

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

هذا الموضوع حصري على خبراء بلوجر , خالد الاحمري

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