Teknofiber.net’i, WordPress alt yapısına taşımadan önce Blogger kullanıyordum ve o zamanlar bir renkli menü yapmıştım. Bir çok kullanıcının hoşuna gitmişti. Hatta bu menüyü benden isteyen onlarca kişi fakat kendim yaptığım için ve Blogger’da sadece bana özel olmasını istediğim için kaynak kodlarını kimseye vermemiştim. Hatta vermediğim için benle küsenler bile olmuştu 🙂 Şimdi o menüyü kullanmadığım için kaynak kodlarını herkese vermeyi düşündüm. Kodları hemen aşağıdan alabilirsiniz. Herkese iyi bloglamalar dilerim.

Kaynak Kodları

Blogger yönetim panelinde bulunan yerleşim sekmesine tıklayın ve yeni bir HTML gadgetı ekleyin. Aşağıdaki kodları bu gadgeta yapıştırın.

[syntax type=”html|php|js|css”]<ul id=’cakmak’>
<li class=’m1′> <a href=’http://teknofiber.net/search/label/Program%2FYaz%C4%B1l%C4%B1m’> </a></li>
<li class=’m2′> <a href=’http://teknofiber.net/search/label/%C4%B0nternet’></a></li>
<li class=’m3′> <a href=’http://teknofiber.net/search/label/Blogger’></a></li>
<li class=’m4′><a href=’http://teknofiber.net/search/label/Oyun’></a></li>
<li class=’m5′><a href=’http://teknofiber.net/search/label/Tan%C4%B1t%C4%B1mlar’></a></li>
<li class=’m6′><a href=’http://teknofiber.net/search/label/Mobil’></a></li>
<li class=’m7′><a href=’#’></a></li>
<li class=’m8′><a href=’#’></a></li>
<li class=’m9′><a href=’#’></a></li>
</ul>[/syntax]

Daha sonra, aşağıdaki kodlarıda şablon sekmesine gelin ve HTML’yi düzenle butonuna tıklayın. ]]></b:skin> kodundan önce biten yere aşağıdaki kodları ekleyin.

[syntax type=”html|php|js|css”]/* Menü */
ul#cakmak {width: 310px; overflow: hidden}
ul#cakmak li {float: left; height: 84px; }
ul#cakmak li.m1 {display: block; border: 3px solid rgb(251,251,251); width: 95px; background: url(http://2.bp.blogspot.com/-5WM7-9S0CSY/UOw-j40OLQI/AAAAAAAAB-Y/UwVpViEgUzM/s1600/icon1.png);}
ul#cakmak li.m2 {display: block; border: 3px solid rgb(251,251,251); width: 95px; background: url(http://2.bp.blogspot.com/-zDQgkgAMYWI/UOw-j-Cm17I/AAAAAAAAB-c/AeeVHv6SjaQ/s1600/icon2.png);}
ul#cakmak li.m3 {border: 3px solid rgb(251,251,251); width: 95px; display: block; float: left; background: url(http://1.bp.blogspot.com/-xd5A81SwiCI/UOw-kLVzw-I/AAAAAAAAB-g/nnGjepOIqwU/s1600/icon3.png)}
ul#cakmak li.m4 {border: 3px solid rgb(251,251,251); width: 95px; display: block; float: left; background: url(http://1.bp.blogspot.com/-ACc3BigGvf4/UOw-lKKpdNI/AAAAAAAAB-w/9P_yXxJ9F7w/s1600/icon4.png)}
ul#cakmak li.m5 {border: 3px solid rgb(251,251,251); width: 95px; display: block; float: left; background: url(http://3.bp.blogspot.com/-GTE3fVaAWWo/UOw-ldEJJdI/AAAAAAAAB-s/eK_KxoIjZQI/s1600/icon5.png)}
ul#cakmak li.m6 {border: 3px solid rgb(251,251,251); width: 95px; display: block; float: left; background: url(http://2.bp.blogspot.com/-hSeZCRaqqRk/UOw-ltAJT6I/AAAAAAAAB-0/ko-q3nNCTi0/s1600/icon6.png)}
ul#cakmak li.m7 {border: 3px solid rgb(251,251,251); width: 95px; display: block; float: left; background: url(http://2.bp.blogspot.com/-0vMuaMLp9jM/UOw-mZr0C4I/AAAAAAAAB-8/AfL6ICFHXpM/s1600/icon7.png)}
ul#cakmak li.m8 {border: 3px solid rgb(251,251,251); width: 95px; display: block; float: left; background: url(http://1.bp.blogspot.com/-KmR-R40CboE/UUX4t-sjpKI/AAAAAAAAC6A/-IObubQb1V8/s1600/wordpress-ico.jpg)}
ul#cakmak li.m9 {border: 3px solid rgb(251,251,251);width: 95px; display: block; float: left; background: url(http://2.bp.blogspot.com/-ykaOnAjBxw4/UOw-m7PFYOI/AAAAAAAAB_I/xw0w_dvjeKc/s1600/icon9.png)}
ul#cakmak li a {display: block; height: 95px; text-indent: -9999px}[/syntax]

Son olarakta  aynı bölümden </body> etiketinden önce aşağıdaki kodu eklemelisiniz.

[syntax type=”html|php|js|css”]<script src=’http://code.jquery.com/jquery-1.8.2.min.js’ type=’text/javascript’/>
<script type=’text/javascript’>
$(function(){
$(&quot;ul#cakmak li&quot;).hover(function(){
$(this).stop().animate({
&#39;background-position-y&#39;: &quot;93px&quot;
}, 400);
}, function(){
$(this).stop().animate({
&#39;background-position-y&#39;: &quot;0&quot;
}, 400);
});
});
</script>[/syntax]

 

İlgili Yazılar

Yorum Yap

  • Erdi Kaya

    güzel site tasarımı .

  • Erdi Kaya

    güzel site tasarımı .