Blogger Hareketli 3D Liste Menü

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.

Tweet