Dalam artikel coba kita bahas bagaimana cara membuat Vertikal Menu. nah gimana yach caranya dan sriptnya.langkah pertama selalu masuk ke account blogger,soalnya kalau gak masuk kesana gak bisa buat dech ..he he he.
step by step :
- Masuk dasbor
- Tata Letak.
- Edit Html.
- Centang Expand widget Template.
Tidak perlu memakan waktu yang lama untuk membuatnya dan tidak perlu ketrampilan yang cukup untuk membuatnya, hanya tinggal copy-paste code yang saya berikan ini.
Apakah Anda tertarik untuk memasang widget menu vertikal ini kedalam blog Anda?
Silahkan ikuti langkah-langkah dibawah ini.
Pastikan sudah Log In ke blogger.
Masuk menu Layout kemudian masuk menu Edit HTML.
Kemudian masukkan Code CSS dibawah ini diatas code ]]></b:skin>
Pastikan sudah Log In ke blogger.
Masuk menu Layout kemudian masuk menu Edit HTML.
Kemudian masukkan Code CSS dibawah ini diatas code ]]></b:skin>
/*Vertikal Menu
---------------------------------*/
.vertikalmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px; /* lebar dari menu vertikal*/
}
.vertikalmenu li{
border-bottom: 1px solid white;
}
.vertikalmenu li a{
background: #000000 ; /*warna dari menu vertikal*/
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0;
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black;
}
.vertikalmenu li a:visited, .vertikalmenu li a:active{
color: white;
}
.vertikalmenu li a:hover{
background-color: #737373; /*warna setelah pointer diarahkan (hover)*/
color: white;
border-bottom: 1px solid black;
}
---------------------------------*/
.vertikalmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px; /* lebar dari menu vertikal*/
}
.vertikalmenu li{
border-bottom: 1px solid white;
}
.vertikalmenu li a{
background: #000000 ; /*warna dari menu vertikal*/
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0;
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black;
}
.vertikalmenu li a:visited, .vertikalmenu li a:active{
color: white;
}
.vertikalmenu li a:hover{
background-color: #737373; /*warna setelah pointer diarahkan (hover)*/
color: white;
border-bottom: 1px solid black;
}
untuk mencari code warna buka situs www.colorschemer.com/online
Kalau sudah kemudian SAVE
Nah langkah berikutnya yaitu kita harus beranjak dari area Edit HTML ke area Page Elements (tata letak)
Lalu pilih Area sidebar dan klik Add a Gadget (Saya harap mudeng maksud saya)
Lalu pilih HTML/JavaScript dan taruh Code HTML dibawah ini kedalamnya
<ul class="vertikalmenu">
<li><a href="/">» HOME</a></li>
<li><a href="http://makna-ilmu.blogspot.com">» Tutorial Blog</a></li>
<li><a href="http://makna-ilmu.blogspot.com/2010/06/membuat-vertikal-menu.html">» Vertikal Menu</a></li>
<li><a href="http://by-template.blogspot.com">» Free Template</a></li>
<li><a href="http://zonahandphone.blogspot.com">» Handphone</a></li>
<li><a href="http://blogyundha.blogspot.com">» Komputer</a></li>
</ul>
<li><a href="/">» HOME</a></li>
<li><a href="http://makna-ilmu.blogspot.com">» Tutorial Blog</a></li>
<li><a href="http://makna-ilmu.blogspot.com/2010/06/membuat-vertikal-menu.html">» Vertikal Menu</a></li>
<li><a href="http://by-template.blogspot.com">» Free Template</a></li>
<li><a href="http://zonahandphone.blogspot.com">» Handphone</a></li>
<li><a href="http://blogyundha.blogspot.com">» Komputer</a></li>
</ul>
Ganti teks yang berwarna merah dengan URL link yang ingin kamu pasang, dan yang berwarna hijau adalah text display linknya.
Kalau sudah beres semua tinggal SAVE deh..
Waktu Sekarang
3 komentar:
Bagus banget nich artikel langsung copas yach ...boss
Thanks...
Silahkan broo lanjut .....
Test from admin
Posting Komentar
" Terima Kasih Banyak "