Menu Vertikal Hover Style

Kali ini saya akan jelaskan bagaimana memasang menu vertikal hover style. Menu vertikal ini mempunyai keunikan tersendiri dengan adanya hover aktif ketika mouse bersentuhan dengan widget tersebut. Disamping itu menu vertikal dengan hover style ini ditampilkan dengan beberapa warna, sehingga membuat tampilannya lebih menarik. Baiklah, sekarang mari kita bahas cara pasang menu vertikal hover style di blogspot. Ikuti langkah berikut.
Log in ke blogger
Klik Rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya

<style>
.StarsBloggingSocialButtonsBorder{margin:0 auto; padding:5px; width:auto; border-radius:5px; border:1px #BBB solid}
#blogonol-SexySocialButtons{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif}
#blogonol-SexySocialButtons a{text-decoration:none; font-family:trebuchet ms,sans-serif}
#blogonol-SexySocialButtons li{position:relative; height:38px; cursor:pointer; padding:0 !important}
#blogonol-SexySocialButtons .facebook, .googleplus, .YouTube, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:5px 0 0; width:210px; height:38px; border-radius:5px; background:url(http://1.bp.blogspot.com/-JKq0eFFwx34/UGx39fhHO_I/AAAAAAAABE4/56i9phAS2do/s1600/NBT+Sprites+Social+Icons.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px}
#blogonol-SexySocialButtons li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#fff; content:attr(data-alt); line-height:32px}
#blogonol-SexySocialButtons .icon{overflow:hidden; color:#fafafa}
#blogonol-SexySocialButtons .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0}
#blogonol-SexySocialButtons .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px}
#blogonol-SexySocialButtons .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px}
#blogonol-SexySocialButtons .YouTube{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:-2px -95px}
#blogonol-SexySocialButtons .rss{width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px}
#blogonol-SexySocialButtons li:hover .icon,
.touch #blogonol-SexySocialButtons li .icon{width:210px}
.touch #blogonol-SexySocialButtons li .facebook, #blogonol-SexySocialButtons li:hover .facebook{background-color:rgba(59,89,152,1)}
.touch #blogonol-SexySocialButtons li .twitter, #blogonol-SexySocialButtons li:hover .twitter{background-color:rgba(64,153,255,1)}
.touch #blogonol-SexySocialButtons li .googleplus, #blogonol-SexySocialButtons li:hover .googleplus{background-color:rgba(228,69,36,1)}
.touch #blogonol-SexySocialButtons li .YouTube, #blogonol-SexySocialButtons li:hover .YouTube{background-color:rgba(174,45,39,1)}
.touch #blogonol-SexySocialButtons li .rss, #blogonol-SexySocialButtons li:hover .rss{background-color:rgba(255,102,0,1)}
</style>
<div class="blogonolSocialButtonsBorder">
<ul id="blogonol-SexySocialButtons">
<li data-alt="Joint Me on Facebook"><a class="icon facebook"href="https://www.facebook.com/USERNAME">Joint Me on Facebook</a></li>
<li data-alt="Joint Me on Twitter"><a class="icon twitter"href="https://twitter.com/USERNAME">Joint Me on Twitter</a></li>
<li data-alt="Joint Me on Google+"><a class="icon googleplus"href="https://plus.google.com/ID ANDA">Joint Me on Google+</a></li>
<li data-alt="Joint Me on YouTube"><a class="icon YouTube"href="https://youtube.com/USERNAME">Joint Me on YouTube</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss"href="http://feeds.feedburner.com/USERNAME">Subscribe with RSS</a></li></ul></div>

Selanjutnya klik Simpan dan lihat hasilnya
Kalau mau membuat widgetnya melayang (float), gunakan atau tambahkan kode di bawah ini

<style type='text/css'>
#ngapung{position:fixed; _position:absolute; bottom:0px; left:0px; clip:inherit; _top:expression
(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight); _left:expression
(document.documentElement.scrollLeft+document.documentElement.clientWidth - offsetWidth)}
</style>
<div id='ngapung'>
MASUKKAN KODE WIDGET DI SINI
</div>

Demikian tutorial cara pasang menu vertikal hover style. Semoga bermanfaat bagi kita semua. Amin. Selamat mencoba dan sukses selalu.

"keep spirits and do the best"