Blogger için Sidebar Menü çubuğu Eklentisi

Blogger’un, ana sayfa sidebar sütun’unda etiketlerinizden oluşan linkleri menü çubuğu gibi kullanmanızı sağlayan sidebar gadget eklentisi....

...

Blogger’un, ana sayfa sidebar sütun’unda etiketlerinizden oluşan linkleri menü çubuğu gibi kullanmanızı sağlayan sidebar gadget eklentisi. Menü çubuğu olarakta kullanılabilen gadget eklentisine 3 veya 4 ad. etiket linki ekleyebilirsiniz. Blog’un başlık header kısmında bulunan menü çubuğundaki, hakkında, iletişim, gizlilik ve benzer etiket linklerinizi sidebara taşıyarak okuyucularınıza daha fazla seçenek sunup boşalan bu alana farklı kategoriler (etiket) atayın.

Menü çubuğu blog’un başında olur, düşüncesini bir kenara bırakarak yaratıcılık düşüncelerinizi harakete geçirin. Alt alta sıralanmış linklerde kullanabilirsiniz. Ancak bunlar menü çubuğu görüntüsü gibi renkli olmayacaklardır. Neden olmasın! diyerek hemen başlayın. Yapmanız gereken işlem sadece kodları gadget olarak eklemekten ibarettir. Sidebara ekleyeceğiniz menü çubuğu hakkındaki açıklamaları aşağıdan takip ederek hemen başlayın. Kurulum aşaması bittiğinde nasıl olacağını yukarıdaki resimden görebilir veya şu anda sidebar da canlı olarak görebilirsiniz.

Blogger için Sidebar Menü çubuğu Eklentisinin kullanımı :

1. Blogger kumanda paneline giriş yapın.
2. Yerleşim, Gadget ekle seçeneğini açın.
3. Html/JavaScript gadget’ini açın ve aşağıdaki kodları kopyalayarak gadget içine yapıştırın.

<style> 
#agnavbar { 
    background: #3B5998; 
    width: 100%; 
  
    color: #FFF; 
        margin: 10px 0; 
        padding: 0; 
        position: relative; 
        border-top:0px solid #960100; 
        height:35px;
}
#agnav { 
    margin: 0; 
    padding: 0; 
} 
#agnav ul { 
    float: left; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
#agnav li { 
    list-style: none; 
    margin: 0; 
    padding: 0;        
} 
#agnav li a, #agnav li a:link, #agnav li a:visited { 
    color: #FFF; 
    display: block; 
   font:bold 12px Helvetica, sans-serif; 
   margin: 0; 
    padding: 9px 12px 11px 12px; 
        text-decoration: none; 
        border-right:0px solid #627AAD;
} 
#agnav li a:hover, #agnav li a:active { 
    background: #627AAD; 
    color: #FFF; 
    display: block; 
    text-decoration: none; 
        margin: 0; 
    padding: 9px 12px 11px 12px;               
}
#agnav li { 
    float: left; 
    padding: 0; 
} 
#agnav li ul { 
    z-index: 9999; 
    position: absolute; 
    left: -999em; 
    height: auto; 
    width: 160px; 
    margin: 0; 
    padding: 0; 
} 
#agnav li ul a { 
    width: 140px; 
} 
#agnav li ul ul { 
    margin: -25px 0 0 161px; 
}
#agnav li:hover ul ul, #agnav li:hover ul ul ul, #agnav li.sfhover ul ul, #agnav li.sfhover ul ul ul { 
    left: -999em; 
} 
#agnav li:hover ul, #agnav li li:hover ul, #agnav li li li:hover ul, #agnav li.sfhover ul, #agnav li li.sfhover ul, #agnav li li li.sfhover ul { 
    left: auto; 
} 
#agnav li:hover, #agnav li.sfhover { 
    position: static; 
} 
#agnav li li a, #agnav li li a:link, #agnav li li a:visited { 
    background: #EDEFF4; 
    width: 120px; 
    color: #3B5998; 
    display: block; 
    font:normal 12px Helvetica, sans-serif; 
    margin: 1px 0 0 0; 
    padding: 9px 12px 10px 12px; 
        text-decoration: none; 
z-index:9999; 
border:1px solid #ddd;
-moz-border-radius:4px; 
-webkit-border-radius:4px;
   
} 
#agnav li li a:hover, #agnav li li a:active { 
    background: #627AAD; 
    color: #FFF; 
    display: block; 
   
}
#agnav li li li a, #agnav li li li a:link, #agnav li li li a:visited {
    background: #EDEFF4; 
    width: 120px; 
    color: #3B5998; 
    display: block; 
    font:normal 12px Helvetica, sans-serif; 
    padding: 9px 12px 10px 12px; 
        text-decoration: none; 
z-index:9999; 
border:1px solid #ddd; 
    margin: 1px 0 0  -14px;    
} 
#agnav li li li a:hover, #agnav li li li a:active { 
    background: #627AAD; 
    color: #FFF; 
    display: block; 
}
</style> 
<div id='agnavbar'> 
          <ul id='agnav'> 
            <li> 
              <a href='#'>Ana Sayfa</a> 
            </li> 
            <li> 
              <a href='#'>Hakkında</a> 
           </li>
     <li> 
              <a href='#'>İsim</a> 
            </li>
            <li> 
              <a href='#'>Gizlilik</a> 
            </li>    
        </ul></div>

4. Yukarıda verilen kodları eklediğinizde sidebar menü çubuğunuz aşağıdaki resim gibi görülecektir. Eklenti gadget’inizi footer kısmına sürükleyerek de kullanabilirsiniz.

Sidebar Menü çubuğunun yapılandırılması :

1. background: #3B5998; Renk kodunu istediğiniz bir Hex renk bulucu ile değiştirin.
2. Yukarıda verilen kodları dikey kaydırma yardımı ile aşağıya doğru indirin.
3. # : Mavi ile gösterilen yere, tırnak içine kullanmak istediğiniz link’inizi ekleyin.
4. >< : Bu sola ve sağa dönük kırmızı iki işaretin ortasına örnek: “>Ana Sayfa<” isim girin. Kodlara isim girilmiştir. Değiştirmek istediğinizde kullanın.
5. Herhangi bir etiketi silmek veya eklemek için etiket başlangıç ve bitiş kısmını silebilir veya ekleyebilirsiniz.
Örnek etiketimiz :

<li>
<a href='#'>İsim</a>
</li>

6. Menü çubuğu rengini değiştirerek farklı kullanabilirsiniz. Örnek : Pembe renkli menü çubuğu görselini inceleyin.

Menü çubuğu ile ilgili yapılan açıklamalarda problem yaşıyorsanız yorum yazarak yardım alabilir, temanızı daha fazla özelleştirmek için Tema tasarım ve Menü oluşturma konularını inceleyebilirsiniz.