Membuat Menu Blog Vertikal Mudah Dan Cantik

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.Sebelum kang roni mengulas cara membuat menu bergaya vertikal/menu yang berbaris menurun kang roni juga akan memberikan pilihan beberapa menu yang tidak kalah menariknya di antaranya adalah:
Menu Blog Drop Down Horizontal Ringan
Menu Horizontal dengan CSS dan HTML di blogger
Menu Dtree Bergaya Windows xp yang keren dan menarik.
Kang roni 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://roningasinanblog.blogspot.com/">Ubah dgn judul Menu</a></li>

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

<li><a href="http://roningasinanblog.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.

Related Post:

7 comments:

USOFT said...

wah tutorial yang lengkap... keep posting mas Roni.. :D

Arief Ardiansyah said...

minta sampel gambarnya dong

roni said...

KLIK UNTUK MELIHAT DEMO/SAMPELNYA SOBAT

Wahyoe Msc said...

Ga ada contohnya ya gan?
ScreenShot nya

roni said...

buka link ini gan
http://ngeblogseo.blogspot.com/2012/06/membuat-menu-cantik-blog-vertikal.html

fajar juliyanto said...

Kok jadinya horisontal gan

roni said...

1.Kemungkinan ada kesalahan pemasangan kode langkah ke 5 sob
2.Kemungkinan ada kode yang pernah sobat pasang dan tidak familiar dengan kode di atas

Post a Comment