Selasa, 15 Mei 2012

Membuat Menu Vertikal Cantik Terbaru Blogspot

Berikut adalah lanjutan postingan saya sebelumnya, yaitu cara membuat menu vertikal cantik di blogspot yang pertama. Ini merupakan menu yang saya buat dan telah saya update menjadi menu yang sedikit lebih cantik dari sebelumnya. :-D. Untuk membuat nya, Caranya sangat gampang. Tinggal Copy Code berikut dan anda tinggal paste kan di tambah gadget / add gadget blog anda. Menu yang saya buat akan menghasilkan tampilan seperti di bawah ini : Coba Arahkan Mouse Anda di menu di bawah ini...



» Home
» Tentang Kami
» About
» Facebook
» Twitter

1. Masuk ke tata letak / layout.

2. Tambah gadget html/javascript dan paste kan kode berikut ini :

<style>
/*Warna ketika mouse belum di dekatkan*/
#berubah
{
background-color: #383b20;
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;
font-size:20px;
}
/*Warna teks setelah mouse di dekatkan*/
#berubah a:hover
{
color:#000000;
font-size:20px;
}
</style>

<table><tbody><tr><td width="330px" id="berubah"><a href="#">&#187; Home</a></td></tr>

<tr><td id="berubah"><a href="#">&#187; Tentang Kami</a></td></tr>

<tr><td id="berubah"><a href="#">&#187; About</a></td></tr>

<tr><td id="berubah"><a href="#">&#187; Facebook</a></td></tr><tr>

<td id="berubah"><a href="#">&#187; Twitter</a></td></tr></tbody></table>

Ganti Tangda # dengan link tujuan anda. Begitujuga dengan tulisan menu anda. ganti sesuai keinginan.


Ganti width="330px" untuk Lebarnya.


Demikianlah tips dan trik blogspot saya tentang membuat menu vertikal cantik terbaru ini. Anda tidak perlu pergi ke situs situs penyedia layanan menu vertikal yang biasanya berat dan menambah loading blog anda. Kode di atas telah saya buat untuk meminimalisir loading blog. Dan tidak akan memperngaruhi loading blog anda karena tidak mengandung javascript. Sekian terimakasih :-)

2 komentar:

  1. Dapet ilmu tentang CSS lagi disini...Siap dipraktekkan...
    mampir ke blog ane ya gan..

    http://healthybloggy.blogspot.com/

    BalasHapus
  2. Pengen banget bisa begini, dicoba ah, makasih om ilmunya

    BalasHapus