Senin, 18 Oktober 2010 - 0 Bacotan

Membuat layout yang berbeda pada tiap posting

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 ht tp://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.

Trik mudah
Setel halaman utama hanya dengan 1 posting saja


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.
Langganan: Postingan (Atom)