مدونة الاحمري

سورة الكهف بصوت فارس عبّاد
تابعني على ثبّت - موقع مشاركة الأخبار و عناوين الانترنت العربية

الجمعة، 1 فبراير 2013

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

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

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

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


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





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

اذهب للوحة تحكم بلوجر ثم التخطيط ثم إضافة أداة ثم اختر أداة 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>




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


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

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

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

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

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

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



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

1 التعليقات :

احصائيات

-- Internet Blogs
Internet blogs directory .
يوتيوب,سبق,صور,facebook ,فيس ,فيس بوك ,حافز قياس,موقع,حافز,نور,موقع نور,للطلاب ,تويتر,youtube,الرياض Instagram