12 يونيو، 2014

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

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

إضافة قائمة الاكورديون الاحترافية على مدونة بلوجر ,إضافات بلوجر ,قوالب بلوجر ,دروس بلوجر ,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
قم بتغيير # برابط القسم الذي تريده مع تغيير الاسم بجانبه

بالتوفيق

مواضيع ذات صلة
إضافة قائمة الأكورديون المنسدلة في بلوجر
4 / 5
بواسطة

هناك 4 تعليقات :

  1. السلام عليكم ورحمة الله وبركاته
    تمنياتي لك أخي الكريم بالتوفيق والسداد
    والى الأمام دائماً
    تحياتي

    ردحذف
    الردود
    1. شكرا لك اخي عمرو

      نورت الموضوع بردك

      و شرف ئلي تعليقك على مواضيعي

      حذف
  2. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
    الردود
    1. اعتذر منك ولكن لا ننشر روابط إشهار

      حذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r