Tulisan Terbaru

Search

Loading...
Buka ▼

Membuat Efek Berkabut Pada Bagian Bawah Blog

5/14/2012 4 Comments ✓ edit
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 :)

4 Comments

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

Komentar Ditutup

Mohon maaf, form komentar ditutup sampai waktu yang tidak ditentukan karena beberapa hal.
Terima kasih.