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

كود بلغة HTML:

---

<script src="http://blogspacetech.googlecode.com/files/prototype.js" type="text/javascript"></script>

<script src="http://bilokr.googlecode.com/files/effects.js" type="text/javascript"></script>

<script src="http://bilokr.googlecode.com/files/side-bar.js" type="text/javascript"></script>


<style>

{

    font-size:75%;

}

a{

    outline: none;

}

a:active{

    outline: none;

}

#sideBar{

text-align:center;

}

#sideBar h2{

    color:#FFFFFF;

    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 10px 3px 10px;

    padding:2px;

    list-style-type:none;

    display:block;

    background-color:#DA1074;

    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:0px;

    width:100%;

}

#sideBar li a:hover{

    color:#FFFFFF;

    text-decoration:underline;

}

#sideBar{

    position: fixed;

    width: auto;

    height: auto;

    top: 140px;

    left:0px;

    background-image:url(http://2.bp.blogspot.com/_jFIsHl5gfpM/THhjQQUWsXI/AAAAAAAAAto/5E96FIy3Z0Q/s320/2wejg37.jpg.gif);

    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><div style="text-align: justify;"><span style="font-family:verdana;">روابط هامة</span>

</div></h2>

<ul>

<li><a href="#">الرابط الاول</a></li>

<li><a href="#">الرابط الثاني</a></li>

<li><a href="#">الرابط الثالت</a></li>

<li><a href="#">الرابط الرابع</a></li>

</ul>

</div> </div>

    <a id="sideBarTab" href="#"><img alt="sideBar"  src="http://1.bp.blogspot.com/_jFIsHl5gfpM/THhjOWad6fI/AAAAAAAAAtg/tG7K8tSbhdM/s320/blogspacetech.gif"  title="sideBar" /></a>

</div>

---

المصدر http://bilokr.blogspot.com/2012/10/2013.html