Background Yang berbeda Untuk Tiap Posting

Saya menerapkan beberapa trik sederhana agar blog ini terkesan unik dan lain dari kebanyakan blog. Salah satunya adalah menggunakan background yang berbeda untuk tiap-tiap posting. Jika tertarik, langsung saja saya jelaskan triknya.

Caranya cukup sederhana, dengan menggunakan HTML dan CSS tanpa ada embel-embel JawaScript. Teorinya, background digantikan menggunakan div dengan width sebesar 100% dab height sebesar 100%, div tersebut diletakkan pada posisi dibawah content (z-index rendah). Untuk lebih mudahnya, copi & paste code HTML dibawah ini dan letakkan di dalam posting.

<div style="position: fixed; top: 0pt; left: 0pt; width: 100%; height:100%; background: url(http://URLgambarlatarmu/background.jpg); text-align: center; z-index: -5;">
</div>


Gantilah http://URLgambarlatarmu/background.jpg dengan alamat gambar yang dikehendaki. Jika tidak ingin menggunakan gambar sebagai background, dapat juga menggunakan warna.

Penting!
Cara di atas adalah murni sebuah trik yang telah berhasil saya terapkan pada blog ini. Sejauh ini, trik tersebut dapat berjalan dengan baik jika dikombinasikan dengan JavaScript readmore (karena script tersebut mematikan fungsi HTML tiap-tiap posting pada halaman utama). Jika anda mencoba trik ini tanpa mengkombinasikannya dengan script readmore tersebut, kemungkinan efeknya akan mengacaukan halaman utama.

Saran
Letakkanlah kode HTML tersebut pada bagian akhir posting.

Trik ini dapat berjalan di browser-browser terbaru. Saya telah mengujinya pada Firefox 3.x, Safari 4, Chrome 3, dan Opera 9. Akan tetapi tidak dapat berjalan bagus untuk IE 6.
Untuk demo, dapat dilihat pada blog ini.
Selamat mencoba..



0 komentar:

Post a Comment