Blogger kullanıcıları için, kullanışlı Css3 kodlardan oluşan Siyah renkli, Sabit ve mavi hover dikey açılır menü seçeneklerinden oluşan...
Başlık kısmında Menü sekmesi olmayan bir Blogger olamaz. Blog’unuza kendinizin baktığı gibi değil bir okuyucu gözüyle bakarak bu eksikliği gidermeniz, Google Seo, Web yönetici araçları, Web kuralları ile eş anlamda değerlendirilir. Bu neden ile mutlaka bir menü navigasyon sekmesi kurmanız gerekir. Aşağıda açıklaması yapılacak olan Menü sekmesinin görünümü yukarıda verilen resim gibidir. Menü navigasyon sekmesini ayrıca test blog’umdan canlı olarak inceleyebilirsiniz. DEMO
Dikey açılır menü bar kurulum aşamaları:
1. Blogger kumanda paneline giriş yapın.
2. Yerleşim → Gadget ekle → Html/JavaScrip, gadget’ini açın ve aşağıdaki kodları kopyalayın yapıştırıp blogu kaydedin. Diğer özelleştirmeler için aşağıdaki yazıyı okumaya devam edin.
Ayrıca farklı bir menü çubuğu eklentisi inceleyin:
⇒ Blogger Dikey Açılır Menü Çubuğu Eklentisi⇒ Açılır Menü Acemi Blogger Eklentisi
<style>
/*------ CSS3 Drop Down Menu By AG (http://adnanguney.com)----*/
#ag-menu, #ag-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#ag-menu {
width: 1210px;
margin: 0px 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;
}
#ag-menu:before,
#ag-menu:after {
content: "";
display: table;
}
#ag-menu:after {
clear: both;
}
#ag-menu {
zoom:1;
}
#ag-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;
}
#ag-menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#ag-menu li:hover > a {
color: #fafafa;
}
*html #ag-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#ag-menu ul {
margin: 20px 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;
}
#ag-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#ag-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);
}
#ag-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;
}
#ag-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#ag-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#ag-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);
}
#ag-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;
}
#ag-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;
}
#ag-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;
}
#ag-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#ag-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#ag-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;
}
</style>
<ul id="ag-menu">
<li><a href="http://guney13.blogspot.com">Ana Sayfa</a></li>
<li>
<a href="#">Kategoriler</a>
<ul>
<li><a href="#">List1</a></li>
<li><a href="#">List2</a></li>
<li><a href="#">List3</a></li>
<li><a href="#">List4</a></li>
</ul>
</li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
</ul>
1. width: 1210 px; Menü sekmesinin genişlik ayarı. Temanıza göre rakamları değiştirin.
2. http://guney13.blogspot.com, Kendi blog Url’nizi yazın.
3. Kategori isimlerini kendi belirledikleriniz ile değiştirin.
4. # Hastag işaretinin olduğu yere etiket link’inizi ekleyin.
5. List1 ve Link1: Bu kısımlar kategori isimlerinin eklendiği yerlerdir. Örnek: Kek çeşitleri
Ayrıca okuyun: Blogger Açılmayan Menü Çubuğu Nasıl Açılır Yapılır
Hiç yorum yok
Fikirlerinizi bizimle yorumlarda paylaşabilirsiniz.