قائمة جانبية مسندلة احترافية لمدونات بلوجر

لاضافة القائمة عليك الذهاب الى التخطيط ثم اضافة اداة java script وقم بوضع هذا الكود داخلها 

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script
 type="text/javascript" >$(document).ready(function(){
    $('li.title a').click(function(e){
        var dropDown = $(this).parent().next();
        $('.downlistie').not(dropDown).slideUp('slow');
        dropDown.slideToggle('slow');
        e.preventDefault();
    })
});</script>
<style>
ul.container{
    width:275px;
    padding:5px;
}
li.accoi-menu{
list-style:none;
    padding:1px;
    width:100%;}
li.title
{
border-radius:5px;
background:#333;
list-style:none;
padding:5px;
}
li.title a{
color:#ffffff;
    display:block;
 padding:5px;
    font:14px droidkufi-bold;
    overflow:hidden;
        position:relative;
    width:100%;
     text-decoration:none;
     text-align: center;
}
.downlistie{
list-style:none;
    display:none;
    padding-top:5px;
    width:100%;
}
.downlistie li{
   list-style:none;
border-left:1px solid #dcdcdc;
border-right:1px solid #dcdcdc;
border-bottom:1px solid #dcdcdc;
border-radius:5px;
    margin:5px ;
    padding:4px 10px;  
}
.downlistie li:hover {
background:orange;
}
.downlistie li a{
font: 11px droidkufi-bold;
{
font:14px georgia, verdana;
text-decoration:none;
color:#333333;
}
.downlistie li a:hover {
text-decoration:none;
color:#fff;
}

</style>

<a href="http://wachhal.blogspot.com/" rel="dofollow" target="_blank"
 title="Latest Tips For Bloggers"><img
src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers"
border="0" style="position: fixed; bottom: 10%; right: 0%;"
/></a><a href="http://wachhal.blogspot.com/" rel="dofollow"
target="_blank" title="Latest Tips For Bloggers"><img
src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers"
border="0" style="position: fixed; bottom: 10%; right: 0%;"
/></a> <a href="http://wachhal.blogspot.com/" rel="dofollow"
 target="_blank" title="Latest Tips For Bloggers"><img
src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers"
border="0" style="position: fixed; bottom: 10%; right: 0%;"
/></a><a href="http://wachhal.blogspot.com/" rel="dofollow"
target="_blank" title="Latest Tips For Bloggers"><img
src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers"
border="0" style="position: fixed; bottom: 10%; right: 0%;"
/></a>

<ul class="container">
<li class="accoi-menu">
              <ul>
<li class="title"><a href="#" >وشحال</a></li>
<li class="downlistie">
                    <ul>
<li><a  href="#" >إضافات بلوجر</a></li>
<li><a  href="#">قوالب بلوجر</a></li>
<li><a href="#">دروس</a></li>
</ul>
</li>
</ul>
</li>
<li class="accoi-menu">
       
              <ul>
<li class="title"><a href="#" >حصريات</a></li>
<li class="downlistie">
                    <ul>
<li><a href="#" >تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
</ul>
</li>
</ul>
</li>
<li class="accoi-menu">
              <ul>
<li class="title"><a href="#" >تصميم</a></li>
<li class="downlistie">
                    <ul>
<li><a href="#" >تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
</ul>
</li>
</ul>
</li>
<li class="accoi-menu">
              <ul>
<li class="title"><a href="#" >برمجة</a></li>
<li class="downlistie">
                    <ul>
<li><a href="#" >تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
</ul>
</li>
</ul>
</li>
<li class="accoi-menu">
          <ul>
<li class="title"><a href="#" >منوعات</a></li>
<li class="downlistie">
                    <ul>
<li><a href="#" >تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
</ul>
</li>
</ul>
</li>
</ul>

لتغيير الون القائمة استبدال الكود 333# بالون الذي تريده