Beautiful Floating Vertical Menu For Blogger Blog

Bagikan ke Google+Tambahkan ke DeliciousTweet dong..Share ke FacebookSubmit ke StumbleUponKirim ke Digg

Vertical menu adalah daftar menu yang ditampilkan dalam bentuk listing dengan posisi vertikal (Dari atas ke bawah atau sebaliknya, dari bawah ke atas). Vertical menu bisa dijadikan salah satu menu alternatif sebagai menu pengganti untuk menu horizontal yang sering kita temukan di bawah atau atas header blog. Pada umumnya, menu vertical di pasang di bagian Sidebar blog, tapi menu vertical yang akan saya berikan pada kesempatan kali ini sangat jauh berbeda dengan menu vertical yang sering sobat blogger temukan. Dimana letak bedanya? berikut ini perbedaan atau kelebihan dari menu vertical yang akan saya share pada kesempatan ini :

1. Vertical menu ditampilkan dalam bentuk Floating, tidak ditampilkan di Sidebar blog
2. Vertical menu ini menggunakan Ikon atau gambar yang cantik
3. Menggunakan perpaduan warna yang indah dan menarik
4. Tidak perlu repot untuk edit template
5. Mudah untuk dikostumisasi
6. Dapat memperindah tampilan blog

---

Cara Membuat Menu Vertical Melayang Di Blog

---

• Sign in di blogger.com
• Pada Menu drop down pilih layout lalu klik Add a gadget
• Pilih HTML/Javascript
• Copy paste kode berikut pada kolom yang tersedia

<style type="text/css">
#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;}
/* CSS Style for Vertical Menu */
#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;
}

*{
/* A universal CSS reset */
margin:0;
padding:0;
}

#navigationMenu body{
font-size:14px;
color:#666;
background:#111 no-repeat;

/* CSS3 Radial Gradients */
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{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;
/* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;
/* CSS3 Transition: */
-webkit-transition: 0.25s;
/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}
#navigationMenu a{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgypIDGepNvx8jcjIEy2nTK8v3F-cV7izvsu2otBZKOQHVSJbJBiFqmBZmY5ixU7J2g3h_1OYWRP1cbfJBhHfGHTu1ezEoqQxqk6IoyOFyhyg9oTyq822IY_GgPNzpm4gHvLYKn3xnlZP2d/s1600/navigation.jpg') no-repeat;
height:39px;
width:38px;
display:block;
position:relative;
}
/* General hover styles */
#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;
/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}
/* Green Button */
#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;
}
/* Blue Button */
#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;
}
/* Orange Button */
#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;
}
/* Yellow Button */
#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;
}
/* Purple Button */
#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;
}
</style>
<p style="display:none;">Vertical Menu by<a href="http://www.tutorialblogspot.com/">Tutorial Blogspot</a></p>
<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="Home" href="http://URL-BLOG-SOBAT.com">
<span>Home</span>
</a>
</li>
<li>
<a class="about" href="http://URL-BLOG-SOBAT.com">
<span>About Us</span>
</a>
</li>
<li>
<a class="categories" href="http://URL-BLOG-SOBAT.com">
<span>Categories</span>
</a>
</li>
<li>
<a class="services" href="http://URL-BLOG-SOBAT.com">
<span>Disclaimer</span>
</a>
</li>
<li>
<a class="contact" href="http://URL-BLOG-SOBAT.com">
<span>Contact</span>
</a>
</li>
</ul>
</div>

• Simpan Menu Vertikal keren yang sudah sobat buat

Tambahan :
Ganti http://URL-BLOG-SOBAT.com dengan URL blog sobat sendiri

Kode untuk membuat menu vertikal di atas di dapat dari bloggertrix.com. Hanya sedikit perubahan yang saya lakukan terhadap kode tersebut. Perubahan kode itu saya lakukan supaya sobat blogger tidak perlu edit template untuk memasang menu vertikal yang cantik ini.