Blogunuzda yer alan kategorileri gösteren yatay menülerin biçimi okuyucularınız tarafından göze çarpan ilk alan olduğu için tasarımı büyük önem taşıyor.Bu kısım için aşağı açılır menü kullanabileceğiniz gibi tek sıra bir düzen de tercih edebilirsiniz.Bu noktada alternatifinizin çok.O yüzden size yeni bir alternatif oluşturmak adına renkli blogger üst yatay menü ekleme konusunda yazı hazırladım.Bu menüyü header kısmında kullanabileceğiniz gibi footer gibi farklı alanlarda da tercih edebilirsiniz.
Ben dosyayı direkt html olarak düzenledim.Siz kodları html/Gadget ekle kısmından ekleyebileceğiniz gibi şablon düzenleyicisi menüsünden de ekleyebilirsiniz.
Renkli Yatay Menü Nasıl Oluşturulur ?
Aşağıda html kodlarını bulabilirsiniz.Bu kodları yerleşim>>html gadget ekle kısmına ekleyebilirsiniz.
<style>
#multicolor-bar {
background: #000;
width: 100%;
color: #FFF;
margin: 10px 0;
padding: 0;
position: relative;
border-top:0px solid #0099FF;
height:35px;}
#multicolor-nav {
margin: 0;
padding: 0;
}
#multicolor-nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#multicolor-nav li {
list-style: none;
margin: 10px;
padding: 0;
}
#multicolor-nav li a, #multicolor-nav li a:link, #multicolor-nav li a:visited {
color: #FFF;
display: block;
font:bold 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 11px 12px;
text-decoration: none;}
#multicolor-nav li a:hover, #multicolor-nav li a:active {
background: #ee7d07;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 11px 12px;
}#multicolor-nav li {
float: left;
padding: 0;
}
.color-1
{
background:#0b5394;
}.color-4
{
background:#990000;
}.color-5
{
background:#d6253a;
}.color-7
{
background:#274e13;
}.color-11
{
background:#b45f06;
}.color-14
{
background:#741b47;
}</style>
<div id='multicolor-bar'>
<ul id='multicolor-nav'>
<li class="color-1"><a href='#'>Home</a></li>
<li class="color-4"><a href='#'>Link 1</a></li>
<li class="color-5"><a href='#'>Link 2</a></li>
<li class="color-7"><a href='#'>Link 3</a></li>
<li class="color-11"><a href='#'>Link 4</a></li>
<li class="color-14"><a href='#'>Link 5</a></li>
</ul></div>
Html menu kodları bunlar.Renkli kısımları kendi isteğinize göre düzenleyebilirsiniz.Size tavsiyem herhangi bir html editörü yardımıyla kodları kendinize göre düzenleyin ve en son halini blogunuza yerleştirin.Zaten kodların mantığını çözmüşsünüzdür.Color kısmına hangi renk kodu girerseniz yazınız o renk kodundaki arkaplanda yer alacak.Blogger üst yatay menü için paylaştığım farklı bir alternatif umarım hoşunuza gitmiştir.Takıldığınız bir yer olursa yorum bölümünde sorabilirsiniz.
Güzel bir eklentiymiş , paylaşım için teşekkürler
YanıtlayınSilTeşekkürler, peki örnek olarak menüye koyduğumuz HAKKIMDA kısmına tıklandığında hakkımızdaki detayların görünmesini nasıl sağlayabiliriz?
YanıtlayınSilSaygı ve selamlar.
çok güzel.bu menüye açılır alt menü nasıl eklenir
YanıtlayınSilhttp://gokhantezcan.blogspot.com/
YanıtlayınSilLinklerin arkasındaki siyah renkteki şeyi nasıl kaldıracam.Yazıları nasıl ekleyecem bu linklere ve blogta nasıl ortalayacam.
Online htlm editrlerine giriş yaparak kodlarda oynayabilirsiniz. Anında ön izlemeyle değişikliklerinizi görebilirsiniz.
Silteşekkürler
YanıtlayınSilhttp://www.yuklex.blogspot.com.tr
merhaba aynısını bende yaptım fakat tıklatıldığında açılmıyor bunu bana daha net anlatırmısnız lütfen
YanıtlayınSilMerhaba! Kodu doğru uyguladığınıza emin misiniz? Farklı tarayıcılardan kontrol etme şansınız oldu mu?
Silgüzel site.
YanıtlayınSilÇok beğendim sağolun.
YanıtlayınSil