Memasang Menu Vertikal Hover Style Keren Di Blog

Assalamualaikum Wr. Wb.

     Setelah saya kemarin membagikan Software Glary Utilities Versi Terbaru,maka kali ini saya akan membagikan sebuah Tutorial Blog, yaitu Memasang Menu Vertikal Hover Style Keren Di Blog. Oke, berikut sedikit mengenai Menu Vertikal Hover Style.

Mengenai 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. Tak usah panjang lebar dan sekarang mari kita bahas cara pasang Menu Vertikal Hover Style di blogspot. Berikut Langkah - Langkahnya :

Cara Memasang Menu Vertikal Hover Style Di Blog :

• Tentunya sobat harus login ke aku Blogger :D
• Pilih Blog yang akan di isi Menu ini
• Pilih Tata Letak
• Klik Add a Gadget atau Tambahkan Gadget
• Setelah itu Masukkan Kode berikut ke dalamnya

Ctrl + C Untuk Meng Copy

<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>

Keterangan :

• Silahkan ubah Username atau ID Anda sesuai dengan data data Sobat :)

     Sekian Tutorial Blog yang saya bagikan kepada para sobat sekalian ^o^)~ semoga Tutorial ini bermanfaat bagi anda semua ;) Sampai jumpa kembali ^o^)~

Wassalamualaikum Wr. Wb.

Artikel Terkait

^0^)~ YIS Backlinks ~(^o^

URL

Code For Forum

HTML Code <a href='http://yogismr.blogspot.com/2013/06/memasang-menu-vertikal-hover-style.html' target='_blank'>Memasang Menu Vertikal Hover Style Keren Di Blog</a>