Blogger Kendine Özgü Açılır Navigasyonlu Menü

Blogger dinamik bir yatay menü daha ekliyorum arkadaşlar bu menüde renkleri mavi ve bayaz karşılıyor diğer bir özelliği ise menü başlıkları altında dört beş tane daha menü linki var ve bu 4 başlık halinde her birindede beşer tane menü başlığı ekli.Demo örneğinde zaten göreceksiniz dinamik ve sade bir yatay menü olduğunu.

• Blogger Kumanda Paneli girin
• Daha  sonra Şablon seçin
• HTML'yi Düzenle diyin ve daha sonra Witget Şablonu Genişlet tıklayın CTRL + F yardımı ile bu  </b:skin> kodunu bulun
• Sonra Aşağıdaki Kodu Hemen  </b:skin>  Üstüne Yapıştırın

/*Blogger Kendine Özgü Açılır Navigasyonlu Menü from http://phtmldrive.blogspot.com*/

.nav {
height:35px; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5il55jCLfcjktsQVApYJU0s6EdwkLZKjlmrRkwkhNqxX5ThFiDIK0fMYOpqhCOAUzYOVpNlRD7zGxGKtVgLfwIURymkHP4JqhEcV6rUkZo5AHYUPYqEkE7Mkyg7PFa-IiWNY7msbvKFDZ/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/AVvXsEh5il55jCLfcjktsQVApYJU0s6EdwkLZKjlmrRkwkhNqxX5ThFiDIK0fMYOpqhCOAUzYOVpNlRD7zGxGKtVgLfwIURymkHP4JqhEcV6rUkZo5AHYUPYqEkE7Mkyg7PFa-IiWNY7msbvKFDZ/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/AVvXsEh8U4ywWcMGHMwiyIcttyRcOE3C5KpET-OKd42fs4dktTlVobAVPQ5VJ5e91YPP2-Mc7ltU-QB_e2f_MWet2Alq8HC1jbROLxdQpt_RRSt3Y_Ey1g7gkfOrfgzXjb0byzfMZQYYSKk0ujk3/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/AVvXsEh8U4ywWcMGHMwiyIcttyRcOE3C5KpET-OKd42fs4dktTlVobAVPQ5VJ5e91YPP2-Mc7ltU-QB_e2f_MWet2Alq8HC1jbROLxdQpt_RRSt3Y_Ey1g7gkfOrfgzXjb0byzfMZQYYSKk0ujk3/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/AVvXsEi5gh6OrsHE0pVnvC185yPh1TElhMizPQFRrOHK6kpWBcNJslK7qTqTYkEviA7zbXr1YePPNAaljJpw94997XlyYaODj65Pzxdi5BBe5pYsRoWTP0Q1nQZsrulKUi8IsY210gg0sARhsnYR/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ü Açılır Navigasyonlu Menü http://phtmldrive.blogspot.com*/

• Daha  sonra Yerleşim >> Gatget Ekle >> Html/JavaScript >> içersine aşağıdaki kodları ekleyin seçin

<!--  Blogger Kendine Özgü Açılır Navigasyonlu Menü http://phtmldrive.blogspot.com/  Başlangıç --> 

<div class="nav">
<div class="table">

<ul class="select"><li><a href="Bağlantı Linki"><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ü Açılır Navigasyonlu Menü http://phtmldrive.blogspot.com/  Sonu--> 

Kodlar içersinde Bağlantı Linki olan bölüme bağlayacağınız linki diğer Bağlantı İsmi'de o bağlantının adını yazmanız yeterli olacaktır.


ve son olarak kodu nasıl yerleştireceğimizi resimde gördüğünüz gibi yapıyoruz.

Kolay gelsin.