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

كثير من المدونين يجدون بعض من الحيرة فى قائمة احترافية لمدوناتهم تمكنهم من عرض أقسام مدوناتهم بأسلوب جذاب حضارى لا يؤثر على رونق وجمال المدونة بأن تشغل جزء كبير من المدونة و يكون شكلها غير متناسق فلذلك عندما وجدت هذه القائمـــة فى أحد المدونات الأجنبية قمت بتعريبها وتنسيقها وقررت عمل موضوع بها فى مدونة ابداعاتى لكى تصل للعرب ويستفيد بها كل مدون عربى ولكى لا أطيل عليكم فى الوصف هيا بنا للمعاينة والشرح

♫ بعض اقتراحاتى لاستخدام  القائمة  ♫

(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;font-family: 'Droid Arabic Kufi';
  text-align:center;
  text-decoration:none;
}
li.accoi-menu{
list-style:none;
    padding:1px;
    width:100%;}
li.title
{
border-radius:5px;
background:#1b9bff;
list-style:none;
padding:5px;
}
li.title a{
color:#ffffff;
    display:block;
 padding:5px;
    overflow:hidden;
        position:relative;
    width:100%;
     text-decoration:none;
}
.downlistie{
list-style:none;
    display:none;
    padding-top:5px;
    width:100%;text-decoration: none;
}
.downlistie li{
list-style: none;
background: #E6E3E3;
border-radius: 5px;
margin: 5px 5px 6px -32px;
padding: 4px 10px;
text-decoration: none;
}
.downlistie li:hover {
background:orange;text-decoration: none;
}
.downlistie li a{text-decoration: none;
{
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="#" >مدونة ابداعاتى </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>  

♦  التعديلات المتاحة على القائمة  ♦ 

(1) لون الأقسام الرئيسية فى القائمة >> #1b9bff

(2) لون الأقسام الفرعية فى القائمة >> #E6E3E3

(3) لون القسم الفرعى بعد مرور الماوس عليه >> orange

(4) استبدل رمز # بالرابط المناسب للقسم الذى تريده 

قائمة رأسية احترافية لمدونتك مع خاصية الوصف 

فى موضوع سابق قدمت لكم قائمة أخرى رأسية لمدونات بلوجر
مع خاصية الوصف و رموز جانبية لكل قسم بشكل بسيط
و منتظم
المعاينة >> من هنا
احصل عليها >> من هنا

انتهى الموضوع بفضل اللــه تعالى و توفيقــه

 و لم يتبقى سوى تعليقاتكم المشجعة عليه و الاستفسارات الهادفة للتطوير و الوصول الى المراد بالأسلوب الحضارى بترك تعليق تشرح فيه ما تريد