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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD4c9xLCBVWtb1OTwrPmWyNZrUvenXWcDAmxub9dPskH8sXMvOzVKtWwBtx-1Y2KDrCaDorPKXjOGs3lQNmh6_THU9fgpagCFTM_IaKQfqnol8Pp6RyrzSdQOfKuhUB6c8klgS2nR2If8/s1600/bottom-fade.png") bottom center repeat-x;
}

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