Sunday, February 2, 2014

Cara Membuat Menu Navigasi Vertical Di Blog

9:57 AM    
Pada Artikel ini kita akan membahas sebuah artikel tentang Menu navigasi berbeda pada menu yang sudah saya bagikan yang berbentuk Horizontal ke samping, Tapi Pada menu ini Dengan Bertuk vertical Dan ke Ke Bawah.
 
Cara Membuat Menu Navigasi Vertical Di Blog


Menu ini Dengan Tampilan yang elegan dan cantik, dengan di tambah sebuah icon petunjunk panah dan warna yang stylish, Yang membuat menu ini tambah Menarik, Menu ini bisa Di Taruh Di samping Kanan atau Kiri artikel, Kalau sudah mengerti langsung saja kita coba membuatnya seperti ini :




  • Pertama Login ke blogger
  • Pergi ke Menu ''Tata Letak'' >> ''Tambah Gadget''
  • Cari Gadget ''HTML/JavaScript''
  • Masukanlah kode dibawah ini, di dalam gadget tersebut

<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/AVvXsEj8Ph_gVuEL4AhIHSICOSF6KT6ceKF8CLBYPB8XN8gIC7EfbqSPDsbhyphenhyphen7-X9Gq8x8zznoIBrfcFnJfW1CNoA4WURzdU7uE48IGu4pA5380SVqHzZkShyphenhyphen9joXfMubYWKjjVQC29dLn2vAtn3/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/AVvXsEjkzkH-HGnP0OxttahtR1Rr4-0K4ThIbXwnOGAx5nTi-6BCacnVpbSiu9EZOlLxSlnsalkzwKQn8Gfel8Cmfz5M_ofSCUX3-icWuG8eJPZqCTOUSGGI3_Y8TFt_0FLfDdOoHpWQGBy_5qb2/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/AVvXsEjkzkH-HGnP0OxttahtR1Rr4-0K4ThIbXwnOGAx5nTi-6BCacnVpbSiu9EZOlLxSlnsalkzwKQn8Gfel8Cmfz5M_ofSCUX3-icWuG8eJPZqCTOUSGGI3_Y8TFt_0FLfDdOoHpWQGBy_5qb2/s1600/hover-bg.png) no-repeat;    
}
#v-menu a:active { 
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkzkH-HGnP0OxttahtR1Rr4-0K4ThIbXwnOGAx5nTi-6BCacnVpbSiu9EZOlLxSlnsalkzwKQn8Gfel8Cmfz5M_ofSCUX3-icWuG8eJPZqCTOUSGGI3_Y8TFt_0FLfDdOoHpWQGBy_5qb2/s1600/hover-bg.png) no-repeat;    
} 
</style>
<div id='v-menu'> 
<ul> 
<li><a href="#">Home</a></li> 
<li><a href="#">Widgets</a></li> 
<li><a href="#">SEO</a></li> 
<li><a href="#">Adsense</a></li> 
<li><a href="#">Templates</a></li> 
<li><a href="#">Applications</a></li> 
</ul> 
</div>


  • Setelah itu, Ganti # Dengan url yang ingin di tuju
  • Ganti juga, Home, Widget, Seo Dan Lain Lain, Dengan Nama menu yang anda inginkan
  • Setelah Selesai, Sekarang klik ''Simpan''


Gimana Tertarik dan Mudah kan Artikelnya ? Demikianlah artikel yang baru saya bagikan ini, Semoga artikel ini berguna dan mudah di pratekkan. terima kasih.
Comments
0 Comment