Blogger Dikey Ve Yatay Üç Kategorili Açılır Menü Gezinme Çubuğu Eklentisi

Blogger Başlık Üst Bilgi altı, Sidebar Kenar Çubuğu ve Footer Alt bilgi bölümlerinde mobil görünümü bozmadan etiketlerinizden Katego...

...

Blogger Başlık Üst Bilgi altı, Sidebar Kenar Çubuğu ve Footer Alt bilgi bölümlerinde mobil görünümü bozmadan etiketlerinizden Kategori oluşturup kullanabileceğiniz Dikey Yatay Açılabilen Üç Kategori seçenekli Yeni Menü Çubuğu Eklentisi.

yeni menü gezinme çubuğunda alt alta açılabilen üç adet Kategori sekmesi ve yana açılan menülerden oluuyor. Sidebar kenar cuğunda görebilirsiniz. DEMO

Blogger’un yeni Turuncu renkli Contempo temasını yeni blog açmak isteyen veya blog temasını değiştirmek isteyen yazar arkadaşlar için öneririm. Oldukça kullanışlı ve mobil görünümü de oldukça güzel tasarlanmış.

Menu Gezinme Çubuğu sekmesinde bulunan her bir Kategori 3 + 3 Adet sayfadan oluşuyor. Her Kategori sekmesinin Üçüncü Alt Menü Sayfası da yana açılan üç adet kategoriden oluşarak oldukça zengin bir görünüm sergilemiş oluyor.

Benim gibi çok fazla etiketlerden Kategori ile anlatım yapanlar için kaçırılmaması gereken bir eklenti.

Dikey ( Vertical ) ve Yatay ( Horizontal ) görünüme sahip menü çubuğunu yerleşim panelinde gadget olarak ekleyerek açılır menü sekmesi olarak kullanabilirsiniz.

Ancak ne yazık ki halen düzeltmemişler. Yeni temalarda sorun olmayan, ancak Eski temalarda sorun yaratan açılır menü çubuğu eklentisini kullanabilmeniz için şablon kodlarına küçük bir kod daha ekleyeceğiz.

Blogger’un varsayılan şablonlarında açılır menü yapılandırmasını yapılandıracak kodlar maalesef halen Blogger tasarımcıları tarafından yapılmadığından böyle yamalar ile idare edeceğiz.

Yama işimize devam ederek bugün dikey ve yatay Açılır Menü Oluşturmayı aşağıda takip ederek kurulum aşamasına geçebilirsiniz.

Blogger için açılır menü sekmesinin kurulum aşamaları :

1. Blogger kumanda paneline giriş yapın.

2. Kumanda panelinde yerleşim, gadget ekle sekmesini açın, Html/javaScript gadget’i açın.

3. Aşağıda verilen kodları gadget içine ekleyin ve kaydedin.

4. Eklediğiniz gadget’i blog kayıtları yerleşiminin üst kısmına sürükleyerek konumlandırın.

Html ve Css kodları hepsi bir aradadır. Sadece gadget içine kodları yapıştırın. Dikey çubuğu kaydırarak renkli yerleri inceleyin.

Kodlar:

<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='#'>Kategoriler ▼</a>
                <ul> 
                    
                    <li><a href='#'>Ustmenu1</a> 
                   <ul> 
                    <li><a href='#'>Yanmenu1</a></li> 
                    <li><a href='#'>Yanmenu2</a></li> 
                    <li><a href='#'>Yanmenu3</a></li> 
                  </ul>
      <li><a href='#'>Ustmenu2</a> 
                   <ul> 
                    <li><a href='#'>Yanmenu1</a></li> 
                    <li><a href='#'>Yanmenu2</a></li> 
                    <li><a href='#'>Yanmenu3</a></li> 
                  </ul>
      <li><a href='#'>Ustmenu3</a> 
                   <ul> 
                    <li><a href='#'>Yanmenu1</a></li> 
                    <li><a href='#'>Yanmenu2</a></li> 
                    <li><a href='#'>Yanmenu3</a></li> 
                  </ul>
             
</li></li></li></ul>          
        </li></ul></div>

Açılır menü çubuğunun açılır olması için ekleyeceğimiz Css Yama kodları :

1. Blogger şablon kodlarını açın ve aşağıdaki etiketi Ctrl+F kısayol yardımı ile aratarak bulun.

/* Tabs

2. Bulduğunuz yukarıdaki etiketin hemen altındaki kod bitimine aşağıdaki Css kodlarını ekleyip blog’u kaydedin. Bu kodlar Blogger menü çubuğunu açılır konuma getiren yama kodlarıdır.

Eklenecek Kodlar:

.tabs .widget ul, .tabs .widget ul {
margin: 0px;
padding: 0px;
list-style: none outside none;
overflow: visible;
}
.tabs-outer {
background: 0 ;
}

3. Css kodlarının ekleneceği kısmı tam anlayabilmeniz için aşağıdaki resmi inceleyin.

Açılır menü çubuğunun açılır olması için ekleyeceğimiz Css Yama kodları :

4. Resime dikkat ederseniz, “/* Columns” ismini göreceksiniz. Tabs, etiketinin içindeki kodların bittiği yerde böyle bir isim olacak. Bu isim blog şablonlarına göre değişebilir. Ancak Tabs kodlarının başladığı ve bittiği son kısmı resimde gösterdim. Gösterdiğim alt kısımda bulunan etiketin hemen üs kısmında bir boşluk yaratın ve kodları ekleyin.

Yayıncı Blogger arkadaşlar. Kodlardan çekinmeyin. Hiçbir kod bilginiz olmasa bile Blog’unuzun yedeğini nasıl alacağını bilmeniz tüm sorunlarınızı çözer. Tüm kodları yanlış ekleseniz bile aldığınız yedeği geri yüklediğinizde eski blogger konumunuza dönersiniz.

Artık kodlar ile oynamak durumunda olduğunuzu hatırlatmak isterim. Blog’a sadece yazı yazmak blogcu olmak demek değildir. Araştırma ve kendinizi zaman buldukca geliştirmeniz gerekir. Hiç zamanım yok demeyin! Damlaya damlaya göl olur unutmayın.

Ayrıca bilgi edinin ⇒ Blogger yedekleme nasıl yapılır

Gadget içine eklediğiniz kodların özelleştirilmesi :

1. Eklediğiniz kodlar için çok fazla yapacağınız bir işlem yoktur.

2. background: #3B5998 menü çubuğunun arka plan rengini değiştirmek içindir.

3. # : Bu işaretin olduğu yerlere linklerinizi ekleyeceksiniz.

4. Diğer açıklama kısımları belirtilerek renklendirilmiştir.

# : Diyez, Hastag, bu işaretli yerlere etiket linkini girin. NOT: Kategori yazan yerdeki # bu işarete bir giriş linki eklemeyin.

5. Ustmenu1: Etiket ismini buraya yazın.

6. Yanmenu1 : Etiket ismini buraya yazın. Diğerlerinide aynı şekilde yazın.

7. Ana sayfa gibi bir sekme başlığı açmak için böyle bir kalıp alt kod satırında kullanılabilir. böylece bir bir menü sekmesi yaratmış olursunuz.

Menü Sekmesi için Kullanılabilir Kalıp :

<li>
<a href='#'>Ana Sayfa</a>
</li>

Yukarıda anlatılan konular ile ilgili sorun yaşarsanız yorumlar bu amaçla yapılmıştır. Yardım alabilirsiniz. Başarı dileklerimle, kolay gelsin. Demo görmek isterseniz sayfanın kenar çubuğunda inceleyebilirsiniz. DEMO