الاثنين، 8 ديسمبر، 2014

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

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

إضافة قائمة الاكورديون الاحترافية على مدونة بلوجر ,إضافات بلوجر ,قوالب بلوجر ,دروس بلوجر ,blogger widget ,مدون محترف

هناك أنواع مختلفة من القوائم  (القائمة الافقية ، القائمة منسدلة، القائمة العائمة المنسدلة ......الخ) هي متاحة للاستخدام في المدونات  ولكن في هذه التدوينة سوف نناقش نوع من اهم القوائم والمعروفة باسم قائمة الأكورديون. و هي القائمة المدمجة والتي هي قادرة على تخزين كمية كبيرة من الروابط. ويستند الشكل العام للقائمة الأكورديون بنقرة واحدة لتصبح منسدلة menu.In في هذه التدوينة سوف نتحدث حول إضافة قائمة الأكورديون الرائعة إلى المدونة الخاصة بك . يتم إنشاء هذه القائمة بمساعدة اكواد CSS و HTMLفمن السهل جدا لدمج هذه القائمة إلى المدونة




طريقة التركيب


  1. انتقل إلى المدونة
  2. تخطيط >> إضافة أداة
  3. حدد إضافة اداة HTML/JavaScript و إضافة هذا الكود بها

    <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:#333333;
    list-style:none;
    padding:5px;
    }
    li.title a{
    color:#ffffff;
        display:block;
     padding:5px;
        font:14px georgia, verdana;
        overflow:hidden;
            position:relative;
        width:100%;
         text-decoration:none;
    }
    .downlistie{
    list-style:none;
        display:none;
        padding-top:5px;
        width:100%;
    }
    .downlistie li{
       list-style:none;
    border-right:1px solid #dcdcdc;
    border-left: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:14px georgia, verdana;
    text-decoration:none;
    color:#333333;
    }
    .downlistie li a:hover {
    text-decoration:none;
    color:#333333;
    }
    </style>
    <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="#" >Wordpress</a></li>

                    <li class="downlistie">
                        <ul>
        <li><a href="#" >Themes</a></li>
        <li><a href="#">Plugins</a></li>
        <li><a href="#">Guides</a></li>                
                     </ul></li></ul></li>  

     <li class="accoi-menu">
                  <ul>
                    <li class="title"><a href="#" >Freebies</a></li>
                    <li class="downlistie">
                        <ul>
        <li><a href="#" >Blogger templates</a></li>
        <li><a href="#">Wordpress Themes</a></li>
        <li><a href="#">Plugins</a></li>
        <li><a href="#">Scripts</a></li>
             </ul></li></ul></li>

     <li class="accoi-menu">
                  <ul>
                    <li class="title"><a href="#" >Services</a></li>
                    <li class="downlistie">
                        <ul>
        <li><a href="#" >Website Design</a></li>
        <li><a href="#">Blogger</a></li>
        <li><a href="#">Wordpress</a></li>
        <li><a href="#">Custom Templates</a></li>                  
                     </ul></li></ul></li>


     <li class="accoi-menu">
              <ul>
                    <li class="title"><a href="#" >About us</a></li>
                      <li class="downlistie">
                        <ul>
        <li><a href="#" >About us</a></li>
        <li><a href="#">Contact us</a></li>
         <li><a href="#">Disclaimer</a></li>
        <li><a href="#">Privacy policy</a></li>
                  </ul></li></ul></li>

        </ul>



اهم الاعدادات

لتغيير لون خلفية القائمة قم بتغيير #333333  باستخدام اكواد الالوان
لتغيير اللون الاصفر عند مرور الماوس قم بتغيير كلمة orange
قم بتغيير برابط القسم الذي تريده مع تغيير الاسم بجانبه

بالتوفيق

0 التعليقات:

إرسال تعليق