12.40
Mahmud H Huseng
Met bertandang di Blog Bang Mahmud :
Bintang-Kejora Menu Vertical sobat... sekarang aku akan posting lagi nich,, yg
pasti dengan artikel yang lain lagi heheh, sekarang aku ingin berbagi tips cara
membuat menu secara vertical dengan hasil seperti gambar diatas... langsung aja
ke artikel inti , mari kita lihat caranya...
1. Loggin ke blog Anda
2. Pilih tab ==> Design Template==>
Edit HTML
3. Kemudian Anda cari kode ini
==> ]]></b:skin>
4. Copy kode dibawah ini dan
pastekan di atas kode ===> ]]></b:skin>
<!--VERTICAL-MENU-STARTS-Widget-by-http://bintangkejora02.blogspot.com/-->
#verticalmenu
border-bottom-width: 0;
}
#verticalmenu ul{
margin: 0;
padding: 0;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
#verticalmenu a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 200px;
text-decoration: none;
color: #fff;
border-right:1px solid #000000;
background-color: #2175bc;
border-bottom: 1px solid #90bade;
border-left: 7px solid #1958b7;
}
#verticalmenu a:hover {
background-color: #2586d7;
border-left: 12px solid #1c64d1; width: 195px; }
#verticalmenu div.menutitle{
color: white;
border-bottom: 1px solid #053E66;
padding: 5px 3px 5px 13px;
background-color: black;
width: 201px;
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
<!--VERTICAL-MENU-STOPS-Widget-by-http:// bintang-kejora02.blogspot.com/-->
5. Setelah selesai simpan Template
6. Lalu klik page Element ==> Add
Gadget ==> pilih HTML/Java Script
7. Copy kode di bawah ini dan pasteka
di dalam gadget tersebut
<!--VERTICAL-MENU-STARTS-Widget-by-http://bintang-kejora02.blogspot.com/-->
<div id="verticalmenu">
<div class="menutitle">Daftar</div>
<ul>
<a href="
http://bintang-kejora02.blogspot.com/">Beranda</a>
<a href="
http://bintang-kejora02.blogspot.com/">Bacalah</a>
<a href="
http://bintang-kejora02.blogspot.com/">Berita</a>
<a href="
http://bintang-kejora02.blogspot.com/">Beramal</a>
<a href="
http://bintang-kejora02.blogspot.com/">Berilmu</a>
</ul>
<div class="menutitle">Kinerja</div>
<ul>
<a href="
http://bintang-kejora02.blogspot.com/">Bisnis</a>
<a href="
http://bintang-kejora02.blogspot.com/">Pemasaran</a>
</ul>
<div class="menutitle">Blog Karya</div>
<ul>
<a href="
http://bintang-kejora02.blogspot.com/">Karya 2</a>
<a href="
http://bintang-kejora02.blogspot.com/">Karya 3</a>
<a href="
http://bintang-kejora02.blogspot.com/">Karya 4</a>
</ul>
</div>
<a href='
http://bintang-kejora02.blogspot.com/2012/02/cara-membuat-menu-vertikal-sederhana.html' title='Get This Menu!'>Ambil Menu Ini!</a>
<!--VERTICAL-MENU-STOPS-Widget-by-http://bintang-kejora02.blogspot.com/-->
8. Setelah selesai simpan deh...
9.
Selesai.. ^_^
S'moga
artikel Saya ini bermanfaat buat Gang-Gang yang berkunjung ke blog Saya... atas
kunjungannya Gue ucapin terimakasih :)
Dilain
kesempatan akan mencoba member menu-menu yang tak kalah kerennya, hebat dan
cantik luar biasa … yang bisa menampung sub menu dan anak sub menu sebanyak
yang kita inginkan dengan tampilan drop down… Wow keren khuang.
Gang-Gang
bisa berkomentar, bergabung dengan mengklik sign in
Selamat
mencoba
