Cara Membuat Menu Vertikal di Blog

Cara Membuat Menu Vertikal di Blog

Cara Membuat Menu Vertikal di Blog-Hai bloggers,Kali ini admin akan memberi tahu cara membuat Menu Vertikal Di Blog,Cara ini adalah untuk mempercantik blog agar banyak pengunjung ,Mari Simak bersama-sama caranya.

• Login blogger id sobat
• Pilih Template
• Edit HTML
• Backup/Download Template agar tidak ada kesalahan dalam mengedit
• Cari Code ]]></b:skin> (CTRL+F AGAR MEMPERMUDAH PENCARIAN) Kemudian Letakkan kode di bawah ini TEPAT di Atas kode ]]></b:skin>

/* Start Menu Vertikal*/
*{ list-style:none; margin:0px; padding:0px;}
#menu4 { width: 200px; border-style: solid solid none solid; border-color: #D76100; border-size: 0px; border-width: 0px; }
#menu4 li a {   height: 32px;   voice-family: "\"}\"";   voice-family: inherit;   height: 24px; text-decoration: none; }
#menu4 li a:link, #menu4 li a:visited { color: #9E3C02; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw1gCrL3NB9vL3eK-KUIj6bxhx2CiLeF5H13-eUhd1HmrLdBttYn4jKW64T-4oc-o1NZd66viZZfTxb_EVLCGlaamlghesX7qenX9qKZjkzcmQKwDvg02jgiROcQFX_GCMVTk6P3qFyx8/s1600/menu4.gif); padding: 8px 0px 0px 30px; }
#menu4 li a:hover { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw1gCrL3NB9vL3eK-KUIj6bxhx2CiLeF5H13-eUhd1HmrLdBttYn4jKW64T-4oc-o1NZd66viZZfTxb_EVLCGlaamlghesX7qenX9qKZjkzcmQKwDvg02jgiROcQFX_GCMVTk6P3qFyx8/s1600/menu4.gif) 0 -32px; padding: 8px 0 0 30px; }
#menu4 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw1gCrL3NB9vL3eK-KUIj6bxhx2CiLeF5H13-eUhd1HmrLdBttYn4jKW64T-4oc-o1NZd66viZZfTxb_EVLCGlaamlghesX7qenX9qKZjkzcmQKwDvg02jgiROcQFX_GCMVTk6P3qFyx8/s1600/menu4.gif) 0 -64px; padding: 8px 0 0 30px; }/* End Menu Vertikal*/

• Klik "Simpan Template"
• Pilih "Tata Letak" -> Klik "Tambah Gadget"
• Pilih "HTML/JavaScript
• Kemudian Copy code dibawah ini di widget JavaScript

<div id="menu4">
 <ul>
   <li><a href="#1" title="Home">Home</a></li>
   <li><a href="#2" title="About">About</a></li>
   <li><a href="#3" title="Services">Services</a></li>
   <li><a href="#4" title="Portfolio">Portfolio</a></li>
   <li><a href="#5" title="Store">Download</a></li>
 </ul>
</div>

DEMO

Hal-Hal Yang Harus Diperhatikan

• Ganti Kode #1 sampai #5 dengan URL / Link yang ingin di tuju
• Ganti Kode Warna hijau dengan Judul Link
• Ganti Kode Warna Merah dengan Judul Link
• Klik "Simpan"

Mudah bukan?Sekian Posting "Cara Membuat Menu Vertikal di Blog" Semoga Bermanfaat dan selamat mencoba ^_^