Membuat Menu Navigasi Vertikal di Blog

Membuat Menu Navigasi Vertikal di Blogger - Menu navigasi sangat berperan penting Untuk memudahkan pengunjung dalam menjelajahi blog kita, namun sayangnya template default blogger/blogspot tidak menyediakan plugin otomatis untuk membuat menu navigasi.

Namun jangan khawatir sebab telah banyak blog yang membahas tentang cara pemasangan atau cara membuat menu navigasi Horisontal maupun Vertikal secara manual pada blog.

Nah pada kesempatan kali ini saya ingin berbagi sebuah artikel tentang cara membuat menu navigasi vertikal pada blog.

Untuk membuatnya ikuti langkah-langkah berikut ini:

• Pertama-tama masuklah ke akun blogger milik anda
• Kemudian Pilih Rancangan/Tata Letak
• Lalu Klik tambah gadget , Pilih Html/Javascript
• Selanjutnya Copy dan Pastekan kode dibawah ini kedalam kolom yang telah disediakan

<style>
.menu-vertikal, .menu-vertikal li ul{list-style-type: none;margin: 0px;width: 145px; /*Lebar Menu*/border: 1px solid black;}
.menu-vertikal li{position: relative;}
.menu-vertikal li a{background: #145A9C;font: bold 12px Verdana, Helvetica, sans-serif;color: #FFFFFF;display: block;width: auto;padding: 5px 0;padding-left: 10px;text-decoration: none;}
.menu-vertikal li ul{position: absolute;width: 250px;display: none;}
.menu-vertikal li ul li{float: left;}
.menu-vertikal li ul a{width: 145px;}
.menu-vertikal li a:visited, .glossymenu li a:active{color: white;}
.menu-vertikal li a:hover{background: #0E3860;}
* html .menu-vertikal li { float: left; height: 1%; }
* html .menu-vertikal li a { height: 1%; }
</style>
<ul id="verticalmenu" class="menu-vertikal">
<li><a href="http://pasid-xp.blogspot.com/search/label/Sidimpuan%20Sumut">Sidimpuan</a></li>
<li><a href="http://pasid-xp.blogspot.com/search/label/Info%20Bisnis">Bisnis</a></li>
<li><a href="http://pasid-xp.blogspot.com/search/label/game">Game</a></li>
<li><a href="http://pasid-xp.blogspot.com/search/label/software">Software</a></li>
</ul>

• Namun sebelumnya ubah terlebih dahulu url link sesuai dengan kategori blog anda
• Terakhir simpan dan lihat hasilnya

Keterangan: Ukuran dan warna bisa anda sesuaikan menurut selera anda
Selamat mencoba semoga artikel tersebut bermanfaat untuk anda

Rating Artikel : 5 Jumlah Voting : 99 Orang