Öncelikle menün stil kodlarını
ekleyelim. Blogger kumanda panelinize girip Tema > HTML’yi Düzenle dedikten
sonra Ctrl+F tuş
kombinasyonu yardımıyla kolayca bulabileceğiniz
]]></b:skin> kodunun üstüne şu kodları ekleyin.
]]></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ıyorsanız HTML
kodlarını <div
class='tabs-outer'> kodunun 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.
!!! Eğer yukarıdaki kodların hiçbirini bulamıyorsanız </header> kodunu aratıp hemen alt kısmınada yapıştırılabilir kodlar.
<ul id='hb-menu'>
<li><a
href='https://istanbuletknlk.blogspot.com.tr/'>Ana Sayfa</a></li>
<li>
<a href=' '>Etkinlikler</a>
<ul>
<li><a href='
'>Fuarlar</a></li>
<li><a href=' '>Şehir
Tanıtımları</a></li>
<li><a href=' '>Çocuk
Etkinlikleri</a></li>
</ul>
</li>
<li><a href=' '>Gezilecek
Yerler</a>
<ul>
<li><a href=' '>Anadolu
Yakası</a></li>
<li><a href=' '>Avrupa
Yakası</a></li>
<li><a href=' '>İstanbula Yakın
Yerler</a></li>
</ul>
</li>
<li><a href='
'>Tiyatrolar</a> </li>
<li><a href='
'>Sinemalar</a> </li>
<li><a href='
'>Hakkımda</a> </li>
<li><a href=' '>İletişim</a>
</li>
</ul>
Hiç yorum yok:
Yorum Gönder