Blogger Contempo Turuncu Teması İçin Üç Kategorili Menü Çubuğu

Blogger’un yeni Turuncu renkli teması Contempo için tasarlanmış menü gezinme çubuğunda üç adet Kategori sekmesi ve yana açılan menüle...

...

Üç Kategori seçenekli Menü Çubuğu Eklentisi

Blogger’un yeni Turuncu renkli teması Contempo için tasarlanmış menü gezinme çubuğunda üç adet Kategori sekmesi ve yana açılan menülerden oluşan Menu Gezinme Çubuğu eklentisi. 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 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.

Yeni Menü Gezinme çubuğunu yeni Açtığım test blogunda kontrol ettiğimde Menü açılır menülerin halen açılmadığını gördüm. Çok uzun zaman oldu. Blogger geliştiricilerin bu kodlamayı düzelteceğini düşünüyordum. 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.

Kodlar:

<style> 
#agnavbar { 
    background: #D45C00; 
    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='#'>İletişim</a> 
            </li> 
      <li> 
               <a href='#'>Kategoriler ▼</a>
                <ul> 
                    <li><a href='#'>Sub Page #1</a></li> 
                    <li><a href='#'>Sub Page #2</a></li> 
                    <li><a href='#'>Sub Page #3</a> 
                   <ul> 
                    <li><a href='#'>Sub Sub Page #1</a></li> 
                    <li><a href='#'>Sub Sub Page #2</a></li> 
                    <li><a href='#'>Sub Sub Page #3</a></li> 
                  </ul>
             
</li></ul>
      <li> 
               <a href='#'>Kategoriler ▼</a>
                <ul> 
                    <li><a href='#'>Sub Page #1</a></li> 
                    <li><a href='#'>Sub Page #2</a></li> 
                    <li><a href='#'>Sub Page #3</a> 
                   <ul> 
                    <li><a href='#'>Sub Sub Page #1</a></li> 
                    <li><a href='#'>Sub Sub Page #2</a></li> 
                    <li><a href='#'>Sub Sub Page #3</a></li> 
                  </ul>
             
</li></ul>
<li> 
               <a href='#'>Kategoriler ▼</a>
                <ul> 
                    <li><a href='#'>Sub Page #1</a></li> 
                    <li><a href='#'>Sub Page #2</a></li> 
                    <li><a href='#'>Sub Page #3</a> 
                   <ul> 
                    <li><a href='#'>Sub Sub Page #1</a></li> 
                    <li><a href='#'>Sub Sub Page #2</a></li> 
                    <li><a href='#'>Sub Sub Page #3</a></li> 
                  </ul>
             
</li></ul>  
<li> 
             <a href='#'>Sayfa Ekle</a>  
              </li>
            </li>
          </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: #D45C00 menü çubuğunun arka mavi rengini değiştirmek içindir.

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

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

5. Sub Page #1 : ilk açılan menülerdir. Etiket ismi buraya yazılır.

6. Sub Sub Page #1 : Açılır ismin yan açılır sekmesidir. Diğer etiket ismi buraya yazılır.

7. Satır linki olan ( <li><a href='#'>Sub Page #1</a></li ) kalıbı kopyalayıp bir alt satıra yapıştırarak çoğaltabilirsiniz.

8. Ana sayfa gibi farklı bir isimde kategori açmak için böyle bir kalıbı kopyalayın ve hemen alt satıra yapıştırarak isimleri ve linki değiştirdiğinizde yeni bir menü sekmesi yaratmış olursunuz.
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 alt kısmındaki menü sekmesine bakabilirsiniz. DEMO