Vertical Menu adalah menu untuk blogger menu ini Elegant dan menu ini sangatlah sangat simple dan cara pemasanggan sangatlah mudah karna kita tidak perlu Edit HTML jika ingin memasangnya.
Cara memasangnya sobat hanya perlu menambahkan elemen HTML di dalam slidebar, untuk lebih jelasnya tantang cara memasang menu ini mari saya bimbing sobat melalui langkah-langkah Cara memasang Vertical Menu pada blog sobat.


Sekarang kita lansung aja membahas cara memasangnya di blog sobat.

1. Masuk ke akun blogger sobat.

2. Pada menu sobat klick Rancangan ➨ Tambah gadget.

3. Lalu sobat pilih elemen HTML/Java Script.

4. Selanjutnya sobat copy kode script di bawah ini dan letakkan di dalamnya.

<style type="text/css">




/* Vertical Menu By otowebsite.blogspot.com */




#ddblueblockmenu{
border: 1px solid #000000; /*Main Border Color */
border-bottom-width: 0;
width: 100%;
}




#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}




#ddblueblockmenu a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 94%; /*94% minus all left/right paddings and margins*/
text-decoration: none;
color: #ffffff; /* Menu Font Color */
background-color: #2175bc; /*Menu background Color */
border-bottom: 1px solid #90bade; /*Bottom border color */
border-left: 7px solid #1958b7; /*Left border color */
list-style-type:none;
}




* html #ddblueblockmenu a{ /*IE only */
width: 94%; /*IE 5*/
width: 94%; /*94% minus all left/right paddings and margins*/
}




#ddblueblockmenu a:hover {
background-color: #2586d7; /*Menu background Color On Hover*/
border-left-color: #1c64d1; /*Left border color On Hover*/
}




#ddblueblockmenu div.menutitle{
color: #ffffff; /* Title Font Color */
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: #000000;  /*Menu Tite Background Color*/
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
/*  Vertical Menu By otowebsite.blogspot.com  */
</style>




<div id="ddblueblockmenu">




<div class="menutitle">Browse</div>
<ul>
<a href="#">Menu 1</a>
<a href="#">Menu 2</a>
<a href="#">Menu 3</a>
<a href="#">Menu 4</a>
<a href="#">Menu 5</a>
<a href="#">Menu 6</a>
</ul></div><font size="1">Menu By <a
href="http://www.otowebsite.blogspot.com/">Blogger</a
href="http:></font>

5. Simpan.

Keterangan :
  • Ganti tanda pagar dengan link atau url tujuan.
  • Ganti teks menu dengan menu sobat sendiri.
  • Untuk merubah warna sobat perhatikan yang bertanda biru, itu adalah kode warna silahka di ganti, untuk melihat kode warna silahkan klick disini.
  • Dari kode di atas, masih banyak kode yang bisa di rubah, silahkan sobat rubah sesuai keinginan dan pengetahuan sendiri.
Jika ada kesulitan silahkan bertanya, ok!

Saya rasa cukup, silahkan tinggalkan tanggapan atau komentar sobat tentang postingan atau articles di atas!

Poskan Komentar Blogger Disqus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top