Blogger, blogunuz için Mavi, Turuncu ve Pembe muhtelif arka plan renkleri ile blog tasarımınızı özelleştirebileceğiniz Menü Gezinme Çubuğu Eklentisi. Blog menü gezinme çubuğunda birçok farklı renkleri kullanabilirsiniz. Bu makalede sadece Mavi, Turuncu ve Pembe renk örnekleri verilmiş olup, aşağıda verilen linkten ayrıca birçok farklı renkleri de kullanabileceksiniz. Menü gezinme çubuğu blogunuz da yoksa kesinlikle kullanmanızı tavsiye ederim.
Adsense reklamları için de büyük önem taşıyan ve reklam onayı aşamasında red cevabı nedeni olan, Menü gezinme çubuğunu blogunuz için yapılandırın. İster farklı bir menü çubuğu kullanın isterseniz Blogger’un varsayılan menü gezinme çubuğunu kullanın. Ancak her iki seçenekte de kesinlikle bir menü gezinme çubuğunuz olsun.
Menü çubuğu bir süs görseli değil, okuyucularınızın aradıklarını bulmasına yarayan bir araç olduğunu unutmayın. Farklı tasarımlar ile hazırlanmış menü gezinme çubuğu için, menü bardaki Tema tasarım kategorisinin alt kategorisinde bulunan Menü oluştur isminden yararlanabilirsiniz.
Guney59 Paylaşım blog teması için tasarlanmış, ancak zaman içinde değişiklik yapabileceğim Menü Gezinme çubuğu gibi bir eklentiye sahip olmak için aşağıda anlatılanları takip ederek sadece HTML/JavaScript gadget içine eklemek sureti ile kullanabileceksiniz. İlgili adımları takip ederek başlayın.
Blogger Menü Gezinme Çubuğu Eklenti Uygulaması :
1. Blogger kumanda panelinize giriş yapın ve Yerleşim sekmesini açın.2. Aşağıda verilen kodları yapılandırmak için kopyalayın ve bir metin dosyasında veya Notepad metin editöründe açın. Kodların bozulmadan kullanılabilmesi için bir metin editörü kullanmayı alışkanlık haline getirin ve her zaman bu çalışmayı tekrarlayın. Bir metin editörünüz yoksa ücretsiz olarak dağıtımı yapılan ve son sürüm Notepad yazılımını kullanabilirsiniz.
→ Notepad V6.9 Metin Editörü Yeni Sürüm İndir
Blogger HTML/JavaScript gadget içine ekleyeceğiniz kodlar :
<style>
#agnavbar {
background: #0000ff;
width: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: #FFF;
margin: 12px 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 #E40000;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#agnav li a:hover, #agnav li a:active {
background: #E40000;
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: #D4D6DC;
width: 120px;
color: #01091B;
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: #E40000;
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: #01091B;
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: #E40000;
color: #FFF;
display: block;
}
</style>
<div id='agnavbar'>
<ul id='agnav'>
<li>
<a href='http://guney59.blogspot.com'>Ana Sayfa</a>
</li>
<li>
<a href='http://guney59.blogspot.com/search/label/Adsense'>Adsense</a>
</li>
<li>
<a href='#'>Dinamik Blog</a>
</li>
<li>
<a href='#'>Tema tasarım ▼</a>
<ul>
<li><a href='#'>Menü Oluştur</a></li>
<li><a href='#'>Sekmeli Widget</a></li>
<li><a href='#'>Devamını Oku ►</a>
<ul>
<li><a href='#'>Related Posts</a></li>
<li><a href='#'>Linkwithin</a></li>
<li><a href='#'>Hesap No</a></li>
</ul>
</li></ul>
<li>
<a href='#'>Web Araçları ▼</a>
<ul>
<li><a href='#'>Veri Araçları</a></li>
<li><a href='#'>Seo ►</a>
<ul>
<li><a href='#'>Alexa</a></li>
<li><a href='#'>Bing</a></li>
<li><a href='#'>Feedburner</a></li>
</ul>
</li></ul>
<li>
<a href='#'>Gmail-Inbox ▼</a>
<ul>
<li><a href='#'>Google Plus </a>
<li><a href='#'>Google Drive</a></li>
<li><a href='#'>List1</a></li>
<ul>
</ul>
</li></ul>
<li>
<a href='#'>Blogunu Kur</a>
</li>
<li>
<li><a href='#'>Google Sites</a></li>
</li>
<li>
<a href='#'>Forum</a>
</li>
<li>
<a href='#'>Bir Soru Sor</a>
</li>
<li>
<a href='#'>İletişim</a>
</li>
<li>
<a href='#'>Gizlilik</a>
</li>
<li>
<a href='#'>Hakkımda</a>
</li>
</li></li></li></ul>
</div>
3. Notepad, Metin editörüne kodları ekledi iseniz, çalışıp çalışmadığını denemek için tüm kodları kopyalayın. Yerleşim → Üst bilgi altına veya istediğiniz bir kısma eklemek için HTML/JavaScript
gadgetini açarak yapıştırın. Şimdi blogunuzu kontrol edin.
4. Menü çubuğunda bulunan Tema tasarım ismi üzerine mausu getirin. Aşağıya doğru mausu gezdirin ve kontrol edin. Aşağıya ve Yana açılan menüler görülüyor mu?
5. Her şey yolunda ise ve menüler görülüyorsa diğer yapılandırma işlemine geçebiliriz. "Alt ve yan menüler çıkmıyor ise şu adımları uygulayın."
Tema tasarım üzerinde menü açılım testi
/* Tabs
7. Yukarıdaki etiketi bulduğunuzda, Tabs içinde bulunan kodları kopyalayın ve metin dosyasında açacağınız yeni sayfaya kaydedin. Sayfayı da bilgisayarınızda bir klasör oluşturarak saklayın. Yarın bir gün fikir değiştirip Blogger varsayılan menü çubuğunu kullanmak istediğinizde elinizde bu kodları tekrar aynı yere ekleyerek kullanabilirsiniz. NOT: Bazı temalarda özel yapılandırma menü çubuğu çalışıyor. Ancak bazılarında çalışmıyor. Bu işlemi bu nedenle yapıyoruz. Kopyalamanız gereken kod alan sınırları aşağıdaki resimde renkli olarak gösterilmiştir. İnceleyin.
Tabs etiketinde kopyalanacak kod kümesi
Blogger Görülmeyen Açılır Menü için bu kodları ekleyin :
.tabs .widget ul, .tabs .widget ul {
margin: 0px;
padding: 0px;
list-style: none outside none;
overflow: visible;
}
.tabs-outer {
background: 0 ;
}
8. Yayıncı Blogger arkadaşlar, blogunuza kod eklemekten korkmayın. 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 almış olduğunuz blog yedeğin geri yüklediğinizde eski blog temanıza geri dönersiniz.
Bir blog sahibi ve yöneticisi iseniz, 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
Blogger Menü gezinme çubuğuna eklediğiniz kodların özelleştirilmesi :
1. Eklediğiniz kodlar için çok fazla yapacağınız bir işlem yoktur.2. background: Kod içinde mavi ile belirtilen, #0000ff, menü çubuğunun arka mavi rengini değiştirmek içindir.
Mavi için : #0000ff
Turuncu için : #ff8000
Pembe için : #ff00bf, renkleri kullanabilirsiniz.
Farklı renkler kullanmak için, buradan giriş yapın ve istediğiniz renk kodunu seçerek kullanın.
Menü çubuğu renk kod seçiçileri
Menü için linklerin yapılandırılması :
1. Metin editörüne eklediğiniz kodları açın ve alt kısma doğru inin. Kod içinde;2. Kırmızı ile belirtilen linki kendi linkiniz ile değiştirin. Hemen yan taraf ise linkinizin ne olduğunı açıklayan etiket ismi bulunmaktadır. Özellikle bu kısımlara kendi linkimi eklediğim. Siz bu link ve etiket isimlerini kendi blog link ve etiketlerinize göre değişin. Örnek ;
<a href='http://guney59.blogspot.com'>Ana Sayfa</a>
<a href='http://guney59.blogspot.com/search/label/Adsense'>Adsense</a>
3. # : Bu işaretin olduğu diğer yerlere linklerinizi ekleyeceksiniz. (#), diyez işaretini seçin linkinizi yapıştırın.
4. ▼ : Bu işaretin olduğu yerdeki linki değiştirmeden de kullanabilirsiniz. Örneğin, Kategoriler yazarsınız, bir yer belirleyici olabilir. Örnek;
<a href='#'>Kategoriler ▼</a>
5. Yukarıda anlatılan şekilde diğer link ve etiketlerinizi yapılandırın.
6. Menü gezinme çubuğu ile bir alt kısımda bulunan yazılarınız arasındaki boşluğu sıfır düzeyde yapmak isteyebilirsiniz. Yani arada hiçbir boşluk kalmadan kullanmak istenildiğinde verilen kod içindeki “üst kısımda” etiketin değerini (12) sıfır veya 3 px yapabilirsiniz. Etiketimiz;
margin: 12px 0;
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.
0 yorum