إضافة قوائم إحترافية لمدونات بلوجر
اجمل قائمة جانبية ب CSS و jQuery لمدونات بلوجر
لاضافة القائمة عليك الذهاب الى التخطيط ثم اضافة اداة java script وقم بوضع هذا الكود داخلها
<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>
ليست هناك تعليقات:
إرسال تعليق