قائمة رأسية احترافية متعددة الاستخدامات لمدونات بلوجر
كثير من المدونين يجدون بعض من الحيرة فى قائمة احترافية لمدوناتهم تمكنهم من عرض أقسام مدوناتهم بأسلوب جذاب
حضارى لا يؤثر على رونق وجمال المدونة بأن تشغل جزء كبير من المدونة و
يكون شكلها غير متناسق فلذلك عندما وجدت هذه القائمـــة فى أحد المدونات
الأجنبية قمت بتعريبها وتنسيقها وقررت عمل موضوع بها فى مدونة ابداعاتى لكى تصل للعرب ويستفيد بها كل مدون عربى ولكى لا أطيل عليكم فى الوصف هيا بنا للمعاينة والشرح
♫ بعض اقتراحاتى لاستخدام القائمة ♫
(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) استبدل رمز # بالرابط المناسب للقسم الذى تريده
د
