Dikey ve Yatay Facebook Stili Açılır Menü Oluşturun

Blog’unuz için, Facebook mavisi renk stil’i görünümde dikey ( vertical ) ve yatay ( horizontal ) görünüme sahip menü çubuğunu yerleşim pan...

...

Blog’unuz için, Facebook mavisi renk stil’i görünümde 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. 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. Blogger şablon kodlarında menü sekmesi tek satır olarak yapılandırılmış ve bu kodlar da Blogger için Google sunucularında barındırılmaktadır. Bu kodlara müdehale etme şansımız olmadığından terzi yaması gibi kod üreterek blog şablonumuzu yamayıp kullanıyoruz. 

Bu arada belki bir Blogger geliştirici veya tasarımcısı bu yazıyı okurda utanarak bu işe bir el atar düşüncesi ile devamlı yazıyorum. Yama işimize devam ederek bugün dikey ve yatay Facebook mavi stil ile Açılır Menü Oluşturmayı nasıl yapacağımızı aşağıda takip ederek kurulum aşamasına geçebilirsiniz. Arzu ettiğiniz bir format ile menü sekmesini dilediğiniz gibi özelleştirebilirsiniz.

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’ini 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.

<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='#'>İ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>
          </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.

.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.

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 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