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

اليوم سوف نتعرف على إضافة رائعة جداً ، نسطيع من خلال هذه الإضافة أن تضع بها أقسام مدونتك ، وهي إضافة خفيفة لطيفة .

شكل الإضافة

- طريقة تركيب الإضافة :

1- أدخل إلى مدونتك أختر لوحة التحكم | قالب >> تحرير قالب .

2- إبحث عن الوسم : ]]></b:skin>

3- أضف الكود التالي فوقه :

 #wrapper {
    width: 350px;
    font-family:ge_ss_threeregular,Droid Sans;Verdana, Geneva, sans-serif;
    margin-right: auto;
    margin-left: auto;
    }
.accordionButton {   
    width: 325px;
    float: right;
    background: #fff url(https://dl.dropboxusercontent.com/u/223738947/Demos/Jquery%20Accordion%20Menu%20For%20Blogger/Images/bg-shade-light.png) repeat-x bottom right;
    font-size: 14px;
    font-weight: bold;
    color: #555;
    border-bottom: solid 1px #ddd;
    padding: 3px 0px;
    cursor: pointer;
    padding: 5px 10px;
    text-shadow: #fff 0px 1px 0px;
    }
  .accordionButton  span {
    float:left;
    margin-left: 10px;
    color:#555;
    border: 1px dotted #555;
    display:inline-block;
    }
.accordionContent {   
    width: 325px;
    float: right;
    background: #444;
    font-size:12px;
    display: none;
    padding: 5px 10px;
    margin: 0 auto;
    }
.accordionContent ul {
    float: right;
    width:300px;
    margin:0 auto;
    padding:10px 10px;
}
.accordionContent li {
    list-style: none;
    list-style-image: none;
}
.accordionContent li a {
    background: #555 url(https://dl.dropboxusercontent.com/u/223738947/Demos/Jquery%20Accordion%20Menu%20For%20Blogger/Images/bg-shade-light.png) repeat-x 0 100%;
    display:block;
    font-family:ge_ss_threeregular,Droid Sans;Arial, sans-serif,Helvetica;
    font-size:12px;
    font-weight: bold;
    overflow:hidden;
    color:#555;
    border: none;
    text-decoration:none;
    position:relative;
    width:100%;
    line-height:20px;
    text-transform:capitalize;
    padding:5px 5px 10px 0;
    text-shadow:0px 1px px #fff;
        }
.accordionContent li a:hover{
    background: #b3b3b3 url(https://dl.dropboxusercontent.com/u/223738947/Demos/Jquery%20Accordion%20Menu%20For%20Blogger/Images/bg-shade-medium.png) repeat-x 0 100%;
    text-shadow:none;
    color: #fff;
    text-decoration:none;
}

4- أحفظ القالب .

5- بعد ذلك أحتر تخطيط ومن تخطيط أختر إضافة أداة : HTML/JavaScript

6- أضف الكود التالي في صندوق الأداة ثم إحفظ .

 <div id="accor-wrap">
<!-- Dropdown 1 -->      
<div class="accordionButton">أفضل إضافات بلوجر لعام 2015<span>&#9660;</span></div>
        <div class="accordionContent">
        <ul>
        <li><a  href="#" >1.تعديل</a></li>
                    <li> <a  href="#">2. تعديل</a></li>
                    </ul>
        </div>
<!-- End Dropdown 1 -->
<!-- Start Dropdown 2 -->       
<div class="accordionButton">أفضل شروحات السيو <span>&#9660;</span></div>
        <div class="accordionContent">
        <ul>
        <li><a  href="#"> 1. تعديل </a></li>
                    <li> <a  href="#"> 2. تعديل</a></li>
                    </ul>
      </div>
<!-- End Dropdown 2 -->
<!-- Dropdown 3 -->

        <div class="accordionButton">أفضل دروس بلوجرTemplate <span> &#9660; </span> </div>
        <div class="accordionContent">
             <ul>
        <li><a  href="#" >1. تعديل</a></li>
                    <li> <a  href="#">2.تعديل</a></li>
                    <li> <a  href="#">3. تعديل</a></li>
                    </ul>
        </div>
     <!-- End Dropdown 3 -->  
<!-- Dropdown 4 -->
<div class="accordionButton">أفضل قوالب بلوجر <span>&#9660;</span></div>
        <div class="accordionContent">
             <ul>
        <li><a  href="#" >1. قوالب معربة</a></li>
                    <li> <a  href="#">2. قوالب أجنبية</a></li>
                    </ul>
        </div>
<!-- End Dropdown 4 -->
    </div>