Css İle Hover Menü Tasarımı

Blogger css menu olusturma

• Blogger css dropdown menü
• Blogger css menü

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