-->

قائمة جانبية احترافية بـ 3 الوان 2015

: cafeit90

: 2015-01-10T14:28:04Z السبت, 10 يناير 2015 - 02:28 م

قائمة جانبية احترافية بـ 3 الوان 2015

الان يمكن الاستغناء عن شريط القوائم السىء فى معظم القوالب الجاهزة لانة بعد طول انتظار ظهر تصميم جديد يغنى عن عن شريط القوائم وهوا قوائم جانبية احترافية مجانية .

لقد تم تصميم هذا القائمة لوجود مشاكل مع اصحاب المدونات فى شريط القوائم بمعنى انتا جبت قالب بلوجر بس فية مشكلة وهى تريد ان تعمل قائمة منسدلة فى قسم من اقسام المدونة ولكنك لم تعرف لغة البرمجة لكى تعدل على هذا القالب لتقديم التعديل المطلوب تقوم وبكل اسف ان تترك هذا القالب لهذة المشكلة اليوم نحن نحل هذه المشكلة بطريقة جميلة جداً واحترافية وهو الشىء البديل لهذا المشكلة .

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

أولا تقوم بالدخول إلى مدونتك .
تانيا تختار التخطيط.
تالتا تختار إضافة أداة جديدة و تختار 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:#5EAC3F; list-style:none; padding:5px; } li.title a{ color:#ffffff; display:block; padding:5px; font:14px droidkufi-bold; overflow:hidden; position:relative; width:100%; text-decoration:none; text-align: center; } .downlistie{ list-style:none; display:none; padding-top:5px; width:100%; } .downlistie li{ list-style:none; border-left:1px solid #dcdcdc; border-right:1px solid #dcdcdc; border-bottom:1px solid #dcdcdc; border-radius:5px; margin:5px ; padding:4px 10px; } .downlistie li:hover { background:#8DA619; } .downlistie li a{ font: 11px droidkufi-bold; { font:14px georgia, verdana; text-decoration:none; color:#333333; } .downlistie li a:hover { text-decoration:none; color:#fff; } </style> <a href="http://wachhal.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://wachhal.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a> <a href="http://wachhal.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://wachhal.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a> <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>

الشكل الثاني باللون الأزرق:

<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:#49AAB3; list-style:none; padding:5px; } li.title a{ color:#ffffff; display:block; padding:5px; font:14px droidkufi-bold; overflow:hidden; position:relative; width:100%; text-decoration:none; text-align: center; } .downlistie{ list-style:none; display:none; padding-top:5px; width:100%; } .downlistie li{ list-style:none; border-left:1px solid #dcdcdc; border-right: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: 11px droidkufi-bold; { font:14px georgia, verdana; text-decoration:none; color:#333333; } .downlistie li a:hover { text-decoration:none; color:#fff; } </style> <a href="http://wachhal.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://wachhal.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a> <a href="http://wachhal.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://wachhal.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a> <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>

الشكل التالث باللون الأسود:

<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:#333; list-style:none; padding:5px; } li.title a{ color:#ffffff; display:block; padding:5px; font:14px droidkufi-bold; overflow:hidden; position:relative; width:100%; text-decoration:none; text-align: center; } .downlistie{ list-style:none; display:none; padding-top:5px; width:100%; } .downlistie li{ list-style:none; border-left:1px solid #dcdcdc; border-right: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: 11px droidkufi-bold; { font:14px georgia, verdana; text-decoration:none; color:#333333; } .downlistie li a:hover { text-decoration:none; color:#fff; } </style> <a href="http://wachhal.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://wachhal.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a> <a href="http://wachhal.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://wachhal.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a> <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>
قائمة جانبية - تصميم جديد للقوائم - قوائم مجانية - بديل القوائم فى القوالب -قوائم احترافية وجذابة

أتمنى أن يكون الشرح أعجبكم كل من واجه مشكلة يخبرني في تعليقات بلوجر

~~منقول:المصدر: وشحال~~

@مرسلة بواسطة

كاتب ومحرر في مدونة : مدونة انتا الكسبان .

إرسال تعليق