Blogger Hareketli 3D Liste Menü

Blogger Dersleri kategorisinde sizlere bir çok farklı menü yapısı sunmaya çalışıyorum , bunun nedenini daha önce yazdığım Blogger Etikete Bağlı Menü Kullanımı ve Faydaları >> konusunda açıklamaya çalıştım. Bunlara bir yenisi ekliyorum.

Blogger Hareketli 3D Liste Menü Demo

Blogger Hareketli 3D Liste Menü Oluşturmak

1 ) Blogger kumanda paneline gelip Şablon >> HTML'yi Düzenle sekmesiyle kodlarımızı açıyoruz. Widget şablonlarını genişlet kutucuğunu işaretliyoruz.
2 ) Ctrl + F yardımı ile </head> kodunu bularak aşağıdaki kodu hemen üzerine ekliyoruz.

<style type="text/css" media="screen">
      #list{
        margin:0 auto;
        height:200px;
        width:200px;
        overflow:hidden;
        position:relative;
        background-color: #000;}
    #list ul,
    #list li{
        list-style:none;
        margin:0;
        padding:0;}
    #list a{
        position:absolute;
        text-decoration: none;
        color:#666;
        font-size:20px;}
    #list a:hover{
        color:#ccc;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src='http://bloggertrix.googlecode.com/files/cloud2.js' type='text/javascript'/>

Blogger Hareketli 3D Liste Menü Düzenleme :

Kod başında pembe olarak belirlenmiş alan menünün boyutudur, sayısal verilerde değişikliğe giderek menü boyutunu ayarlayabilirsiniz.
Kırmızı değerlik menünün arka fon rengini belirler.
Yeşil olan 20px değerliği yazı fonunun büyüklüğü ayarlamanıza yardımcı olur.
mavi olarak verilmiş değerlikler linklerin rengini belirler . İlk color değeri 666 link rengi , ccc ise linkin üzerine gelince linkin alacağı renk.

Renkler üzerinde değişiklik yapmak isterseniz buradan buyurun : Renk Kodları >>

<div id="list">
    <ul>
        <li><a href="LİNK">MENÜ</a></li>
        <li><a href="LİNK">MENÜ</a></li>
        <li><a href="LİNK">MENÜ</a></li>
        <li><a href="LİNK">MENÜ</a></li>
        <li><a href="LİNK">MENÜ</a></li>
        <li><a href="LİNK">MENÜ</a></li>
        <li><a href="LİNK">MENÜ</a></li>
        <li><a href="LİNK">MENÜ</a></li>
        <li><a href="LİNK">MENÜ</a></li>
        <li><a href="LİNK">MENÜ</a></li>
        <li><a href="LİNK">MENÜ</a></li>
        <li><a href="LİNK">MENÜ</a></li>
        <li><a href="LİNK">MENÜ</a></li>
   
    </ul>
</div>

Blogger Hareketli 3D Liste Menü Kullanımı :

Yukarıdaki Blogger Hareketli 3D Liste Menü kodlarını Gadget Ekle seçeneği ile kullanabilir yada yayınların içine ekleyebilirsiniz.Menü olarak işaretlenmiş alana görünecek içeriği link kısmına ise ulaşmasını eklediğiniz adresi ekleyin.