Random Image background with CSS

Random Image background with CSS mulai aku pake beberapa hari yang lalu, dulunya aku pake javascript, tapi ternyata ada yang lebih bagus :).

Untuk Contoh hasil akhir aku buat halaman khusus Random Image Background dan bisa juga di download tutorialnya dan contoh jadinya kalo pengen nyobain dirumah.

Tutorial:

Untuk membuat random image baik untuk header atau untuk keperluan lainnya, dulu aku pernah pake Javascript. Ternyata masih ada yang efektif dan efisien, selain itu juga lebih mudah, yaitu menggunakan CSS dengan bantuan script Random Image Rotator dari Automatic Labs. (Refress (F5) atau Reload halaman contoh beberapa kali untuk melihat pergantian image pada bagian header/atas)

* Download file Random Image Rotator dan simpan dengan nama rotator.php.
* Masukkan semua image ke folder yang sama dengan file rotator.php, untuk contoh ini saya buat folder dengan nama headerimages untuk image-image yang akan digunakan untuk bagian header .

Buat kode CSS untuk memanggil image-image tadi, contoh yang saya buat untuk bagian header/atas halaman contoh tersebut adalah:

#header {
margin: 0px;
width: 100%;
background-color: #660000;
background-image: url(headerimages/rotator.php);
background-repeat: no-repeat;
background-position: center center;
height: 120px;
padding-top: 26px;
padding-right: 0px;
padding-bottom: 15px;
padding-left: 0px;
}

Yang paling penting adalah pada bagian yang saya tebalkan, jadi file rotator.php tadi kita jadikan sebagai background dalam CSS kita.

Setelah membuat CSS, buat kode xhtml seperti dibawah ini dimana kamu pengen random image-nya muncul:

 

Random Image background with CSS untuk Adsense

Dengan cara yang sama, teknik ini bisa dipake untuk ngasih background di sebelah iklan adsense kamu secara random seperti contoh disamping kanan halaman contoh. (Refress (F5) atau Reload halaman tersebut beberapa kali untuk melihat pergantian gambar yang dimaksud)

Untuk keperluan ini, aku buat satu folder khusus untuk meletakkan image-image yang akan dipake sebagai background iklan, untuk contoh ini aku pake folder dengan nama ads. Jangan lupa, copy juga file rotator.php tadi ke folder ads.

Kode CSS yang dipake adalah:

.adskanan {
float: right;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 2px;
margin-left: 4px;
background-image: url(ads/rotator.php);
background-position: left center;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 100px;
background-repeat: no-repeat;
}

Kemudian dihalaman dimana kamu pengen iklannya muncul dengan background, buat kode seperti ini:

KODE ADSENSE KAMU DISINI !!!

Perhatian: Jangan mengisi folder image dengan file lain kecuali images yang akan dipake dan file rotator.php, termasuk file Thumbs.db yang sering muncul kalo di windows, jangan di upload.

Gunakan CTRL+F5 untuk melakukan Refress/Relaod baik di Internet Explorer maupun Mozilla Firefox

SELAMAT MENCOBA !!