Cara Membuat Vertical Menu dengan Efek CSS Tranform

Setelah sebelumnya saya memberikan dua buah tutorial membuat horizontal menu, masih seputar menu navigasi, kali ini saya berikan untuk anda tutorial membuat menu navigasi vertical sebagai variasi tautan menuju label di blog anda yang dapat anda tempatkan di sidebar, salah satu kolom footer, maupun anda buat mengambang di samping layout blog anda.

Menu navigasi vertical

Kebetulan saya belum mempunyai nama untuk menamai menu navigasi vertical ini, yang dapat anda lihat di demo vertical menu , jika anda mempunyai inspirasi untuk menamai menu vertical tersebut, silahkan anda usulkan di kotak komentar.
Untuk sementara, saya akan menamai navigasi vertical ini Stick Vertical Menu.

Cara Membuat menu navigasi vertical.

Untuk anda yang tertarik memasang menu navigasi vertical, silahkan anda menuju ke menu edit HTML blog anda. Cari kode ]]></b:skin> , lalu pastekan kode CSS berikut di atas ]]></b:skin>

.stik{list-style-type: none;margin: 0 auto;padding: 2px;width: 247px;}
.stik li a{display: block;width: 220px;margin-top:2px;padding: 2px 3px 2px 10px;font-weight: bold;background-color: transparent;border: 2px solid gray;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;text-decoration:none;}
.stik li a:hover{color: #fff;text-decoration:none;margin-top:10px;background-color:#00ff00;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#fa0808', endColorstr='#00ff00');background-image:-webkit-linear-gradient(left, #fa0808 0%, #ffff00 50%, #00ff00 100%);background-image:-moz-linear-gradient(left, #fa0808 0%, #ffff00 50%, #00ff00 100%);background-image:-ms-linear-gradient(left, #fa0808 0%, #ffff00 50%, #00ff00 100%);background-image:-o-linear-gradient(left, #fa0808 0%, #ffff00 50%, #00ff00 100%);background-image:linear-gradient(left, #fa0808 0%, #ffff00 50%, #00ff00 100%);
border: 2px inset gray;transform:rotate(-6deg);-ms-transform:rotate(-6deg);-moz-transform:rotate(-6deg);-webkit-transform:rotate(-6deg);-o-transform:rotate(-6deg);}

Lalu simpan template anda.

Selanjutnya, silahkan anda menuju ke menu tata letak di blog anda.

Lalu tambahkan gadget dimanapun anda ingin menempatkan menu navigasi vertical ini, pilih HTML/Javascript , kemudian anda pastekan kode berikut,

<ul class="stik">
<li><a href="#" >Tautan 1</a></li>
<li><a href="#" >Tautan 2</a></li>
<li><a href="#">Tautan 3</a></li>
<li><a href="#">Tautan 4</a></li>
<li><a href="#">Tautan 5</a></li>
<li><a href="#">Tautan 6</a></li>
</ul>

Silahkan rubah tulisan berwarna merah dengan tautan dan anchor text yang sesuai dengan label blog anda kemudian simpan dan lihat hasil pemasangan menu navigasi vertical ini di homepage blog anda.
Semoga bermanfaat dan jangan lupa berikan komentar, terima kasih.

Artikel Cara Membuat Vertical Menu dengan Efek CSS Tranform ini 100% bukan hasil copy paste
Dibaca oleh12606 pembaca dari 12727 pengunjung.
Ditulis Oleh Unknown
Semua artikel terproteksi DMCA.
Hanya script dan kode tutorial yang boleh di copy paste, dengan menyertakan sumbernya.
Artikel The Art of SEO lainnya bisa anda temukan pada menu related post berikut ;