قائمة روابط متحركة بشكل جميل لمدونات البلوجر

لأضافة هي قائمة روابط متحركة على جانب القالب (المدونة) على الجانب الأيسر بشكل جميل وجذا وطريقة العرض بشكل رائع وجميل ومتوافقة مع جميع القوالب والمتصفحات دون التأثير على عمل المدونة.

اذهب الى المسار التالي
تخطيط >عناصر الصفحة > اضافة اداة > Html / Javascript
انسخ هذا الكود والصقه داخل الأداة

<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/prototype.js" type="text/javascript"></script>
<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/effects.js" type="text/javascript"></script>
<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/side-bar.js" type="text/javascript"></script>
<style>
body{
    font-size:75%;
}
a{
    outline: none;
}
a:active{
    outline: none;
}
#sideBar{
text-align:right;
}
#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://i49.tinypic.com/121abrq.jpg);
    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>side<span>bar</span></h2>
                    <ul>
                <li><a href="link 1">text 1</a></li>
                <li><a href="link 2">text 2</a></li>
                <li><a href="link 3">text 3</a></li>
                <li><a href="link 4">text 4</a></li>
                  </ul>
                </div> </div>
    <a id="sideBarTab" href="#"><img alt="sideBar" src="http://i46.tinypic.com/ao8h9u.jpg" title="sideBar"/></a>
</div>      

    *شرح الأوان*    

الأحمر:. لوضع رابط النص الذي بالون الأخضر.

الأخضر:. لوضع نص لرابط الذي بالون الأحمر . 

الأزرق:. لوضع عنوان لقائمة الروابط. 

ملاحضة :. هذا كود css قابل للتعديل.