Cara membuat menu Vertikal di Blogspot

Sobat blogger !!

Sudah saya ulas sebelumnya di postingan saya  yang berjudul cara membuat menu horizontal bahwa membuat menu pada blog adalah merupakan keharusan karena akan berdampak pada kemudahan pengunjung menelusuri blog kita,

so kali ini akan saya uraiakan (benang kusut kali he..he) langkah-langkah pembuatan menu Vertikal :

• Login ke blog anda > Klik Design
• Add a gadged dan pilih HTML / javascript
• Penempatan gadged atau widget tepatnya pada sidebar kanan atau kiri, karena menu ini vertikal dan tentunya susunan menunya kebawah.
• Copy kode berikut dan paste pada gadged tsb

<style>
.menu-vertikal, .menu-vertikal li ul{list-style-type: none;margin: 5px;width: 250px; /*Lebar Menu*/border: 1px solid black;}
.menu-vertikal li{position: relative;}
.menu-vertikal li a{background: #000000;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: 250px;}
.menu-vertikal li a:visited, .glossymenu li a:active{color: white;}
.menu-vertikal li a:hover{background: #454545;}
* 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="/">Home</a></li>
<li><a href="http://Link1">Menu1</a></li>
<li><a href="http://Link2">Menu2</a></li>
<li><a href="http://Link3">Menu3</a></li>
</ul>

Kemudian Save

Note :

• Ganti Link1, Link2, Link3 dan Menu1, Menu2, Menu3 sesuai keinginan sobat. yang     saya contohkan hanya 4 menu dengan Home. Jika ingin menambah, silahkan di tambahi dibawah sendiri ya <li><a href="http://Link4">Menu4</a></li> dan seterusnya.
• Kode berwarna Hijau adalah lebar menu dan list menu, silahkan anda sesuaikan dengan lebar widget sidebar blog anda.
• Kode berwarna Piru adalah warna background menu Vertikal
• Kode dengan warna Orange adalah warna tulisan dan bisa anda rubah sendiri
• Kode berwarna Pink adalah warna hover background menu vertikal tersebut. Maksudnya warna background apabila mouse di arahkan pada menu tersebut.

Demikianlah uraian saya kali ini tentang cara membuat menu vertikal semoga bermanfaat....amin 
Sumber :  Cara membuat menu Vertikal di Blogspot

NOTE : Silahkan sobat copy paste dan menyebarluaskan postingan ini dengan ketentuan sebagai berikut :

• Sebelum Copy paste Sebaikanya  sobat sedikit merubah kalimat pembuka atau yang lainnya di postingan sobat , agar tidak Menjadi Duplikat Content 
• Atas perhatian dan kunjungannya saya ucapkan terima kasih, dan jangan lupa beri kritik dan saran pada kotak komentar ya....

Related Post: