Blogger Şık Akordeon Menü

   Blogger için sitenizde çok amaçlı olarak kullanabileceğiniz bu kişiselleştirebilen şık akordeon menü sayesinde blog sitenizin de görünümünü güzel düzgün göstererek fazla menüler arasında ziyaretçilerinizin kaybolmasını önleyebilirsiniz.

   Ayrıca blog sitenizde ki etiketlere ait kategorilendirilmiş menü olarak kullanmanızı da tavsiye ederim.

Blogger Şık Akordeon Menü Eklemek için;

* Blogger hesabınıza giriş yapın.
* Kumanda paneli > Yerleşim > Gadget ekle > HTML/Javascript yolunu izleyin.
* Açılan kutu içerisine aşağıda ki kodları ekleyin ve kendinize göre menü başlıklarını ve içerikleri ekleyerek kaydedin.
* Görünmesini istediğiniz yere Gadgeti sürükleyerek bırakın.
* Ayrıca akordeon menünün rengini temanıza göre düzenleyebilirsiniz.

<!--Blogger Şık Akordeon Menü by etralibela-61.blogspot.com/-->
<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-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: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="#" >Blogger</a></li>
<li class="downlistie">
                    <ul>
<li><a  href="http://etralibela-61.blogspot.com/#" >Bilgi Cafem 61</a></li>
<li><a  href="#" >Templates</a></li>
<li><a  href="#">Widgets</a></li>
<li><a href="#">Guides</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&lt;/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&lt;/a></li>
<li><a href="#">Privacy policy</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<!--Blogger Şık Akordeon Menü by etralibela-61.blogspot.com/-->

Kod içerisinde ki renklerle belirlediğim yerleri kendinize göre düzenlemeyi unutmayın...

Bizi Takip Edin...
Pinterest>>Facebook>>Twitter
 © by bilgicafem61

Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin

Not: Gelen Maili Aktif Etmeyi Unutmayınız!