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.
Saya 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.
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.
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.
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.
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.
Saya 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.
Sesuatu yang hebat tidak dibuat secara instan tapi dibuat dengan usaha, kegigihan, pantang menyerah dan do'a.
CATATAN :
1. Form komentar ini tanpa moderasi dan verifikasi.
2. Dilarang promosi / meng-iklankan suatu produk dll.
3. Berkomentar dengan bahasa yang sopan.
4. Dilarang menanamkan link aktif dalam komentar ini / saya akan hilangkan selamanya.
ConversionConversion EmoticonEmoticon