Cara Pasang Menu Vertikal Di Blog

Assalamualaikum.wr.wb. Kali ini saya akan posting tentang Cara Pasang Menu Vertikal Di Blog. Menu ini berbeda dengan menu horizontal yang biasanya kita liat di bagian atas blog saat ini, widget  ini bisa kita tempatkan di bagian samping blog kita dan akan megikuti jika kita scroll blog ke bawah (sticky widget ) . Sebenarnya fungsi utama dari widget ini adalah :

• 1.Memudahkan agar anda bisa memilih menu tanpa harus kembali naik ke atas
• 2.Mmemperindah blog anda

Jika anda ingin melihat demo klik dibawah ini

menu vertikal demo

Cara Pemasangan

• 1.buka blogger > blog anda
• 2.tata letak      > tambahkan widget
• 3.html/javascript
• 4.pastekan kode dibawah ini

<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/AVvXsEhuFuVrltp93tvIsA9cR041JptzcCQc51_uJ04uyiwRqvI7q2ftsSypN0VLaH8zGkO4Z_qMiKYxrTNqgKVyAhSpyaorENcOrQq2noQTKrQXGUESr8gVYdu5Cj3XwAGKYUc3tz48uAPvqbAo/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>JUDULMENU</span>
</a>
</li>
<li>
<a class="about" href="http://URL-BLOG-SOBAT.com">
<span>JUDULMENU</span>
</a>
</li>
<li>
<a class="categories" href="http://URL-BLOG-SOBAT.com">
<span>JUDULMENU</span>
</a>
</li>
<li>
<a class="services" href="http://URL-BLOG-SOBAT.com">
<span>JUDULMENU</span>
</a>
</li>
<li>
<a class="contact" href="http://URL-BLOG-SOBAT.com">
<span>JUDULMENU</span>
</a>
</li>
</ul>
</div>

• 5.lalu ubah kode http://URL-BLOG-SOBAT.com dengan url tujuan anda
• 6.ubah juga kode JUDULMENU untuk mengubah dan memberi nama menu anda

• 7.simpan

Jika ada yang ingin agan tanyakan silahkan ada yang ingin tanyakan silahkan berkomentar di postingan ini