اضافات بلوجر بلوجر CSS حصرياا اضافة قوائم جانبية لمدونات بلوجر

A+ A-

حصرياا اضافة قوائم جانبية لمدونات بلوجر

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

طريقة الاضافة ؟

أولا تقوم بالدخول إلى مدونتك .

تانيا تختار التخطيط.

تالتا تختار إضافة أداة جديدة و تختار 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>

اثمنى ان يكون الشرح جيد . ان واجهتكم اي مشكلة فاتصلوا بنا او
كتابتها في تعليق

اضافات بلوجر, بلوجر, CSS