38 Cara buat random "Tips Of The Day"

Date → Rabu, Desember 05, 2007
Tags → Java Script | Programming | Tips Blogging | Tutorial Blogger

Tips of the day merupakan tips singkat yang akan disampaikan kepada pengunjung seriap hari, Tips ini bisa berisi apa saja, bisa berupa Tips Bisnis, Tips memasak, Tips merawat mobil, Tips money online, Tips bercinta atau apalah terserah :), Asal jangan tips blogging karena dah punya om hehehe (emang siapa om ya :). Sebenarnya Tips of the day disini cuma istilah saja...tips yang akan kita buat nanti bukan disampaikan setiap hari melainkan tips ini akan berganti ketika pengunjung melakukan refresh atau reload pada halaman blog.

Memangnya Tips of the day ini berguna om? tentu saja, dari pengamatan saya selama ini banyak pengunjung menyukai tips singkat yang saya sampaikan di blog saya -> PD bgt ya he100x. Selain berguna menampilkan informasi singkat, coba bayangkan ketika kamu hanya ingin memposting artikel yang pendek misalkan hanya 250 karakter..masa mau dipaksa dipanjang-panjangin khan malah terlihat aneh, disinilah untungnya memasang Tips of the day. Pengen tau cara buatnya...

Untuk kodenya bisa kamu pelajari script dibawah ini:

<a href="http://www.o-om.com">
<img border="0" style="float:left; margin:0 5px 5px 0;cursor:pointer; cursor:hand;" alt="http://www.o-om.com" src="http://www.geocities.com/oom_directory/tipsOftheday.gif"/></a>
<font color="#333333"><b>Did You Know...</b>
<script language="JavaScript">
//store the quotations in arrays
tips = new Array(5);
tips[0] = "<i>tips bla bla bla 1</i>";
tips[1] = "<i>tips bla bla bla 2</i>";
tips[2] = "<i>tips bla bla bla 3</i>";
tips[3] = "<i>tips bla bla bla 4</i>";
tips[4] = "<i>tips bla bla bla 5</i>";
//calculate a random index
index = Math.floor(Math.random() * tips.length);
//display the quotation
document.write("\n");
document.write(tips[index]);
//done
</script>
</font>
<a href="javascript:location.reload(true)"> »»</a> <a target="_blank" href="http://www.o-om.com/2007/12/cara-buat-random-tips-of-day.html">(?)</a>
<br/>

 

Sedikit penjelasan kode :

Kode warna hijau merupakan text tips yang akan ditampilkan nantinya.

Kode warna pink merupakan icon/logo dari tips, kamu bisa mengganti sesuai keinginan (caranya tinggal arahkan saja alamat url dimana logo/icon kamu disimpan)

Kode warna merah merupakan kode singkat untuk melakukan refresh atau reload halaman, ketika kode ini di klik maka setiap halaman di refresh tips tersebut akan berganti secara otomatis (kode ini jangan di modifikasi ya)

Bagaimana Menambah Tips nya biar banyak?

Lihat contoh kode diawah,  ini berarti kamu hanya menampilkan 5 tips.

tips = new Array(5);
tips[0] = "<i>tips bla bla bla 1</i>";
tips[1] = "<i>tips bla bla bla 2</i>";
tips[2] = "<i>tips bla bla bla 3</i>";
tips[3] = "<i>tips bla bla bla 4</i>";
tips[4] = "<i>tips bla bla bla 5</i>";

Kalau pengen nambah 10 atau 100 tips tinggal tambahin aja script kodenya.

tips = new Array(10);
tips[0] = "<i>tips bla bla bla 1</i>";
tips[1] = "<i>tips bla bla bla 2</i>";
tips[2] = "<i>tips bla bla bla 3</i>";
tips[3] = "<i>tips bla bla bla 4</i>";
tips[4] = "<i>tips bla bla bla 5</i>";
tips[5] = "<i>tips bla bla bla 1</i>";
tips[6] = "<i>tips bla bla bla 2</i>";
tips[7] = "<i>tips bla bla bla 3</i>";
tips[8] = "<i>tips bla bla bla 4</i>";
tips[9] = "<i>tips bla bla bla 5</i>";

Yang harus diingat jumlah tips dihitung dari 0 (nol) bukan dari angka 1.

Cara memasang pada blogger:

Pilih  Tempalate -> Elemen Halaman -> Tambahkan sebuah Elemen Halaman -> Copy-Paste kode script nya -> simpan dan lihat hasilnya :)

Agar gak bingung kamu bisa install langsung ke blogger :)

<a href="http://www.o-om.com"> <img border="0" style="float:left; margin:0 5px 5px 0;cursor:pointer; cursor:hand;" alt="http://www.o-om.com" src="http://www.geocities.com/oom_directory/tipsOftheday.gif"/></a> <font color="#333333"><b>Did You Know...</b> <script language="JavaScript"> //store the quotations in arrays tips = new Array(5); tips[0] = "<i>tips bla bla bla 1</i>"; tips[1] = "<i>tips bla bla bla 2</i>"; tips[2] = "<i>tips bla bla bla 3</i>"; tips[3] = "<i>tips bla bla bla 4</i>"; tips[4] = "<i>tips bla bla bla 5</i>"; //calculate a random index index = Math.floor(Math.random() * tips.length); //display the quotation document.write("\n"); document.write(tips[index]); //done </script> </font> <a href="javascript:location.reload(true)"> »»</a> <br/>

 

Installer diatas dibuat dengan tools buatan oom Tools bisa di download pada link dibawah ini:

install blogger.zip (1MB)

Baca tutorial pembuatannya di bawah ini:

http://www.o-om.com/2007/11/widget-installer-generator-for-blogger.html

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari o-om.com di inbox anda: