Blogger CSS menü

Css menü

   İnternet ortamında bir blogu ya da web sitesini ziyaret ettiğimizde mutlaka bir menü ile karşılaşırız.Hatta menü bir websitesi tasarımında demirbaş desek yanlış olmaz sanırım. Kategorize edilmiş yazılara kolayca ulaşılması ya da blog sahibinin hakkında edinilecek bilgiler ya da arşiv vs bir sürü şey'e bu menüler vasıtasıyla kolayca ulaşırız.

   Bu yazımda sizlere css ile oluşturulmuş güzel bir menü yü blogger blogunuza nasıl ekleyceğinizi anlatmaya çalışacağım. CSS kulanılarak yapılmış bu menü de herhangi bir kategoriye tıkladığınızda resimde de görüldüğü üzere tıkladığınız kategori yeşil rengini almaktadır. Güzel bir görüntü oluşturmakta elbette. İstenirse bu rengi değiştirmek de mümkün.Daha önceleri de bu css menü hakkında başka bir paylaşımım olmuştu.

• Blogger Css menü 

 Menünün nasıl göründüğünü test etmek istiyorsanız TEST butonuna tıklayarak bakabilirsiniz.

TEST

CSS ile yapılmış bu menüyü blogunuza eklemek için aşağıdaki adımları uygulayınız.

• Blogger paneline giriş yapınız.
• Şablon sekmesine tıklayınız ve Html'yi düzenle butonuna tıklayınız.
• Aşağıda yazan kodu Ctrl+F yardımı ile kodlar arasında aratıp bulunuz.

]]></b:skin>

• Yukarıdaki bulmuş olduğunuz kodun hemen bir üst satırına aşağıdaki kodları yapıştırınız.

/* CSS menü ugurturkoglu.blogspot.com */
ul{
margin:0;
padding:0;
}

li{
display:inline;
list-type:none;
}

a.glidebutton{
display: inline-block;
position: relative;
color: #4A4A4A; 
background: #ececec; 
text-decoration: none;
font: bold 14px Arial;
letter-spacing: 2px; 
overflow: hidden;
height: 30px; 
text-align: center;
border-radius: 5px; 
-moz-transition: all 0.3s ease-in-out; 
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

a.glidebutton > span:first-child{ 
position: relative;
display: block;
height: 100%;
padding: 6px; 
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-transition: all 0.3s ease-in-out; 
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

a.glidebutton > span:first-child:after{ 
content: attr(data-text); 
display: block;
width: 100%;
height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: inherit;
position: absolute;
top:100%;
left:0;
}

a.glidebutton:hover{
color: black; 
background: #72cb47; 
box-shadow: 0 0 4px green inset;
}

a.glidebutton:hover > span:first-child{
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}

• Kaydet butonuna tıklayınız.
• Tekrardan blogger paneline dönünüz.
• Yerleşim Sekmesine tıklayınız.
• Gadget ekle ve ardından html javascript'i tıklayınız.
• Açılan sayfaya aşağıdaki yer alan kodları yapıştırınız.

<ul>
<li><a class="glidebutton" href="#"><span data-text="Anasayfa">Anasayfa</span></a></li>
<li><a class="glidebutton" href="#"><span data-text="Haberler">Haberler</span></a></li>
<li><a class="glidebutton" href="#"><span data-text="Blogger">Blogger</span></a></li>
<li><a class="glidebutton" href="#"><span data-text="SEO">SEO</span></a></li>
<li><a class="glidebutton" href="#"><span data-text="Kişisel">Kişisel</span></a></li>
<li><a class="glidebutton" href="#"><span data-text="Hakkımda">Hakkımda</span></a></li>
<li><a class="glidebutton" href="http://www.ugurturkoglu.blogspot.com"><span data-text="İletişim">İletişim</span></a></li>
</ul>

CSS Menü Ayarları

• Menü deki kategorileri artırmak veya azaltmak isterseniz

<li><a class="glidebutton" href="#"><span data-text="Anasayfa">Anasayfa</span></a></li>

Bu kodu tekrar ekleyiniz veya çıkartınız.

• # ile gösterilen yere menü ye vermek istediğiniz adresi yazınız.

Blogger sistemde css menü yapımı'nı anlatmaya çalıştım.İyi günler.

Bir önceki yazımda Jquery ile slider menu yapimi hakkında bilgiler verilmektedir.