iklan banner

Blogger Yatay Menü



Öncelikle menün stil kodlarını ekleyelim. Blogger kumanda panelinize girip  Şablon >HTML’yi Düzenle dedikten sonra Ctrl+F tuş kombinasyonu yardımıyla kolayca bulabileceğiniz ]]></b:skin> kodunun üstüne şu kodları ekleyin.


#hb-menu, #hb-menu ul { 
margin: 0; 
padding: 0; 
list-style: none; 

#hb-menu { 
width: 900px; 
margin: auto; 
border: 1px solid #222; 
background-color: #111; 
background-image: -moz-linear-gradient(#444, #111); 
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); 
background-image: -webkit-linear-gradient(#444, #111); 
background-image: -o-linear-gradient(#444, #111); 
background-image: -ms-linear-gradient(#444, #111); 
background-image: linear-gradient(#444, #111); 
-moz-border-radius: 6px; 
-webkit-border-radius: 6px; 
border-radius: 6px; 
-moz-box-shadow: 0 1px 1px #777; 
-webkit-box-shadow: 0 1px 1px #777; 
box-shadow: 0 1px 1px #777; 

#hb-menu:before, 
#hb-menu:after { 
content: ""; 
display: table; 

#hb-menu:after { 
clear: both; 

#hb-menu { 
zoom:1; 

#hb-menu li { 
float: left; 
border-right: 1px solid #222; 
-moz-box-shadow: 1px 0 0 #444; 
-webkit-box-shadow: 1px 0 0 #444; 
box-shadow: 1px 0 0 #444; 
position: relative; 

#hb-menu a { 
float: left; 
padding: 12px 15px; 
color: #999; 
text-transform: uppercase; 
font: bold 12px Arial, Helvetica; 
text-decoration: none; 
text-shadow: 0 1px 0 #000; 

#hb-menu li:hover > a { 
color: #fafafa; 

*html #hb-menu li a:hover { /* IE6 only */ 
color: #fafafa; 

#hb-menu ul { 
margin: 15px 0 0 0; 
_margin: 0; /*IE6 only*/ 
opacity: 0; 
visibility: hidden; 
position: absolute; 
top: 38px; 
left: 0; 
z-index: 9999; 
background: #444; 
background: -moz-linear-gradient(#444, #111); 
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); 
background: -webkit-linear-gradient(#444, #111); 
background: -o-linear-gradient(#444, #111); 
background: -ms-linear-gradient(#444, #111); 
background: linear-gradient(#444, #111); 
-moz-box-shadow: 0 -1px rgba(255,255,255,.3); 
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3); 
box-shadow: 0 -1px 0 rgba(255,255,255,.3); 
-moz-border-radius: 3px; 
-webkit-border-radius: 3px; 
border-radius: 3px; 
-webkit-transition: all .2s ease-in-out; 
-moz-transition: all .2s ease-in-out; 
-ms-transition: all .2s ease-in-out; 
-o-transition: all .2s ease-in-out; 
transition: all .2s ease-in-out; 

#hb-menu li:hover > ul { 
opacity: 1; 
visibility: visible; 
margin: 0; 

#hb-menu ul ul { 
top: 0; 
left: 150px; 
margin: 0 0 0 20px; 
_margin: 0; /*IE6 only*/ 
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3); 
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3); 
box-shadow: -1px 0 0 rgba(255,255,255,.3); 

#hb-menu ul li { 
float: none; 
display: block; 
border: 0; 
_line-height: 0; /*IE6 only*/ 
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666; 
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666; 
box-shadow: 0 1px 0 #111, 0 2px 0 #666; 

#hb-menu ul li:last-child { 
-moz-box-shadow: none; 
-webkit-box-shadow: none; 
box-shadow: none; 

#hb-menu ul a { 
padding: 10px; 
width: 130px; 
_height: 10px; /*IE6 only*/ 
display: block; 
white-space: nowrap; 
float: none; 
text-transform: none; 

#hb-menu ul a:hover { 
background-color: #0186ba; 
background-image: -moz-linear-gradient(#04acec, #0186ba); 
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); 
background-image: -webkit-linear-gradient(#04acec, #0186ba); 
background-image: -o-linear-gradient(#04acec, #0186ba); 
background-image: -ms-linear-gradient(#04acec, #0186ba); 
background-image: linear-gradient(#04acec, #0186ba); 

#hb-menu ul li:first-child > a { 
-moz-border-radius: 3px 3px 0 0; 
-webkit-border-radius: 3px 3px 0 0; 
border-radius: 3px 3px 0 0; 

#hb-menu ul li:first-child > a:after { 
content: ''; 
position: absolute; 
left: 40px; 
top: -6px; 
border-left: 6px solid transparent; 
border-right: 6px solid transparent; 
border-bottom: 6px solid #444; 

#hb-menu ul ul li:first-child a:after { 
left: -6px; 
top: 50%; 
margin-top: -6px; 
border-left: 0; 
border-bottom: 6px solid transparent; 
border-top: 6px solid transparent; 
border-right: 6px solid #3b3b3b; 

#hb-menu ul li:first-child a:hover:after { 
border-bottom-color: #04acec; 

#hb-menu ul ul li:first-child a:hover:after { 
border-right-color: #0299d3; 
border-bottom-color: transparent; 

#hb-menu ul li:last-child > a { 
-moz-border-radius: 0 0 3px 3px; 
-webkit-border-radius: 0 0 3px 3px; 
border-radius: 0 0 3px 3px; 
}

Sıra menünün HTML kodlarını eklemeye geldi. Eğer Blogger’ın kendi temalarından birini kullanıyorsaız HTML kodlarını  <div class='tabs-outer'> kodnun hemen üstüne ekleyin. Eğer özel bir Blogger teması kullanıyorsanız HTML kodlarını <div id='content-wrapper'>  kodunun hemen altına ekleyin.

<ul id='hb-menu'> 
<li><a href='http://www.bozyazililar.com/'>Ana Sayfa</a></li> 
<li> 
<a href='http://www.bozyazililar.com/search/label/Haber'>Haberler</a> 
<ul> 
<li><a href='http://www.bozyazililar.com/search/label/Bozyaz%C4%B1%20Haber'>Bozyazı&#39;dan Haberler</a></li> 
<li><a href='http://www.bozyazililar.com/search/label/Anamur%20Haber'>Anamur&#39;dan Haberler</a></li> 
<li><a href='http://www.bozyazililar.com/search/label/Tekeli%20Haber'>Tekeli&#39;den Haberler</a></li> 
</ul> 
</li> 
<li><a href='http://www.bozyazililar.com/search/label/K%C3%B6%C5%9Fe%20Yaz%C4%B1s%C4%B1'>Köşe Yazıları</a> 
<ul> 
<li><a href='http://www.bozyazililar.com/search/label/Halil%20Alperen%20%C3%87e%C5%9Fme'>Halil Alperen Çeşme</a></li> 
<li><a href='http://www.bozyazililar.com/search/label/Ramazan%20Enez'>Ramazan Enez</a></li> 
<li><a href='http://www.bozyazililar.com/search/label/Recep%20Kurtkaya'>Recep Kurtkaya</a></li> 
<li><a href='http://www.bozyazililar.com/search/label/Serkan%20I%C5%9F%C4%B1l'>Serkan Işıl</a></li> 
</ul> 
</li> 
<li><a href='http://www.bozyazililar.com/2012/11/bozyaz-hava-durumu.html'>Hava Durumu</a> 
</li> 
<li><a href='http://www.bozyazililar.com/2012/10/bozyazililarcom-iletisim.html'>İLETİŞİM</a> 
</li> 
</ul>

Menünün boyu uzun veya kısa gelirse stil kodlarındaki width: 900px; değerini değiştirerek temanıza uygun hale getirebilirsiniz.
 

Previous
Next Post »
iklan banner