Membuat Menu Vertikal Bullet List Tanpa Edit HTML

Coretan Bang Dadan on

Saturday, December 15, 2012

Cara Membuat Menu Vertikal Bullet List Tanpa Edit HTML - Salam sejahtera sahabat blogger dimanapun anda berada, Pada pertemuan yang lalu kita telah membahas cara membuat menu horizontal CSS Block tanpa edit HTML. Nah kalau pada kesempatan kali ini bang dadan akan memberikan tutorial Cara Membuat Menu Vertikal Bullet List. Pembuatan Menu Vertikal sama halnya dengan pembuatan menu horizoantal, hanya saja kalau menu horizontal kan bentuknya memanjang dan posisinya terbaring, namun kalau menu vertikal ini bentuknya berdiri, persis sama halnya dengan popular post atau yang lainnya. baiklah sobat, ribet juga kalau terlalu banyak ngomong ya, lagian cape juga kalau ngetik terlalu banyak-banyak. mendingan kita persingkat saja.

Untuk lebih jelas kita langsung lihat saja DEMO-nya dibawah ini:

Panduan Blog Pemula

Nah demonya seperti di atas ini sob, Oke bagi sobat yang ingin menerapkan menu vertikal ini diblognya, silahkan ikuti panduannya berikut.

Cara Membuat Menu Vertikal Bullet List

Pertama seperti biasa Login pada Blog
Selanjutnya menuju rancangan
Lalu pilih Tata Letak
Klik Tambah Gadget
Lalu pilih HTML/Javascript

Selanjutnya Copy Kode dibawah ini dan pastekan pada HTML/Javascript

Berikut Kodenya :

.arrowlistmenu{
width: 250px; /*width of menu*/
}

.arrowlistmenu .headerbar{
font: bold 14px Arial;
color: white;
background: black url(https://lh5.googleusercontent.com/-JWYMAb2hQHU/UMtqyMFdDKI/AAAAAAAAAf0/3vb1mpt0Kbc/w497-h373/navigasi.bang.dadan.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
}

.arrowlistmenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #A70303;
background: url(https://lh4.googleusercontent.com/-pg46rpHmEMc/UMtrH6a1_sI/AAAAAAAAAgQ/IDPi7OSSHOE/w497-h373/bullet.dadan.gif) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #A70303;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #A5A5A5;
}

</style>

<h3 class="headerbar">
Panduan Blog Pemula</h3>
<ul>
<li><a href="#">Membuat Email Gmail</a></li>
<li><a href="#">Cara Membuat Blog</a></li>
<li><a href="#">Cara Promosi Blog</a></li>
<li><a href="#">Cara Ganti Template</a></li>
<li><a href="#">Pasang Like Facebook</a></li>
<li><a href="#">Pasang Menu Horizontal</a></li>
<li><a href="#">Cara Daftar Feedburner</a></li>
<li><a href="#">Membuat Artikel Terkait</a></li>
<li><a href="#">Cara Submit Blog</a></li>
<li><a href="#">SEO Itu Apa Sih?</a></li>
<li><a href="#">HTML Itu Apa sih?</a></li>
<li><a href="#">CSS Itu Apa sih?</a></li>
<li><a href="#">Cara Membuat Permalink di Lbog</a></li>
<li><a href="#">Mempercepat Loading Blog</a></li>
<li><a href="#">Tips Membuat Blog SEO</a></li>
</ul>
</div>

Setelah itu klik Simpan

Selesai,, sekarang blog sobat sudah mempunyai menu vertikal bullet list tersebut. mungkin cukup sekian dulu pembahasan tentang cara membuat menu vertikal bullet list tanpa edit html.

Semoga tutorial ini bermanfaat buat sahabat blogger semua.

Selamat mencoba dan semoga berhasil..!!