Güncel Haberler, Yazılım, Teknoloji ve İnternet Paylaşım

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

css ile menü yapımı
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 ile menü yapımı
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.
    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.



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