Random Image background with CSS

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 ini beberapa kali untuk melihat pergantian image pada bagian header diatas)

  • 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 ini 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:

<div id="header">&nbsp;</div>

Random Image background with CSS untuk Adsense

Contoh Iklan

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

Untuk keperluan ini, aku buat satu folder khusus untuk meletakkan image-image yang akan dipake sebagai background, 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:

<div class="adskanan">
KODE ADSENSE KAMU DISINI !!!
</div>

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.

Tutorial ini bisa di dowload dari Isnaini.Com dan kunjungi Isnaini Dot Com untuk tutorial, Free Blogger Templates dan Wordpress Themes

SELAMAT MENCOBA !!