19 Ocak 2018 Cuma

Blogger Üst Menü Ekleme 2018

Blogger Üst Menü Ekleme


Blogger Üst Kategori 

Blogger'a üst menü yada kategori ekleme, uzun zamandır anlatmak istediğim fakat fırsatını bulup bir türlü anlatamadığım bir konuydu.

Daha önce anlattığım yöntemlerde olduğu gibi Blogger'a Üst Menü Ekleme olayını da olabildiğince basit bir şekilde anlatacağım.

Örnek üst kategorileri tarih sayfam olan Tarih Durağı sitesindeki gibi yapacağım. Siteye girip bakarsanız üst menü kısmında 3 tane kategori bulunuyor ve tıkladığınız kısım sizi o sekmeye götürüyor. Ben sekme olarak link verdim eğer siz isterseniz oraya istediğiniz bir sayfanın adresini yazabilirsiniz. Yani " World War 1" başlığına tıkladığımda o sekmede olmasını istediğim başlıklar var.

Öncelikle yapmamız gereken : Yerleşim > Gadget Ekle > HTML/JavaScript yollarına takip etmek. Karşımıza aşağıdaki gibi bir ekran çıkacak.

Blogger Üst Menü Ekleme-2

Şimdi bu ekranda Başlık kısmını boş bırakıyoruz ve İçerik kısmına aşağıdaki kodu kopyalıp yapıştırıyoruz.


<div id='gpnavbar'> 
      <ul id='gpnav'> 
 <li> 
           <a href='http://www.tarihduragi.com/search/label/Resmin%20Hikayesi' target='_blank'>RESMİN HİKAYESİ</a>
           
        </li>

        <li> 
          <a href='http://www.tarihduragi.com/search/label/Osmanl%C4%B1%20Foto%C4%9Fraflar%C4%B1' target='_blank'>OSMANLI FOTOĞRAFLARI</a> 
<ul> 
                <li><a href='http://www.tarihduragi.com/search/label/Abdullah%20Freres'>Abdullah Freres</a></li> 
<li><a href='http://www.tarihduragi.com/search/label/Mihran%20Iranian'>Mihran Iranian</a></li> 
                <li><a href='http://www.tarihduragi.com/search/label/James%20Robertson'>James Robertson</a></li> 
                <li><a href='http://www.tarihduragi.com/search/label/Sebah%20%26%20Joaillier'>Sébah & Joaillier</a></li> 
              </ul> 
            
        </li> 
           <li> 
           <a href='http://www.tarihduragi.com/search/label/Osmanl%C4%B1%20Padi%C5%9Fah%20T%C3%BCrbeleri' target='_blank'>OSMANLI PADİŞAH TÜRBELERİ</a>
           
        </li>
<li> 
           <a href='http://www.tarihduragi.com/search/label/Tarihte%20Bug%C3%BCn' target='_blank'>TARİHTE BUGÜN</a>
           
        </li>
      </ul> 
    </div>



Blogger Üst kategori


Düzenleme işlemine geçmeden önce eklediğimiz Gadget'in üzerine basılı tutarak yukarıdaki resimde gösterdiğim yere sürüklüyoruz.

Bu kod Tarih Durağı sitesinde orta sıradaki kategoriler için düzenlenmiş. Yani "Resmin Hikayesi" ve "Osmanlı Fotoğrafları" menüsünün olduğu kısım. Gördüğünüz gibi "Osmanlı Fotoğrafları" kısmına geldiğinizde aşağı doğru alt sekmeler açılıyor.

Aşağıdaki yönlendirmeler ve bilgiler benim siteme ait olduğu için siz kendi sitenize ait bilgileri yazacaksınız. Onu da nasıl yapacağımızı basit şekliyle anlatmaya çalışayım...

Çok fazla detaya girmeden şu bilgiyi vermek istiyorum. Sekmeler kısmındaki her kısım <li>  ile başlıyor ve </li> ile bitiyor. Yani benim yazdığım koddaki aşağıdaki kısmı sizin değiştirmeniz gerekiyor.

<a href='http://www.tarihduragi.com/search/label/Resmin%20Hikayesi' target='_blank'>RESMİN HİKAYESİ</a>

http ile başlayan yere ziyaretçinizin gitmesini istediğiniz adresi yazıyorsunuz. RESMİN HİKAYESİ yazan yerede sekmenin ismini yazıyorsunuz. Yani siz oraya http://www.facebook.com target='blank'>FACEBOOK</a> yazarsanız ziyaretçiniz orayı tıkladığında Facebook sayfasına gider.

target='_blank' kodu sekmeye tıklandığında yeni pencerede açılmasını sağlıyor. Eğer bunu silerseniz yeni bir pencere açmadan link açılır.

Kopyaladığımız kodun en başındaki;

<div id='gpnavbar'> 
      <ul id='gpnav'> 

ve en sonundaki ;
 </ul> 
    </div>

kısımlarını asla değiştirmiyoruz. Tüm değişiklikleri aradaki verilerde yapacaksınız.

Daha basit bir örnek vereyim... Kodu aşağıdaki gibi yazdığımda Ana sayfamın üst kısımda AKRABA KRALLAR diye bir sekme olacak ve tıklandığında Akraba Krallar sayfasına gidecek.


<div id='gpnavbar'> 
      <ul id='gpnav'> 

<a href='https://www.tarihduragi.com/2017/09/akraba-krallar-ve-dunya-savasi.html' target='_blank'>AKRABA KRALLAR</a>

 </ul> 
    </div>


Eğer Akraba Krallar sekmesinin üzerine geldiğimizde alt sekmeler çıkmasını istiyorsak  kodu aşağıdaki gibi yağacağız :

<div id='gpnavbar'> 
      <ul id='gpnav'> 

<a href='https://www.tarihduragi.com/2017/09/akraba-krallar-ve-dunya-savasi.html' target='_blank'>AKRABA KRALLAR</a>

<ul> 
                <li><a href='BURAYA İSTEDİĞİNİZ ALT SEKME LİNKİ'>BURAYA SEKME İSMİ </a></li> 

              </ul> 
 </ul> 
    </div>


Alt sekmeleri <ul>  ve </ul>  arasına yazıyoruz. Eğer iki tane alt sekme yapmak istiyorsak:

<div id='gpnavbar'> 
      <ul id='gpnav'> 

<a href='https://www.tarihduragi.com/2017/09/akraba-krallar-ve-dunya-savasi.html' target='_blank'>AKRABA KRALLAR</a>

<ul> 
                <li><a href='BURAYA İSTEDİĞİNİZ ALT SEKME LİNKİ'>BURAYA SEKME İSMİ </a></li> 
     <li><a href='BURAYA İSTEDİĞİNİZ ALT SEKME LİNKİ'>BURAYA SEKME İSMİ </a></li> 

              </ul> 
 </ul> 
    </div>

Anlamadığınız yada yapamadığınız yer olursa yorum yazabilir yada benimle iletişime geçebilirsiniz.

0 yorum: