Teknoloji

Mobil

Sosyal

Oyun

Blogger Dikey Menü Eklentisi

  • 26 Mart 2014
  • Yazar Yunus Balım
  • 0 Yorum
Blogger Dikey Menü Eklentisi
Blogger için bu eklenti dikey tarzında ve bir çok blog içinde vazgeçilmez olduğunu düşünüyorum.Bu Dikey menüden yanı sıra blogumda yatay eklentilerde mevcut ama blog tarzı veya stili dikey menü için uygun olan arkadaşların işini göreceğini düşünüyorum.Eklenti sadece bir adımda çok kolay ekleyebileceğiniz bir eklentidir.Şimdi nasıl ekleyeceğimize gelelim.


Yerleşim Tıklıyoruz > Gatget Ekle > HTML/JavaScript dedikten sonra aşağıdaki kodları içersine yerleştiriyoruz.


<style>
#v-menu { 
    margin: 0; 
    padding: 0; 
    font-family: Verdana, Helvetica, Arial, sans-serif; 
}
#v-menu { 
    width: 275px; 
}
#v-menu ul { 
    list-style: none; 
    text-indent: 0px; 
}
#v-menu li { 
    margin-top: 0px; 
    border-bottom: 1px solid #414141; 
}
#v-menu a { 
    font-family:Verdana, Geneva, sans-serif; 
    font-size: 15px; 
    font-weight:bold; 
    font-variant: inherit; 
    text-transform:uppercase; 
    padding: 0px; 
    color:#CCC; 
    display: block; 
    padding: 13px 50px; 
    height: 26px; 
    line-height: 26px; 
    text-decoration: none; 
    background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2yX88p9mBOZnxZqGT9xRg3ELysqbtxVP9TH7nGlL3pjHb6X4TtXgB-2IDvtpzdyaHTVcPXmMHQ4O4ogkG1YuLVteNd6yW9_ovUv352XBYvFqwp_vQfxuvLt_rEK6H30SNkEgh6Ac3xM5X/s1600/menu-bg.png) no-repeat; 
    text-shadow: 1px 1px 1px #111; 
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715); 
}
#v-menu a:hover { 
    background: #5e5e5e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHJ7Er5y_BVolp4qiCB_38S_MxhgT2I3HFS6Uzf2bpwfTrWizo5anb69dKdqKO9e_qkSK54MOmSdzuIYtqD868hL_v8essuHn_Y9FbzLpMg2KMOmEeCpkCBYcsyDsyql2b6Eb8ZpyRrnZZ/s1600/hover-bg.png) no-repeat; 
    font-size: 14px; 
    padding: 13px 60px; 
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);   
}
#v-menu a:visited {    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHJ7Er5y_BVolp4qiCB_38S_MxhgT2I3HFS6Uzf2bpwfTrWizo5anb69dKdqKO9e_qkSK54MOmSdzuIYtqD868hL_v8essuHn_Y9FbzLpMg2KMOmEeCpkCBYcsyDsyql2b6Eb8ZpyRrnZZ/s1600/hover-bg.png) no-repeat;    
}
#v-menu a:active {    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHJ7Er5y_BVolp4qiCB_38S_MxhgT2I3HFS6Uzf2bpwfTrWizo5anb69dKdqKO9e_qkSK54MOmSdzuIYtqD868hL_v8essuHn_Y9FbzLpMg2KMOmEeCpkCBYcsyDsyql2b6Eb8ZpyRrnZZ/s1600/hover-bg.png) no-repeat;    
} 
</style>
<div id='v-menu'> 
<ul> 
<li><a href="Buraya Bağlantı Linkini Yapıştırın">Ana Sayfa</a></li> 
<li><a href="Buraya Bağlantı Linkini Yapıştırın">Arşiv</a></li> 
<li><a href="Buraya Bağlantı Linkini Yapıştırın">SEO</a></li> 
<li><a href="Buraya Bağlantı Linkini Yapıştırın">Witget</a></li> 
<li><a href="Buraya Bağlantı Linkini Yapıştırın">Hakkımda</a></li> 
<li><a href="Buraya Bağlantı Linkini Yapıştırın">İletişim</a></li> 
</ul> 
</div>

Yukarıdaki kod içersinde değişiklik yapacağınız yer kodun en altında olan bölümdür menü seçeneğini kendiniz belirleyebilirsiniz ve menüye link vermeyi unutmayınız.

Yunus Balım

Teknoloji,Sosyal ağlar,Blogger Temaları,Blogger Eklentileri paylaşılan bir blog..

Hiç yorum yok:

Yorum Yazın

İstatistikler

Blog Arşivi