Blogger'da Hover Menü Oluşturma

Herkese iyi günler...
Bugün yine işinize yarayabilecek blogger eklentisiyle karşınızdayım.Konumuz da "Hover Menü Oluşturma".Bakalım nasıl yapılıyor :)

Öncelikle örnek olarak iki basit buton modeli göstereceğim.

Yukarıdaki bu iki butonla Hover Menü Oluşturacağım.

İlk olarak Blogger Kontrol Paneli/Şablon/Özelleştir/Geliştirici ve CSS ekle bölümüne geliyoruz.CSS ekle bölümü açıldığında boş bir sayfa çıkacak karşımıza.Ve bu boş sayfaya şu kodları ekleyeceğiz.

table.bottoni menu{  
border:0px;
text-align:center;
margin-left:0px;
margin-right:0px;
}
h1{margin-bottom: 16px;font-size: 100%;text-align:center; color:#421335;}
a:link { 
text-decoration: none; 
cursor:nw-resize;
font-family: "PhoenixScriptFLF"; 
font-size: 16px;
color:#421335;
}
td.link{ 
border:0px none;
background-image: url('http://i58.tinypic.com/2rhnqeo.png'); 
text-align:center;
width: 140px;
height: 80px;
padding-left:0px; padding-right:0px; padding-top:4px; padding-bottom:0px
}
td.out{ 
border:0px none;
background-image: url('http://i58.tinypic.com/2rhnqeo.png'); 
text-align:center;
width: 140px;
height: 80px;
padding-left:0px; padding-right:0px; padding-top:4px; padding-bottom:0px
}
td.hover{ 
border:0px none;
background-image: url('http://i62.tinypic.com/11hdi5w.png'); 
text-align:center;
width: 140px;
height: 80px;
padding-left:0px; padding-right:0px; padding-top:4px; padding-bottom:0px
}


Bu kodlardaki dikkat edilecek noktalar şunlar; td.link{ ve  td.out{ ile başlayan bölümdeki resim urlsi aynı olacak ama td.hover{ ile başlayan bölümdeki resim urlsi farklı olacak.Çünkü menünün üzerine gelindiğinde menü butonu değişecek.Yani hover bölümündeki resim urlsindeki buton ortaya çıkmış olacak.Yazı boyutunu 16px;font-size: yani 16 punto yapmışım kendinize göre yazı büyüklüğünü değiştirebilirsiniz.Font stilini değiştirmek isterseniz de font-family: "PhoenixScriptFLF"; yerine farklı bir font stili kullanabilirsiniz.Yazı rengini de değiştirmek isterseniz #421335 yazan renk kodu yerine başka renk kodunu yazabilirsiniz.Ve son olarak width: 140px; height: 80px; yükseklik ve genişliğini de kendinize göre ayarlayabilirsiniz.

Bu işlemleri yaptıktan sonra bloga uygula diyoruz ve böylece bu bölümü tamamlamış oluyoruz...

<!-- Start -->
  <table class="base" cellpadding="0" cellspacing="0">
<tr>
  <td class="link" onmouseover="this.className = 'hover'" onmouseout="this.className = 'out'"><a href="sayfa urlsi buraya gelecek">Link Adı</a></td>
  <td class="link" onmouseover="this.className = 'hover'" onmouseout="this.className = 'out'"><a href="sayfa urlsi buraya gelecek">Link adı</a></td>
  <td class="link" onmouseover="this.className = 'hover'" onmouseout="this.className = 'out'"><a href="sayfa urlsi buraya gelecek">Link Adı</a></td>
  <td class="link" onmouseover="this.className = 'hover'" onmouseout="this.className = 'out'"><a href="sayfa urlsi buraya gelecek">Link Adı</a></td>
<td class="link" onmouseover="this.className = 'hover'" onmouseout="this.className = 'out'"><a href="sayfa urlsi buraya gelecek">Link Adı</a></td>
  </tr>
</table>
<!-- Finish -->

Şimdi de sıra menüdeki butonlara link vermede.Link adı dediğim yerlere örneğin; Anasayfa diyelim ve sayfa urlsi gelecek dediğimiz bölümü de Anasayfa urlsini yazalım.Ya da etiketlerinizden menü oluşturmak isterseniz etiket urlsi de kullanabilirsiniz.Tabi önce yukarıdaki kodu Blogger Kontrol Paneli/Yerleşim/Gadget ekle diyoruz üst bölümdeki yere HTML/Java Script ekleyi seçip kodu ekliyoruz ve kaydet yapıyoruz.



Sonuç olarak menümüz bu şekilde görünüyor :)


Menünün üzerine mouse getirince de gördüğünüz gibi buton değişiyor :) Böylece işlemimiz tamamlanmış oldu.Umarım yardımcı olabilmişimdir :)

NOT: Menünün hareketli halini görmek için denemeler yaptığım bloga yani buraya bakabilirsiniz.


Umarım beğenmişsinizdir...


Şimdilik Hoşçakalın :)

Yorum Gönder