Membuat Efek Berkabut Pada Bagian Bawah Blog

//
Membuat Efek Berkabut Pada Bagian Bawah Blog

Sekarang kita akan membuat efek berkabut pada bagian bawah blog. Efek ini membuat seolah-olah tulisan semakin ke bawah maka semakin tidak terlihat, dan memang tidak terlihat sama sekali :D

Kita gunakan sebuah gambar dengan format .png untuk membuat kabut ini. Gambarnya sudah saya upload, jadi kamu tinggal pakai saja. Tapi kalo mau disimpen di server lain silakan saja, ini gambar efek kabutnya klik di sini.

Kita langsung praktekan jika diterapkan pada blogspot.

Langkah 1
Masuk ke HTML Editor : Dashboard > Template > Edit HTML > Proceed

Langkah 2
Cari kode ]]></b:skin>. Kemudian taruh kode CSS di bawah ini tepat di atas kode ]]></b:skin>

#efek-kabut{
    width: 100%;
    height: 200px;
    z-index: 99999;
    position: fixed;
    bottom: 0px;
    background: url("http://3.bp.blogspot.com/-KePs0cnNP1s/T7CDx6Tp7MI/AAAAAAAABus/UqoRhnneo88/s1600/bottom-fade.png") bottom center repeat-x;
}

Langkah 3
Cari lagi kode </body>. Taruh kode HTML di bawah tepat di atas kode </body>.

<div id="efek-kabut"></div>

Langkah 4
Klik Save Template. Lihat perubahan pada blog kamu, apa yang terjadi? :belo


Sekian, selamat mencoba semoga bermanfaat. Arigatou :)

5 Comments

berhasil gan... Arigatou gozaimats... :D
liat nih hasilnya di blog saya... http://hantunyawota48.blogspot.com/
Annisa Febriani 23 January, 2013
Ka, udh diliat di blog kk.
Tapi kok ga ada efek berkabutnya sich??
Delete
Reply Delete
Annisa Febriani 23 January, 2013
ARIGATOU!! Tapi sayangnya sy belum punya blog T.T
Tapi thanks ya!! karena udh mau berbagi cara... :D
Reply Delete
mantap artikelnya mau saya coba gan.
Reply Delete

Post a Comment

Silakan tulis komentar atau pertanyaan kamu di sini. Komentar yang berbau spam, promosi dan sebagainya akan segera saya hapus. Terima kasih.

Cancel Reply