23 Eylül 2013 Pazartesi

Css İle Hover Menü Tasarımı

blogger css ile menu olusturma
Blogger css menu olusturma

      Css menü kullanımından daha önceleri bir kaç konu da bahsetmiştim. Bu yazımda da Hover özelliği ile oluşturulmuş yuvarlak tasarımlı css menü'nün blogger blogunuza nasıl uygulanacağından bahsetmek istiyorum.


    Menü'nün nasıl göründüğünü merak ediyorsanız test butonuna tıklayarak bakabilirsiniz.Gelelim Css ile oluşturulmuş bu menü'nün blogunuza nasıl uygulanacağı :

  • 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ıda bulunan kodun bir üst satırına aşağıdaki kodları yapıştırınız.

.circlemenu{
width: 100%;
overflow:hidden;
}
.circlemenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: center;
}
.circlemenu li{
display: inline;
margin: 0;
}
.circlemenu li a{
display:inline-block;
text-align:center;
text-decoration: none;
color: white;
background:#b30707;
margin: 0;
margin-right:5px;
width:100px;
height:100px;
border-radius: 400px;
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
}
.circlemenu a span{
position:relative;
top:40%;
}
.circlemenu li a:visited{
color: white;
}
.circlemenu a:hover{
background: #ff1774;
}



  • Daha sonra Kaydet butonuna tıklayın.
  • Yerleşim sekmesinden gadget ekle ve html/javascript'e tıklayınız ve aşağıdaki kodları kopyalayıp yapıştırarak kaydediniz.
  • Eklentiyi uygulamadan önce her ihtimale karşı blogunuzun şablonunun bir yedeğini almayı unutmayın.

<div class="circlemenu">
<ul>
<li><a href="#"><span>Anasayfa</span></a></li>
<li><a href="#"><span>Hakkımda</span></a></li>
<li><a href="#"><span>Blogger</span></a></li>
<li><a href="#"><span>İnternet</span></a></li>
<li><a href="http://www.ugurturkoglu.blogspot.com/"><span>İletişim</span></a></li>
</ul>
</div>


  • Yukarıdaki kodlarda bulunan # ile gösterilen yerlere vermek istediğiniz link'i yazınız. Örneğin son kod da görüldüğü gibi iletişim kısmının # yazan yerine bir link verilmiş.
  • Menü sayısını artırmak isterseniz eğer :

<li><a href="#"><span>İnternet</span></a></li>

 Kodunu kopyalayıp yapıştırın. Burada yer alan alan internet kategorisini istediğiniz bir şekilde değiştirebilirsiniz.

Bir önceki yazımda Rss abonelik ve sosyal medya butonlarının blogunuza nasıl ekleyeceğiniz hakkında bilgiler verilmektedir.

Etiketler: , , , , ,

0 Yorum:

Yorum Gönder

Yorumlarınız için teşkür ederim

Kaydol: Kayıt Yorumları [Atom]

<< Ana Sayfa