Blogger Blogunuza Yatay Menü Ekleyin

Bir blogda konular arası geçiş, aranılan konulara kolay erişebilirlik önemlidir. Ziyaretçiler bir konudan diğerine kolaylıkla geçebilmeyi tercih eder. Sizler de ziyaretçilerinize bu kolaylığı sağlamak isterseniz Blogunuzun “Başlık Alanı” (Header) altına konumlandırılabilecek bir menü yapabilirsiniz. Daha önce bu yönde kullanıcılara kolaylık sağlamsı adına "Blog Sayfasının Soluna Hareketli Menü Yapmayı " anlatmıştım. Bu menülerle en çok ziyaret edilmesini istediğiniz linkleri paylaşabileceğiniz gibi, kişisel bilgileriniz için hakkınızda alanı, arşiv alanı, iletişim alanı, vb. alanlar için gerekli linkleri paylaşabilirsiniz.

Bunun için yapmanız gerekenler şunlar;

Adım 1: Blogger'a kullanıcı adınız ve şifrenizle giriş yapın ve temanızın bir yedeğini alın.

Adım 2: Yerleşim > HTML'yi Düzenle > Widget Şablonlarını Genişlet' e tıklayın. Ve "Ctrl+F" yardımı ile aşağıdaki kodu aratın;

</b:skin>

Bulmuş olduğunuz bu kodun hemen üstüne alttaki CSS kodlarını yapıştırın;

/* ----- LINKBAR ----- */
#linkbar {
margin: 6px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 100%;
position: relative;
background: #000;
border: 1px solid #000;
border-bottom: 0;
}

#linkbar ul {
margin: 0px 0px 0px 0px;
padding: 5px 5px 7px 5px;
text-align: left;
list-style-type:none;
}

#linkbar li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#linkbar h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: none;
visibility: hidden;
}

#linkbar a {
clear: both;
margin: 0px -4px 0px 0px;
padding: 3px 20px 3px 20px;
width:100%;
text-decoration:none;
font-family: arial, sans-serif;
font-weight: bold;
font-size: 12px;
color: #fff;
border-right: 1px solid #fff;
}

#linkbar a:hover {
color: #000;
background: #fff;
}

Adım 3: CTRL+F tuşları yardımı ile alttaki kodu bulun;

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Başlık Alanı (Header)' type='Header'/>
</b:section>
</div>

Not: Başlık Alanınızda daha önce anlattığım "Blogger Header yerine Gadget Eklemek" veya daha farklı bir değişiklik yaptıysanız dikkat etmeniz gereken nokta şu; yukarıda bulmanız gereken kodun ilk satırını bulun ve yukarıdaki kodla birebir olmayan kısımları pek önemsemeden son iki satırı bulun. Ve onların altına alttaki kodu yapıştırın. Bu noktaları referans alırsanız herhangi bir karmaşa yaşanmayacaktır.

Yukarıda bulmuş olduğunuz bu kodun hemen altına alttaki kodları yapıştırın;

<div id='linkbar-wrapper'>
<b:section class='linkbar' id='linkbar' showaddelement='no'>
<b:widget id='LinkList99' locked='true' title='Linkbar' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>

</div>
</b:includable>
</b:widget>
</b:section>
</div>

Adım 4: Blogunuzu görüntüleyin ve eğer herhangi bir sorun olmadan görüntüleniyorsa temanızı kaydedin.

Adım 5: Sayfa Öğelerine tıklayın. Açılan sayfada Başlık Alanınızın altında artık bir Linkbar görüntülenecek. Linkbar’ın hemen altında yer alan Düzenle kısmına tıklayın.



Açılan pencerede linkleri eklemenin aynı bloggerın Bağlantı Listesi oluşturmamız için kullanıma sunduğu özellikle yanı olduğunu göreceksiniz. Alttaki örnek görüntüden de görebilirsiniz;



Web adreslerini yazdıktan sonra sayfanızı görüntüleyin. Blogunuzun artık bir menüsü var. Yazının uzun olması gözünüzü korkutmasın (sadece eklenecek kodlar biraz uzun) adım adım yapılması gerekenleri yaptığınız taktirde herhangi bir sorunla karşılaşmadan 5 adım ile kısa sürede yapabilirsiniz. Umarım faydalı ve yeteri kadar açıklayıcı bir yazı olmuştur.

Blogunuzda nasıl görüneceğine dair örnek resimler;


Menülerin üzerine mouse yardımı ile gelindiğinde hover efekti devreye girer;


Kolay gelsin...

Benzer Yazılar;
Alt Kategorili Menü
Sidebar'ınızı Menü ile Şenlendirin
Hareketli Menü
Multi Açılır Menü
Gizli yazı imkanı
Tabbed Menu