Membuat Gambar Berotasi di Blog

Gambar yang silih berganti atau istilahnya berotasi di blog tujuannya agar tidak membosankan, bisa saja supaya tidak makan ruang atau untuk tempat iklan. Sebenarnya saya sudah mencari cari kemana mana bagaimana membaut gambar berotasi di blog namun saya tidak menemukan tutorial dan kata kuci yang pas di google. Sehingga keinginan saya untuk membuat gambar silih berganti ahirnya saya kubur sampe saya melihat blog seorang teman yang gambarnya berganti gantian ketika saya reload.

Tanpa basa basi saya intip dengan toolbar waji untuk blogger saya yaitu, firebug dan akhirnya dapat dah jurusnya. Dan akhirnya saya tidak penasaran lagi untuk membuatnya, dan untuk itu saya bagiakan kepada anda pengunjung setia cerita anak kost.

Contoh gambar yang berotasi di blog

Maksud dari rotasi gambar seperti apa? penjelasan singkatnya yaitu gambar itu berganti gantian dalam satu tempat, jadi ada 4 gambar yang di simpan satu tempat kemudian akan silih berganti tampil ketika di reload halaman tersebut. Sederhananya anda bisa melihat gambar di bawah ini, kemudian anda reload (refresh) halaman browser anda dan anda akan menemukan gambar berbeda dari sebelumnya.


Ingin tau cara membuat gambar yang berotasi di blog? Mari kompas scrip di bawah ini, kemudian paste pada halaman widget/edit HTML dimana anda ingin menaruh gambar yang berotasi. Tapi ingat, gambar tersebut harus memiliki ukuran yang sama (pixel) untuk tinggi dan lebarnya.

<script language="JavaScript"><!--
images = new Array(4);
images[0] = "<a href = 'http://carikost.blogspot.com' target='_blank'><img title='kayu' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxIHGsL9g-S-q_XJO8q0XT36NPBw198yMXqEJy31_OZ9lTgkl5Pl41pcCSnrItjp48mlfUP1oZ_OvO-NWXtxgrtBvJVwnIAFlAGseyZ-UA04P-lKUROwGpGUZpKcqFYOJt0YWJfEIeVQob/s1600/Aero+Woods@Min.jpg'></a>";
images[1] = "<a href = 'http://carikost.blogspot.com' target='_blank'><img title='longhorn background' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoo2ykIx3qY9BI_UzYylvT5rKEo33prPfDP2AZbtuodPKqFF6eohPbcj_pUFNxIRBkVIAOmpRCiTkmp3IECy_88hpm30M4LP_p8iKAS-eiy1i73_GUsgVu3hJ10__Tlu1mhfLMEwEmnsdx/s1600/Longhorn+M8+Bliss@Min.jpg'></a>";
images[2] = "<a href = 'http://carikost.blogspot.com' target='_blank'><img title='langit cerah' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik0zXNr-RFtaBLh7pxrmjOZZHdb2B5xMmICXzPM12XD7fZr2f6mjR8IR0rqBjiGtfAq3cwpq_Ux1SiFhh3wbLdGan5yUuTiGzSmtB8dtkla9bzvk0UuXyW71Pf_45Z-MvLwjeJABT9caWy/s1600/Purple_Sky_by_st3to@Min.jpg'></a>";
images[3] = "<a href = 'http://carikost.blogspot.com' target='_blank'><img title='matahari terbenam' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS3TJ8IDIUK42MwxlYCps9lS4f_e_sDWhetwjz6pI6yKJQVoSZjgtqEyaqYoiGX-lAsODtih7oKV4p2IvC3bvznjrcypKxjSv06cm14bUFqkIRY2-pVyKnHmZqAjIHESWCoUjg_B2RUPwI/s1600/Sunset@Min.jpg'></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
//done
// --></script>

Cara masukin scrip tersebut, yaitu :

1. Masuk ke blogger
2. Pilih Layout
3. Pilih yang Add gadget
4. Pilih HTML/ Javascipt
5. Save

Penjelasan Script Gambar Berotasi di Blog

Tanda yang merah adalah jumlah gambar yang ingin di rotasikan dalam satu tempat, di sana tulisanya 4 berarti ada empat gambar. Anda bisa merubahnya sesuka hati anda, namun ada harus memperhatikan  ‘images[*]’. Jumlahnya harus sama dengan gambar yang ingin anda rotasikan, namun di mulai dari angka nol. Jadi disana saya membuat 4 gambar yang ingin di rotasi, kemudian images[*] pun ada 4, di mulai dari 0, 1, 2 dan terakhir 3. Jadi angka nol pun masuk hitungan, paham maksudnya ya. Kalau anda hanya membuat dua gambar, berarti images ada dua, yaitu images[0] dan images[1] dan seterusnya.

Lalu untuk yang warna biru, adalah url gambar sodara. Sedangkan warna hijau adalah tautan dari gambar yang ada. Jadi ketika gambar di klik, akan membukan link tertentu. Kalau tidak punya tautan, tulis saja homepegae atau halaman utama blog saudara.