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

Blogger blogunuza css ile oluşturulmuş menülerden daha önce de bir kaç konu da bahsettiğimi yazı başında değinmiştim. O konularada aşağıdaki bağlantılardan ulaşabilirsiniz.

Menü'nün nasıl çalıştığını görmek istiyorsanız TEST butonuna tıklayarak inceleyebilirsiniz.

• Css ile hover menü tasarımı
• Blogger css menü

    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.

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

 Kodunu kopyalayıp yapıştırın. Burada yer alan alan hakkında kategorisi adını istediğiniz bir şekilde değiştirebilirsiniz. Örnek olarak eğlence yazarsanız menü butonunda eğlence olacaktır. sonuç olarak Css ile kullanışlı bir  menü oluşturduk.