Keunikan Menu Vertikal Pada Blog

Fasilkom-universitas esa unggul >> Sebelumnya udah di posting tentang menu yang horizontal, kini mau posting lagi nie menu yang vertikal alias dari atas ke bawah, di desain biar lebih cantik dan unik nie kawan AJIP (Anak Jadul Ingin Pinter) biar tambah wah... gymana gythu... hehehhe
kebanyakan sambutan kagak jadi-jadi nie menu ok langsung aja yach  Nah.. Caranya adalah sebagai berikut :

1. Masuk ke edit html pada blog anda. Centrang kotak "Expand Widget Templates"

2. Cari kode ]]></b:skin>. Tekan Ctrl + f dan masukkan kode tersebut untuk lebih mempercepat pencarian.

3. Copy paste kode berikut di atas kode ]]></b:skin>

/*Warna ketika mouse belum di dekatkan*/
#berubah
{
background-color: Black;
font-size: 16px;
}
/*Warna teks sebelum mouse di dekatkan*/
#berubah a
{
color:#FFFFFF
}
/*warna setelah mouse di dekatkan*/
#berubah:hover
{
background-color:silver;
color:#000000;
}
/*Warna teks setelah mouse di dekatkan*/
#berubah a:hover
{
color:#000000
}

4. Masuk ke Page Element/ Elemen Laman pada blog anda.. Tambahkan GADGET/ADD GADGET html/javascript. dan pastekan kode berikut :

<center><p><b>Pilih Menu</b></p></center>
<p></p><div id="berubah"><a href="Alamat Link Anda"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjd0nRnvXIiC7VIyVyR-7Y1EhS9fEa_d8ELdexXFhoWv4_Gcx4NUKOWkxZMcqbZTRqYDIhYbtt5GkFm1GnObG3EYdnGbefMEZqzuBAQXUhRHqM8Unik9YEfEggHr40Fxt5LKAMPjW860U/s1600/search-icon-orange.gif" width="15px" height="15px" /><b> Menu 1</b></a></div>

<p></p><div id="berubah"><a href="Alamat Link Anda"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjd0nRnvXIiC7VIyVyR-7Y1EhS9fEa_d8ELdexXFhoWv4_Gcx4NUKOWkxZMcqbZTRqYDIhYbtt5GkFm1GnObG3EYdnGbefMEZqzuBAQXUhRHqM8Unik9YEfEggHr40Fxt5LKAMPjW860U/s1600/search-icon-orange.gif" width="15px" height="15px" /><b> Menu 2</b></a></div>

<p></p><div id="berubah"><b><a href="Alamat Link Anda"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjd0nRnvXIiC7VIyVyR-7Y1EhS9fEa_d8ELdexXFhoWv4_Gcx4NUKOWkxZMcqbZTRqYDIhYbtt5GkFm1GnObG3EYdnGbefMEZqzuBAQXUhRHqM8Unik9YEfEggHr40Fxt5LKAMPjW860U/s1600/search-icon-orange.gif" width="15px" height="15px" /> Menu 3</a></b></div>

<p></p><div id="berubah"><b><a href="Alamat Link Anda"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjd0nRnvXIiC7VIyVyR-7Y1EhS9fEa_d8ELdexXFhoWv4_Gcx4NUKOWkxZMcqbZTRqYDIhYbtt5GkFm1GnObG3EYdnGbefMEZqzuBAQXUhRHqM8Unik9YEfEggHr40Fxt5LKAMPjW860U/s1600/search-icon-orange.gif" width="15px" height="15px" /> Menu 4</a></b></div>

<p></p><div id="berubah"><b><a href="Alamat Link Anda"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjd0nRnvXIiC7VIyVyR-7Y1EhS9fEa_d8ELdexXFhoWv4_Gcx4NUKOWkxZMcqbZTRqYDIhYbtt5GkFm1GnObG3EYdnGbefMEZqzuBAQXUhRHqM8Unik9YEfEggHr40Fxt5LKAMPjW860U/s1600/search-icon-orange.gif" width="15px" height="15px" /> Menu 5</a></b></div>

5. Ganti TULISAN MERAH dengan alamat link anda ( misal : http://www.itesaunggul2011.blospot.com) Sesuai selera anda.

Terimakasih.. semoga bermanfaat...