Kamis, 24 Juni 2010

Cara buat Random “tips of the day”

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://blogging-admin.blogspot.com/2010/06/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 kuning 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).

Bagaimana Menambah Tips nya biar banyak ?
Lihat contoh kode dibawah, 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 tinggal tambahin aja script kodenya seperti ini.
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 6</i>";
tips[6] = "<i>tips bla bla bla 7</i>";
tips[7] = "<i>tips bla bla bla 8</i>";
tips[8] = "<i>tips bla bla bla 9</i>";
tips[9] = "<i>tips bla bla bla 10</i>";

Kalau sobat ingin lebih banyak lagi bisa kan ..? 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.


Comments :

4 komentar to “Cara buat Random “tips of the day””

Edwin mengatakan...
on 

Wah pak deswan ... bagus ni postingan-nya .. try dulu yah..

Unknown mengatakan...
on 

salam kenal mas Deswan, blog yang bagus, tukeran link ya.....
www.putrasangpejuang.blogspot.com

om rame mengatakan...
on 

terima kasih atas sharenya, bermanfaat.
kunjungan perdana, saLam kenaL.

Desta mengatakan...
on 

tuk edwin, chandra panjinata, dan om, terima kasih kunjungan dan komentarnya.

Posting Komentar

SEO BLOG

seo

Link to me

If you like this blog,then link back to me, please copy the code below.
This is what you will see.

 

homeCopyright © 2010 by All About Blogging ++

Modif by deswan.co.nr | Template by Blog Templste 4 U | Blogspot Tutorial