هناك أنواع مختلفة من القوائم (القائمة الافقية ، القائمة منسدلة، القائمة العائمة المنسدلة ......الخ) هي متاحة للاستخدام في المدونات ولكن في هذه التدوينة سوف نناقش نوع من اهم القوائم والمعروفة باسم قائمة الأكورديون. و هي القائمة المدمجة والتي هي قادرة على تخزين كمية كبيرة من الروابط . ويستند الشكل العام للقائمة الأكورديون بنقرة واحدة لتصبح منسدلة menu.In في هذه التدوينة سوف نتحدث حول إضافة قائمة الأكورديون الرائعة إلى المدونة الخاصة بك . يتم إنشاء هذه القائمة بمساعدة اكواد CSS و HTML. فمن السهل جدا لدمج هذه القائمة إلى المدونة
طريقة التركيب
- انتقل إلى المدونة
- تخطيط >> إضافة أداة
- حدد إضافة اداة 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
قم بتغيير # برابط القسم الذي تريده مع تغيير الاسم بجانبه
لتغيير اللون الاصفر عند مرور الماوس قم بتغيير كلمة orange
قم بتغيير # برابط القسم الذي تريده مع تغيير الاسم بجانبه
بالتوفيق
إضافة قائمة الأكورديون المنسدلة في بلوجر
4
/
5
بواسطة
مدون محترف
السلام عليكم ورحمة الله وبركاته
ردحذفتمنياتي لك أخي الكريم بالتوفيق والسداد
والى الأمام دائماً
تحياتي
شكرا لك اخي عمرو
حذفنورت الموضوع بردك
و شرف ئلي تعليقك على مواضيعي
أزال أحد مشرفي المدونة هذا التعليق.
ردحذفاعتذر منك ولكن لا ننشر روابط إشهار
حذفالسلام عليكم
ردحذفهل لديك طريقه لجعل المدونه بلوجر مثل سؤال وجواب فقط
يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r