Iseng gak ada ide buat bikin posting hari ini, jadi saya langsung menuju blognya Bloggertrix dan sempat menemukan satu artikel tentang cara membuat menu vertikal keren untuk blogger , dan setelah saya teliti ternyata menu vertikal ini cukup elegan dan bagus. dan cocok untuk di pasang yang template blognya ada 2 sampe 3 kolom. kalau untuk scriptnya saya rasa tidak akan membuat blog jadi LOLA (Loading Lama) karna script css-nya tidak banyak, Untuk demo saya hanya bisa berikan gambarannya 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/AVvXsEglVAjOHl2P-Y7GQo6isJt8qV0V7Z8JwU7z09z9jR2kFvA3HAaRzzeff_p4byux7g8qNz7WqDpZ12hXbGIpLyqyNq23Mzlwc3mdfe1o5QQH79UgWcfzNrIlsI1tV4M1FJ7PA1_3waml3Iw/s1600/menu4.gif);
padding: 8px 0px 0px 30px; }
#menu4 li a:hover { color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglVAjOHl2P-Y7GQo6isJt8qV0V7Z8JwU7z09z9jR2kFvA3HAaRzzeff_p4byux7g8qNz7WqDpZ12hXbGIpLyqyNq23Mzlwc3mdfe1o5QQH79UgWcfzNrIlsI1tV4M1FJ7PA1_3waml3Iw/s1600/menu4.gif) 0 -32px;
padding: 8px 0 0 30px;
}
padding: 8px 0 0 30px;
}
#menu4 li a:active {
color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglVAjOHl2P-Y7GQo6isJt8qV0V7Z8JwU7z09z9jR2kFvA3HAaRzzeff_p4byux7g8qNz7WqDpZ12hXbGIpLyqyNq23Mzlwc3mdfe1o5QQH79UgWcfzNrIlsI1tV4M1FJ7PA1_3waml3Iw/s1600/menu4.gif) 0 -64px;
padding: 8px 0 0 30px;
}
/* End Menu Vertikal*/
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglVAjOHl2P-Y7GQo6isJt8qV0V7Z8JwU7z09z9jR2kFvA3HAaRzzeff_p4byux7g8qNz7WqDpZ12hXbGIpLyqyNq23Mzlwc3mdfe1o5QQH79UgWcfzNrIlsI1tV4M1FJ7PA1_3waml3Iw/s1600/menu4.gif) 0 -64px;
padding: 8px 0 0 30px;
}
/* End Menu Vertikal*/
6. Pilih Tabs "Tata Letak" -> Klik "Tambah Gadget"
7. Cari dan Pilih "HTML/JavaScript"
8. Kemudian Masukkan kode di bawah ini pada widget JavaScript
8. Kemudian Masukkan kode di bawah ini pada widget JavaScript
<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>
- Ganti Kode #1 sampai #5 dengan URL / Link yang ingin di tuju
- Ganti Kode Warna Orange dengan Judul Link
- Ganti Kode Warna Merah dengan Judul Link
Nah Gampang kan, nah bagi anda yang minat buat bikin menu vertikal ini, tunggu apalagi silahkan terapkan di blog anda. semoga bermanfaat
0 comments:
Post a Comment