Cara Membuat MenuVertical - Pada tutorial kali ini Tipsblogbaru mau berbagi tentang cara membuat menu navigasi dropdown vertikal. Caranya cukup mudah hanya tinggal memasukkan kode script berikut ini. Menu vertikal ini cukup unik karena akan bergeser turun saat cursor mouse diarahkan ke menu.
Widget ini juga berfungsi untuk mempercantik blog, dan merapikan tampilan blog agar tidak penuh dengan teks artikel yang menempel sehingga membuat blog terasa sumpek, biasanya di sederhanakan dengan tampilan menu dropdown horizontal bawah header atau dengan menu dropdown vertikal di sidebar. Adapun cara membuat menu dropdown vertikal di sidebar untuk mempercantik blog anda bisa di copy scriptnya di bawah ini. diatas adalah contoh gambar menu dropdown vertical.
Jika sobat tertarik, berikut Langkah-langkahnya.
Cara Membuat Menu Vertical Keren di Blog
1. Masuk Ke akun blogger seperti biasanya.
2. Klik Template => Edit HTML
3. Cari Kode ]]></b:skin> atau Kode </style> jika template menggunakan </style>
4. Masukkan Kode Berikut diatas kode ]]></b:skin>
.vertical { font-size:13px; line-height:30px; font-weight:700; border:1px solid #1d1d1d; border-radius:1px; } .vertical>ul { margin:0; padding:0; }
.vertical ul,.vertical li { list-style:none; }
.vertical>ul>li { background:#292929; margin:0;text-transform:uppercase;padding:0;color:#fff;}
.vertical>ul>li:hover {background:#4B4B4B}
.vertical>ul>li a{color:#fff} .vertical>ul>li ul { transition:.3s ease-out; opacity:0; margin:0; padding:0; } .vertical>ul>li li { background:#efefef;}
.vertical>ul>li li a{color:#333;text-transform:none}
.vertical a { display:block; text-align:center; text-decoration:none!important; }
.vertical>ul>li>a { border-top:1px solid #353535; border-bottom:1px solid #161616;}
.vertical>ul>li ul li a { height:0; transition:.3s ease-out}
.vertical>ul>li:hover ul li a { height:30px; }
.vertical>ul>li:hover ul { opacity:1; }
.vertical > ul > li li:hover { box-shadow:inset 0 1px #4077CB,inset 0 -1px #4077cb; background:#3e6db5;}
.vertical > ul > li li:hover a{color:#fff }
5. Simpan dulu template sobat.
6. Silahkan sobat menuju ke Tata Letak ==> add gadget ==> HTML/javascript.
7. Masukkan Kode berikut ini:
<div class='vertical'>
<ul>
<li><a href='/' title='Menu1'>Menu 1</a>
<ul>
<li><a href='/' title='Sub Menu1'>Sub1 Menu1</a></li>
<li><a href='/' title='Sub Menu1'>Sub2 Menu1</a></li>
<li><a href='/' title='Sub Menu1'>Sub3 Menu1</a></li>
<li><a href='/' title='Sub Menu1'>Sub4 Menu1</a></li>
<li><a href='/' title='Sub Menu1'>Sub5 Menu1</a></li>
<li><a href='/' title='Sub Menu1'>Sub6 Menu1</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href='/' title='Menu2'>Menu 2</a>
<ul>
<li><a href='/' title='Sub1 Menu2'>Sub1 Menu2</a></li>
<li><a href='/' title='Sub2 Menu2'>Sub2 Menu2</a></li>
<li><a href='/' title='Sub3 Menu2'>Sub3 Menu2</a></li>
<li><a href='/' title='Sub4 Menu2'>Sub4 Menu2</a></li>
<li><a href='/' title='Sub5 Menu2'>Sub5 Menu2</a></li>
<li><a href='/' title='Sub6 Menu2'>Sub6 Menu2</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href='/' title='Menu3'>Menu 3</a>
<ul>
<li><a href='/' title='Sub1 Menu3'>Sub1 Menu3</a></li>
<li><a href='/' title='Sub2 Menu3'>Sub2 Menu3</a></li>
<li><a href='/' title='Sub3 Menu3'>Sub3 Menu3</a></li>
<li><a href='/' title='Sub4 Menu3'>Sub4 Menu3</a></li>
<li><a href='/' title='Sub5 Menu3'>Sub5 Menu3</a></li>
<li><a href='/' title='Sub6 Menu3'>Sub6 Menu3</a></li>
</ul>
</li>
</ul>
</div>
8. Save template sobat dan lihat hasinya.
9. Jangan lupa untuk mengganti menu sesuai keinginan sobat.
Dimohon kerjasamanya untuk tidak menyertakan link aktif dalam komentar. Lihat penjelasan mengenai tata cara berkomentar Disini