27 Ekim 2013 Pazar
Öncelikle küçük bir açıklama yapmakta fayda görüyorum. Kodların sahibi Bilgisayar mühendisi olan +Mohammad Mustafa Ahmedzai Blogger konusunda kendini çok geliştirmiş saygın bir arkadaşımız. Kendisine ayrıca çok teşekkür ediyor başarılar diliyorum. Mohammad arkadaşımızın, birçok konuda Blogger yazılarından istifade ediyor, bilgi sahibi oluyorum. Sizlerde saygınlık kazanmış Blogger yazarlarını takip edip bilgilerinizi tazeleyip geliştirin. Genelde takip ettiğim Blogger yazarlarının çoğu yabancı uyruklu kibirli olmayan saygınlıklarını koruyan insanlardan oluşmaktadır.
Şimdi açılır menü kategorimizi nasıl yapacağız adım adım bakalım. Kodları blog’larınıza eklediğinizde manuel ayarlar yapabildiğiniz gibi Blogger’un özelleştirme seçeneklerini de kullanarak menünün arka plan renklerini, sekme renklerini, yazı renklerini değiştirme şansına sahipsiniz. Bu yazıyı yazmamdaki en büyük etken, yeni blog'cuların açılır menü oluşturarak bloglarını güzelleştirmeleri ve bloglarını severek yazılarına devam etmeleridir.
Açılır Menü nasıl oluşturulur ?
1. Blogger → Yerleşim → HTML/JavaScript Gadget’ini açın ve aşağıdaki kodu yapıştırın.
<div id='mbtnavbar'>
<ul id='mbtnav'>
<li>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>About</a>
</li>
<li>
<a href='#'>Contact</a>
</li>
<li>
<a href='#'>Sitemap</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></li>
</ul>
</li>
</ul>
</div>
⇒ Sarı renk ile vurgulanan kod açılır menü’i belirlemektedir.
⇒ <li> ile başlayan ve </li> ile biten kodu kopyalayıp altına yapıştırarak ikinci bir menü yapabilir/çoğaltabilirsiniz.
⇒ <ul> ile başlayan ve </ul> ile biten kod açılır menüdür. Kodu kopyalayıp ikinci bir açılır menü ekleyebilirsiniz.
<li>
<a href='#'>Home</a>
</li>4. Blog şablon → HTML Düzenle açın ve aşağıdaki kod bulun (Ctrl+F)
]]></b:skin>6. Şablon kullanmadan CSS kodunu farklı bir şekildede kullanabiliriz.
→ Şablon → Özelleştir → Gelişmiş → CSS ekle yolunu takip edin ve kodu yapıştırdıktan sonra } bu işaretten sonra enterleyin. Blog’u kaydedin. Her iki şekilde de aynı işlemi yapmış olursunuz.
/*----- MBT Drop Down Menu ----*/
#mbtnavbar {
background: #060505;
width: 960px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
#mbtnav {
margin: 0;
padding: 0;
}
#mbtnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #333;
border-right:1px solid #333;
height:35px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#mbtnav li a:hover, #mbtnav li a:active {
background: #BF0100;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#mbtnav li {
float: left;
padding: 0;
}
#mbtnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#mbtnav li ul a {
width: 140px;
}
#mbtnav li ul ul {
margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #BF0100;
width: 120px;
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}
#mbtnav li li a:hover, #mbtnavli li a:active {
background: #060505;
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
⇒ #060505 Kodu Ana menü arka plan rengi değişimi için
⇒ Yazı tipi renk, boyut ailesini değiştirmek için sarı vurgular
⇒ # BF0100 Fare ile sekme üzerine gelince arka plan değişimi için
⇒ # BF0100 Açılır menü arka plan rengini değiştirmek için
⇒ #060505 Fare üzerine gelince açılır arka plan rengi değişimi için
Son işlemi yaptık.Ancak bu işin bir kısmını sekme biçimleme kısmından da yapabilirsiniz.Kaynak : mybloggertricks
Kendi Blog açılır menü’nü ücretsiz proğramla yapmayı düşünür müsünüz ?
Blogger Menü Oluşturucu - Ücretsiz Türkçe İndir
