Membuat Menu Blog Vertikal Mudah Dan Cantik

Untuk mempermudah pengunjung blog menjelajahi semua artikel yang ada pada blog tidak lain adalah adanya menu yang di sediakan oleh pemilik blog,selain itu menu juga akan memberi kesan profesional seorang pemilik blog karena berusaha membuat seorang pengunjung agar merasa lebih mudah untuk memilih artikel yang di tuju. Mas Viki  lanjut lagi untuk mengulas cara membuat menu vertikal/menurun kebawah.Untuk membuat menu vertikal sangat mudah anda hanya kang roni minta untuk mengikuti beberapa langkah saja.

Langkah-langkah membuat menu vertikal pada blog

1.Masuk Blogger.com -->Klik Rancangan -->Pilih tab Edit HTML.
2.Download Template Lengkap Sebelum mengedit template Anda.
3.Beri centang pada kotak Expand Template Widget.
4.Cari kode ]]></b:skin> (untuk mempermudah pencarian tekan tombol F3 dan masukkan kode yang dicari pada kolom pencarian)
5.Selanjutnya taruh kode dibawah ini tepat di atas kode ]]></b:skin> yang baru anda temukan tadi.

.glossymenu, .glossymenu li ul{

list-style-type: none;

margin: 0;

padding: 0;

width: 185px; /*WIDTH OF MAIN MENU ITEMS*/

border: 1px solid black;

}

.glossymenu li{

position: relative;

}

.glossymenu li a{

background: white url('http://i580.photobucket.com/albums/ss241/nobhita/green1.gif') repeat-x bottom left;

font: bold 12px Verdana, Helvetica, sans-serif;

color: white;

display: block;

width: auto;

padding: 5px 0;

padding-left: 10px;

text-decoration: none;

}

.glossymenu li ul{

position: absolute;

width: 190px;

left: 0;

top: 0;

display: none;

}

.glossymenu li ul li{

float: left;

}

.glossymenu li ul a{

width: 180px;

}

.glossymenu li a:visited, .glossymenu li a:active{

color: white;

}

.glossymenu li a:hover{

background-image: url('http://i580.photobucket.com/albums/ss241/nobhita/green2.gif');

}

* html .glossymenu li { float: left; height: 1%; }

* html .glossymenu li a { height: 1%; }

6.Save template.Setelah anda menyimpannya anda harus kembali lagi pada halaman Rancangan ->Pilih dan klik Tambah Gadget di lokasi yang anda inginkan,selanjutnya pilih dan klik HTML/JavaScript dan masukkan kode dibawah ini kedalamnya.

<ul id="vertical menu Edit By antok" class="glossymenu">

<li><a href="/">Home</a></li>

<li><a href="http://vikitctc.blogspot.com/">Ubah dgn judul Menu</a></li>

<li><a href="http://vikitctc.blogspot.com/">Ubah dgn judul menu</a></li>

<li><a href="http://vikitctc.blogspot.com/">Ubah dgn Judul Menu</a></li>

</li>

</ul>

7.Simpan dan lihat hasilnya untuk Langkah-langkah membuat menu vertikal pada blog.
Ket:Untuk kode dengan warna merah ganti dengan Url/link halaman yang anda tuju dan kode dengan warna biru di atas boleh anda edit untuk menyesuaikan tampilan halaman blog.


Semoga Bermanfaat Teman

Semoga artikel Membuat Menu Blog Vertikal Mudah Dan Cantik bermanfaat bagi Anda.