Vertical Side Menu Cantik

Horizontal side menu adalah widget navigasi yang terletak di sisi template suatu situs atau blog. Widget ini sama fungsinya dengan menu navigasi lainnya, namun bentuk dan tampilannya cantik dan menarik untuk dipasang diblog anda. Widget ini juga menggunakan CSS3 disertai efek hover untuk menambah gaya dan tingkat atraksi, sehingga membuat tampilannya berbeda dengan lainnya. Baiklah, sekarang mari kita bahas cara pasang horizontal side menu cantik, ikuti langkah berikut.

Log in ke blog
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode ]]></b:skin>

#hor{list-style:none; padding:0; margin:0}
#hor li{float:left; padding:5px}
#hor a{display:block; height:12px; text-indent:-999em}
#hor a.home{width:46px; background:url(vHome.gif) no-repeat 0 0}
#hor a.download{width:94px; background:url(vDownload.gif) no-repeat 0 0}
#hor a.contact{width:74px; background:url(vContact.gif) no-repeat 0 0}
#ver{list-style:none; padding:0; margin:0}
#ver li{padding:2px}
#ver li a{display:block; height:12px; text-indent:-999em}
#ver a.home{width:47px; background:url(hHome.gif) no-repeat 0 0}
#ver a.download{width:95px; background:url(hDownload.gif) no-repeat 0 0}
#ver a.contact{width:74px; background:url(hContact.gif) no-repeat 0 0}
.clear{clear:both}
*{margin:0; padding:0}
#navigationMenu body{font-size:14px; color:#666; background:#111 no-repeat; background-image:-moz-radial-gradient(center -100px 45deg,circle farthest-corner,#444 150px,#111 300px); background-image:-webkit-gradient(radial,50% 0,150,50% 0,300,from(#444),to(#111)); font-family:Arial,Helvetica,sans-serif}
#navigationMenu li{list-style:none; height:39px; padding:2px; width:40px}
#navigationMenu span{width:0; left:38px; padding:0; position:absolute; overflow:hidden; font-family:'Myriad Pro',Arial,Helvetica,sans-serif; font-size:18px; font-weight:bold; letter-spacing:0.6px; white-space:nowrap; line-height:39px; -webkit-transition:0.25s; -moz-transition:0.25s; transition:0.25s}
#navigationMenu a{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKig12bADblqtJv3R_IcPzIuLxW7tuObTl5SPCRlRJ_vQcpvKvMB7HL42KGtNinY2XQ0FIoJm9LGlmpmWAga3UNSZK-13PEC5CYctPTf1sE8byUnMlF-qD7u4uurlPqQIa3MEemyuigno/s1600/navigation.jpg') no-repeat; height:39px; width:38px; display:block; position:relative}
#navigationMenu a:hover span{width:auto; padding:0 20px; overflow:visible}
#navigationMenu a:hover{text-decoration:none; -moz-box-shadow:0 0 5px #9ddff5; -webkit-box-shadow:0 0 5px #9ddff5; box-shadow:0 0 5px #9ddff5}
#navigationMenu .home{background-position:0 0}
#navigationMenu .home:hover{background-position:0 -39px}
#navigationMenu .home span{background-color:#7da315; color:#3d4f0c; text-shadow:1px 1px 0 #99bf31}
#navigationMenu .about{background-position:-38px 0}
#navigationMenu .about:hover{background-position:-38px -39px}
#navigationMenu .about span{background-color:#1e8bb4; color:#223a44; text-shadow:1px 1px 0 #44a8d0}
#navigationMenu .services{background-position:-76px 0}
#navigationMenu .services:hover{background-position:-76px -39px}
#navigationMenu .services span{background-color:#c86c1f; color:#5a3517; text-shadow:1px 1px 0 #d28344}
#navigationMenu .portfolio{background-position:-114px 0}
#navigationMenu .portfolio:hover{background-position:-114px -39px}
#navigationMenu .portfolio span{background-color:#d0a525; color:#604e18; text-shadow:1px 1px 0 #d8b54b}
#navigationMenu .contact{background-position:-152px 0}
#navigationMenu .contact:hover{background-position:-152px -39px}
#navigationMenu .contact span{background-color:#af1e83; color:#460f35; text-shadow:1px 1px 0 #d244a6}

Selanjutnya klik Simpan Template
Klik Lagi Rancangan
Klik Tambah Gadget
Pilih HTML/ JavaScript
Masukkan kode berikut ke dalamnya

<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="Home" href="http://blogonol.blogspot.com">
<span>Beranda</span>
</a>
</li>

<li>
<a class="about" href="https://plus.google.com/107364748346710480266" target="_blank">
<span>About</span>
</a>
</li>

<li>
<a class="services" href="http://blogonol.blogspot.com/2011/06/cara-edit-template-agar-seo-friendly.html" target="_blank">
<span>Edit Template</span>
</a>

</li>

<li>
<a class="daftar isi" href="http://blogonol.blogspot.com/p/daftar-isi.html" target"_blank">
<span>Daftar Isi</span>
</a>
</li>

<li>
<a class="contact" href="http://www.emailmeform.com/builder/form/94racspOd2Vq3QCcFX7geJ" target="_blank">

<span>Contact Me</span>
</a>
</li>
</ul>
</div><a href="http://blogonol.blogspot.com/" target="_blank"><small>by blogonol | blogger tutorial</small></a>

Ganti url yang dicetak tebal hitam dengan alamat link yang dimiliki. Sedangkan url yang dicetak tebal merah saya sarankan digunakan saja, karena itu merupakan daftar isi dari blogonol. Ini akan memudahkan jika ingin mempelajari modifikasi blog atau berkreasi dengan beberapa tutorial dari blogonol.

Selanjutnya klik Simpan dan tempatkan ditempat yang diinginkan. Demikian tutorial cara pasang horizontal side menu cantik, semoga bermanfaat. Selamat mencoba dan sukses selalu.

"keep spirits and do the best"