Membuat Vertikal Menu

Ingin membuat vertikal menu…..? Vertikal menu dapat kamu isi seperti Link, Artikel, Label atau kategori serta lain-lain. Silahkan lihat demonya di sini, letaknya di side bar kanan terdapat vertikal menu warna merah. Menarik bukan.

Yuk ikuti langkah-langkah berikut:

Langkah Pertama:

1. Login ke account Blogger –mu
2. Klik Layout atau Tata Letak
3. Pilih Edit HTML
4. Cari kode ]]></b:skin>
5. Silahkan copy script dibawah ini, letakkan diatas kode ]]></b:skin>




#vertikal-kuning{

border-bottom-width: 0;
}

#vertikal-kuning ul{
margin: 0;
padding: 0;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; /*pemilihan bentuk huruf */
}

#vertikal-kuning a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 200px; /*lebar */
text-decoration: none; /*agar link tidak bergaris bawah */
color: #333222; /*warna huruf */

border-right:1px solid #000000; /*warna border samping kanan */
background-color: #FBEC04;
border-bottom: 1px solid #6A6731;
border-left: 7px solid #918C3B;/*warna border samping kiri*/
}

#vertikal-kuning a:hover {
background-color: #FAF6B9; /*warna background */
}

#vertikal-kuning div.menutitle{
color: white;
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: black;
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}





6. Simpan Template

Langkah Kedua:

1. Kemudian klik pada "Add Gadget" atau "Tambah Gadget".
2. Lalu pilih "HTML/Javascript"
3. Kemudian masukkan script berikut ini kedalamnya.





<div id="vertikal-kuning">
<div class="menutitle">CSS Library</div><!-- judul menu pertama di sini -->
<ul>
<a href="http://infosehatbugar.blogspot.com/search/label/Kata%20BintangMu">Kata Bintang-Mu</a>
<a href="http://infosehatbugar.blogspot.com/search/label/Kata%20ShioMu">Kata Shio-Mu</a>
<a href="http://infosehatbugar.blogspot.com/search/label/Astrologi">Astrologi</a>
<a href="http://infosehatbugar.blogspot.com/search/label/Ramalan">Ramalan</a>
<a href="http://infosehatbugar.blogspot.com/search/label/Hiburan">Hiburan</a>
<a href="http://resep-cinta.blogspot.com/" target="_blank">Tes Pasangan-Mu</a>
<!-- untuk menambah link baru simpan di sini -->
</ul>

<div class="menutitle">UniQue Template</div><!-- judul menu kedua di sini -->
<ul>
<a href="http://peluang-bisnis-dirumah.blogspot.com/" target="_blank">Tambah Penghasilan-Mu</a>
<a href="http://tips-cpns.blogspot.com/" target="_blank">Soal-soal CPNS</a>
<a href="http://tips-mempercantik-blog.blogspot.com/" target="_blank">Tutorial Blogger Pemula</a>
<!-- untuk menambah link baru simpan di sini -->
</ul>
</div> <!-- div penutup menu vertikal-kuning -->





4. Simpan

Related Posts