Sayfa Gezinme

Son makaleler:

latest

YAYIN AKIŞI:

Tümünü Görüntüle

Blogger Siyah Dikey Açılır Menü Çubuğu

Ocak 29, 2015

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...

...
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 dikey açılır menü navigasyon çubuk eklentisi.
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 dikey açılır menü navigasyon çubuk eklentisi. Okuyucu kitlenize blog’unuzun Ana sayfa, hakkında, iletişim ve kategori linklerinden oluşan etiketlerinizi önerebileceğiniz şık görünümlü geliştirilmiş Css3 kodlama ile düzenlenmiş açılır menü sekmesi. Okuyucu kitlenize aradığı yazıları menü navigasyon sekmesi ile yönlendirmek Google Seo olarak da büyük önem taşımaktadır. 

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ı: 

Açılır menü bar’ın kurulumu oldukca basittir. Tüm kodlar bir arada olup kurulum için;

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

Dikey açılır menü bar kodları:
<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>
Menü Özelleştirme :

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

Related Posts

Hiç yorum yok

Fikirlerinizi bizimle yorumlarda paylaşabilirsiniz.

Kaydol: Kayıt Yorumları (Atom)
×