Followers

Posted by Unknown under

Membuat Menu Vertikal Cantik Di Blogspot

Written By GEMBUX PASOEPATI




Sebelumnya,, coba anda arahkan mouse anda ke daftar menu yang ada di sebelah kiri website ini atau di bawah ini... Berubah bukan.. Anda dapat meletakkan nya disisi kiri atau kanan blog anda..


Itu merupakan animasi yang saya rancang untuk mempercantik dan membuat blog ini agar lebih menarik dimata pengunjung. Anda pun bisa melakukannya. 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/AVvXsEiCfr50ZdeAT3q4L0MYg1feHiXHh_E9vFYaKm4v1O77v3dgx54rN1nP2yagpLxksFHwjygNUR1cF0HWZ72wBAV1a4ZfF08lJq885CTE-ZjKzbjktpgQKMIKPJIFBLnKHugC6k_L30pi6gs/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/AVvXsEiCfr50ZdeAT3q4L0MYg1feHiXHh_E9vFYaKm4v1O77v3dgx54rN1nP2yagpLxksFHwjygNUR1cF0HWZ72wBAV1a4ZfF08lJq885CTE-ZjKzbjktpgQKMIKPJIFBLnKHugC6k_L30pi6gs/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/AVvXsEiCfr50ZdeAT3q4L0MYg1feHiXHh_E9vFYaKm4v1O77v3dgx54rN1nP2yagpLxksFHwjygNUR1cF0HWZ72wBAV1a4ZfF08lJq885CTE-ZjKzbjktpgQKMIKPJIFBLnKHugC6k_L30pi6gs/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/AVvXsEiCfr50ZdeAT3q4L0MYg1feHiXHh_E9vFYaKm4v1O77v3dgx54rN1nP2yagpLxksFHwjygNUR1cF0HWZ72wBAV1a4ZfF08lJq885CTE-ZjKzbjktpgQKMIKPJIFBLnKHugC6k_L30pi6gs/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/AVvXsEiCfr50ZdeAT3q4L0MYg1feHiXHh_E9vFYaKm4v1O77v3dgx54rN1nP2yagpLxksFHwjygNUR1cF0HWZ72wBAV1a4ZfF08lJq885CTE-ZjKzbjktpgQKMIKPJIFBLnKHugC6k_L30pi6gs/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.khairulumam.com) Sesuai selera anda.

Terimakasih.. semoga bermanfaat...

0 komentar:

Ads 468x60px

Movie Category 5

Movie Category 4

Featured Posts

Social Icons

Recent Posts

Read more: http://tutorialblog45.blogspot.com/2012/08/cara-membuat-efek-berputar-mengikuti.html#ixzz2CH02mubb

Unordered List

Berita Luar Negeri

Download

Recent Post

Night Diamond Bloody Red - Precision Select
Diberdayakan oleh Blogger.

Translate

Social Icons

Popular Posts