Membuat Vertikal Menu

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>

/*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;
}

Perhatikan code yang berwarna merah dan kegunaanya.. atur menurut selera kamu.
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>

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..

Artikel Terkait Lainnya :



3 komentar:

Anonim mengatakan...Pada 6 Juni 2010 pukul 20.42
Reply

Bagus banget nich artikel langsung copas yach ...boss

Thanks...

yudhi mengatakan...Pada 6 Juni 2010 pukul 20.45
Reply

Silahkan broo lanjut .....

yudhi mengatakan...Pada 3 September 2010 pukul 01.22
Reply

Test from admin

:: Terima kasih Anda Telah Memberikan Komentar Atas Blog Ini ::

Posting Komentar

" Terima Kasih Banyak "

Tutorial blog ,Trik &Tips, Freeware © 2010. Design by :Bloggers Sponsored by: Makna-iLmu