CARA MEMBUAT MENU VERTIKAL DI BLOGGER
Usep Suryana
25 Jul 2013
2
comments
Cara Membuat Menu Vertikal Di Blogspot
Apa yang anda pikirkan setelah melihat demo nya, penasaran untuk segera memasangnya silahkan ikuti langkah di bawah ini.
1. Login Blogger
2. Pilih Tabs "Rancangan"
3. Pilih "Edit HMTL" -> Cek "Expand Widget Template"
4. Cari Kode ]]></b:skin> Kemudian Letakkan kode di bawah ini TEPAT di Atas kode ]]></b:skin>
/* Start Menu Vertikal*/
*{
list-style:none;
margin:0px;
padding:0px;
}
#menu4 {
width: 200px;
border-style: solid solid none solid;
border-color: #D76100;
border-size: 0px;
border-width: 0px;
}
#menu4 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu4 li a:link, #menu4 li a:visited {
color: #9E3C02;
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV3DgcsmHxIq02CKW0q44ixNGso3VEzufvgmaCtueZEUcVW_kTlHy4FxvG_ntwUPhCzNWQdbRv55v-wf4rty9UFqVbGTM4hnJYh8_hekw-JevZUipYKSqlJ0GmihsXun50PQLttna2vRE/s1600/menu4.gif);
padding: 8px 0px 0px 30px;
}
#menu4 li a:hover {
color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV3DgcsmHxIq02CKW0q44ixNGso3VEzufvgmaCtueZEUcVW_kTlHy4FxvG_ntwUPhCzNWQdbRv55v-wf4rty9UFqVbGTM4hnJYh8_hekw-JevZUipYKSqlJ0GmihsXun50PQLttna2vRE/s1600/menu4.gif) 0 -32px;
padding: 8px 0 0 30px;
}
#menu4 li a:active {
color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV3DgcsmHxIq02CKW0q44ixNGso3VEzufvgmaCtueZEUcVW_kTlHy4FxvG_ntwUPhCzNWQdbRv55v-wf4rty9UFqVbGTM4hnJYh8_hekw-JevZUipYKSqlJ0GmihsXun50PQLttna2vRE/s1600/menu4.gif) 0 -64px;
padding: 8px 0 0 30px;
}
/* End Menu Vertikal*/
5. Klik "Simpan Template"
* Sekarang tinggal Membuat Widget JavaScriptnya
6. Pilih Tabs "Tata Letak" -> Klik "Tambah Gadget"
7. Cari dan Pilih "HTML/JavaScript"
8. Kemudian Masukkan kode di bawah ini pada widget JavaScript
<div id="menu4">
<ul>
<li><a href="#1" title="Home">Home</a></li>
<li><a href="#2" title="About">About</a></li>
<li><a href="#3" title="Services">Services</a></li>
<li><a href="#4" title="Portfolio">Portfolio</a></li>
<li><a href="#5" title="Store">Download</a></li>
</ul>
</div>
Perhatian (Yang Boleh Di Ganti) :
- Ganti Kode #1 sampai #5 dengan URL / Link yang ingin di tuju
- Ganti Kode Warna hijau dengan Judul Link
- Ganti Kode Warna Merah dengan Judul Link
9. Klik "Simpan"
Nah Gampang kan, nah bagi anda yang minat buat bikin menu vertikal ini, tunggu apalagi silahkan terapkan di blog anda. semoga bermanfaat
Sumber : http://zamaprilio.blogspot.com/2013/02/cara-membuat-menu-vertikal-di-blogspot.html
Artikel Terkait
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: CARA MEMBUAT MENU VERTIKAL DI BLOGGER
Usep Suryana | Twitter | Facebook Page
Published :25 Jul 2013 Jam 14.18
Silakan jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi tulisan ini. Terima kasih sudah singgah serta membacanya, Semoga tulisan ini bermanfaat bagi sobat Blogger Copast semuanya amin.
Usep Suryana | Twitter | Facebook Page
Published :25 Jul 2013 Jam 14.18
Silakan jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi tulisan ini. Terima kasih sudah singgah serta membacanya, Semoga tulisan ini bermanfaat bagi sobat Blogger Copast semuanya amin.
Makasig mas,,sangat membantu saya
BalasHapusKumpulan Gambar Gambar Lucu Untuk Komentar Facebook
manttaaaappp ilmunya gan
BalasHapussangat bermanfaat
terus posting ya gan
makasih