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 |
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.
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>
Hiç yorum yok:
Yorum Gönder