Blogger'de kullanabileceğiniz yatay menü eklentisinde diğer menülerden farkı üst menü başlıklarına tıklandığında alt menü seçenekleri aşağı doğru değil de yan yana sıralı olarak oluşuyor.Her menü başlığına ait 5 ayrı menüsü vardır.
1- Blogger'e giriş yapın.
2- Kumanda Paneli > Şablon > HTML Düzenle yolunu takip edin.
3- CTRL+F kısa yol tuş kombinasyonu ile </b:skin> kodunu aradın.
4- Bulduğunuz </b:skin> kodunun hemen üst kısmına aşağıdaki CSS kodları ekleyin.
/*Blogger Kendine Özgü Yatay Navigasyonlu Menü from
http://etralibela-61.blogspot.com*/
.nav {
height:35px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqoJ5zxdHuJ9kXih26yygRPRtT4P79SrLIyK-niGXReT7-jGmRnIzZxLmdo5nIHly25gpHFuvGA5pC_9PlVthWTTTcyfHHny97ojhwfSn0ZzMWAdRTUBOAvBpLT88xZ3Ox0_sz9JaFLui-/s1600/bg.gif) repeat-x;
position:relative;
font-family:arial, verdana, sans-serif;
font-size:11px;
width:100%;
z-index:100;
margin:0;
padding:0;
}
.nav .table {
display:table;
margin:0 auto;
}
.nav .select,
.nav .current {
margin:0;
padding:0;
list-style:none;
display:table-cell;
white-space:nowrap;
}
.nav li {
margin:0;
padding:0;
height:auto;
float:left;
}
.nav .select a {
display:block;
height:35px;
float:left;
font-weight:bold;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqoJ5zxdHuJ9kXih26yygRPRtT4P79SrLIyK-niGXReT7-jGmRnIzZxLmdo5nIHly25gpHFuvGA5pC_9PlVthWTTTcyfHHny97ojhwfSn0ZzMWAdRTUBOAvBpLT88xZ3Ox0_sz9JaFLui-/s1600/bg.gif);
padding:0 30px 0 30px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#2b3238;
}
.nav .select a:hover,
.nav .select li:hover a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM7ijtwdaDDqsL_Rk13SJM7opRYgBJA_zWj5x-pf312nMz601Tv2_bPfE-Ji-s3t82U1uYICrwml18puqhU1xC2WgXIeNq1hs_sZhsZG5aGdKKjn-Y92tjXNv0vPuNzjTKaKxDLdua0qqW/s1600/hover.gif);
padding:0 0 0 15px;
cursor:pointer;
color:#2b3238;
}
.nav .select a b{
font-weight:bold;
}
.nav .select a:hover b,
.nav .select li:hover a b {
display:block;
float:left;
padding:0 30px 0 15px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM7ijtwdaDDqsL_Rk13SJM7opRYgBJA_zWj5x-pf312nMz601Tv2_bPfE-Ji-s3t82U1uYICrwml18puqhU1xC2WgXIeNq1hs_sZhsZG5aGdKKjn-Y92tjXNv0vPuNzjTKaKxDLdua0qqW/s1600/hover.gif) right top;
cursor:pointer;
}
.nav .select_sub {
display:none;
}
/* IE6 only */
.nav table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}
.nav .sub {
display:table;
margin:0 auto;
padding:0;
list-style:none;
}
.nav .sub_active .current_sub a,
.nav .sub_active a:hover {
background:transparent;
color:#2b3238;
}
.nav .select :hover .select_sub,
.nav .current .show {
display:block;
position:absolute;
width:100%;
top:35px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE-xpJoIOmniNl7LiNQSy6OShvPpHFilT0fLf7iVxbQ0QAKmOpFZ9YIsaZNFjKooonm7WwPp1fRyfI3TNDekEaJrZ7CXouSuHhi_65Gh2AemODSj70W37FEel1RyF0PvvwXuOB51E1g1fq/s1600/back.gif);
padding:0;
z-index:100;
left:0;
text-align:center;
}
.nav .current .show {
z-index:10;
}
.nav .select :hover .sub li a,
.nav .current .show .sub li a {
display:block;
float:left;
background:transparent;
padding:0 10px 0 10px;
margin:0;
white-space:nowrap;
border:0;
color:#2b3238;
}
.nav .current .sub li.sub_show a {
color:#2b3238;
cursor:default;
}
.nav .select .sub li a {
font-weight:normal;
}
.nav .select :hover .sub li a:hover,
.nav .current .sub li a:hover {
visibility:visible;
color:#73a0d2;
}
<!--[if IE]>
.nav ul {display:inline-block;}
.nav ul {display:inline;}
.nav ul li {float:left;}
.nav {text-align:center;}
.nav .select a:hover b,
.nav .select li:hover a b {float:none;}
<![endif]-->
/*Blogger Kendine Özgü Yatay Navigasyonlu Menü
http://etralibela-61.blogspot.com*/
5- Şablonunuzu kaydedin ve çıkın.6- Tekrar Kumanda Paneli > Yerleşim > Gadget Ekle yolunu takip edin.
7- Açılan gadget'in içine aşağıda ki HTML menü kodlarını ekleyin.
<!-- Blogger Kendine Özgü Yatay Navigasyonlu Menü http://etralibela-61.blogspot.com Başlangıç --> <div class="nav"> <div class="table"> <ul class="select"><li><a href="#"><b>Ana Sayfa</b></a></li></ul> <ul class="select"><li><a href="#"><b>Menü Başlıkları-1</b></a> <div class="select_sub"> <ul class="sub"> <li><a href="#">Menu-1</a></li> <li><a href="#">Menu-1</a></li> <li><a href="#">Menu-1</a></li> <li><a href="#">Menu-1</a></li> <li><a href="#">Menu-1</a></li> </ul> </div> </li> </ul> <ul class="select"><li><a href="#"><b>Menü Başlıkları-2</b></a> <div class="select_sub"> <ul class="sub"> <li><a href="#">Menu-2</a></li> <li><a href="#">Menu-2</a></li> <li><a href="#">Menu-2</a></li> <li><a href="#">Menu-2</a></li> <li><a href="#">Menu-2</a></li> </ul> </div> </li> </ul> <ul class="select"><li><a href="#"><b>Menü Balıkları-3</b></a> <div class="select_sub"> <ul class="sub"> <li><a href="#">Menu-3</a></li> <li><a href="#">Menu-3</a></li> <li><a href="#">Menu-3</a></li> <li><a href="#">Menu-3</a></li> <li><a href="#">Menu-3</a></li> </ul> </div> </li> </ul> <ul class="select"><li><a href="#"><b>Menü Başıkları-4</b></a> <div class="select_sub"> <ul class="sub"> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 4</a></li> </ul> </div> </li> </ul> </div> </div> <!-- Blogger Kendine Özgü Yatay Navigasyonlu Menü http://etralibela-61.blogspot.com Sonu-->HTML Kod içerisine değiştirilecek yerler?
Yeşil renkli (#) işareti yerine menü metnine ait linkini eklenecek kısımdır.
Mavi renkli yazılı olan Menü metinleri yerine ise siz kendinize göre düzenleyin.
Kırmızı renkli yazılı başlık menüleri yerini kendinize göre düzenleyin.
Son olarak yatay menüyü blog şablon temanızın üst kısmında görünmesi için Kumanda panelinden yerleşim tıklıyoruz ve blogunuzun adı yazan başlığın altında ki gadget'e Html kodlarını ekleyin.
İşlemimiz bitmiştir.
Yorum Gönder Blogger Facebook