Blogger Css ile Kullanışlı menü Oluşturma

css ile menü yapımı

   Bloggerda Menü kullanmanın öneminden daha önce bahsetmiştik . Hatta menüler websitelerinin demirbaşlarından dır demiştik . Kategori kullanımı , menü kullanımı ziyaretçilerin daha hızlı ve aradığı bilgiye daha kolay ulaşmasını sağlayacaktır. Standart bir menü oluşturmak mümkündür . Ama Css ile görsel olarak çok daha güzel menüler hazırlanabilir. Bu yazımda sizlere Css ile menü yapımı ve kullanımından bahsetmek istiyorum.

css menü oluşturma

TEST

• Css ile hover menü tasarımı
• 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>

#arrowunderline{


list-style-type:none;

margin:0;
padding:0;

ont: bold 16px Geor

text-align:center; 

fgia;
}
#arrowunderline li{

:25px; 
}
#arro

display:inline;
margin-righ
twunderline li a{
position:relative;

t-decoration

color:black;
padding-bottom:8px; 
te
x:none;
}
#arrowunderline li a:hover{

rrowunderline li a:hover:after{ 

border-bottom:3px solid #25bd0d; 
}
#
acontent:'';
width:0;
height:0;
position:absolute;
left:50%;

:solid;
border-col

margin-left:-5px; 
bottom: 0;
border-width:5px; 
border-styl
eor: transparent transparent #25bd0d transparent; 
}

• 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 id="arrowunderline">

<ul>

a href="#"><span>Anasayfa</span></a></li>
<li>

<li>
<<a href="#"><span>Kişisel</span></a></li>

li>
<li><a href="#"><span>Hakkımda</span></a><

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