Thursday, July 12, 2012

Cara Membuat Menu Navigasi Vertikal di Blogger

By Sriudin sahrudin   Posted at  5:47 AM   tips dan trik No comments

Trik Blog Cara 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.
Cara 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://ardiyantobay.blogspot.com/search/label/Android">Android</a></li>
<li><a href="http://ardiyantobay.blogspot.com/search/label/cheat">Cheat</a></li>
<li><a href="http://ardiyantobay.blogspot.com/search/label/game">Game</a></li>
<li><a href="http://ardiyantobay.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

NB: Ukuran dan warna bisa anda sesuaikan menurut selera anda

Selamat mencoba semoga artikel tersebut bermanfaat untuk anda
Bayu Ardiyanto Review Rating: 85 out of 100 based on199854 reviews.

About the Author

Nulla sagittis convallis arcu. Sed sed nunc. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo.
View all posts by: BT9

0 komentar:

Back to top ↑
Connect with Us

What they says

© 2013 BLOG SI PALUI. WP Mythemeshop Converted by Bloggertheme9
Blogger templates. Proudly Powered by Blogger.