Javascript Random Link Anchor

Membuat beberapa buah link secara acak pada blog atau website bisa dengan menggunakan javascript dan jQuery eksternal.

Ini saya rancang untuk mempermudah ketika seseorang berminat untuk menempatkan beberapa buah link yang akan ditampilkan secara bergantian. Akan tetapi trik ini tidak bisa diandalkan jika berniat untuk membuatnya tampil secara berurutan.

Sebelum kita masuk ke kode-kode yang diperlukan, saya ingin memperkenalkan beberapa potongan kode yang penting untuk diketahui agar bisa bekerja dengan baik.

Yang pertama kita mulai dengan var myRandom1=Math.round(Math.random()*2)
Angka 2 pada bagian ini menunjukkan bagaimana kita menjelaskan pada script bahwa ada 3 link yang siap ditampilkan.

Mengapa menggunakan angka 2? Karena kita akan memulai dari angka 0 dan jika satu link telah tampil maka 2 link akan mengantri dan akan tampil salah satunya setelah halaman di muat ulang.

aLink1[0]="page.html" dan
aText1[0]="Anhor text"

Pada bagian aLink1 dan aText1 haru dibuat sama. Misal pada aLink1 ada 10 buah maka untuk aText1 juga harus 10 buah.

<a href='"+aLink1[myRandom1]+"'>"+aText1[myRandom1]+"</a>
<a href='"+aLink2[myRandom2]+"'>"+aText2[myRandom2]+"</a>

Untuk potongan kode diatas pada bagian aLink1[myRandom1 adalah menunjukkan sebuah alamat URL dan untuk aText1[myRandom1] dimaksudkan untuk sebuah anchor teks.

Selanjutnya, kita tambahkan sedikit jQuery
<script>
$(document).ready(function(){
$("#tempat-link").html(randomAds);
});
</script>

dan html pembungkus kode
<div id="tempat-link"></div>
HTML DIV diatas bisa Anda letakkan dimana saja dan link random akan muncul didalamnya.

Oke cukup sudah  penjelasan akan fungsi dari masing-masing potongan, sekarang ambil kode-kode ini dan edit sesuai dengan kebutuhan Anda.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function randomAds(){
//Author : Sigit Purnomo
//URL : http://www.kangsigit.com
//Tutorial : http://www.kangsigit.com/2015/12/javascript-random-link.html
//ONE
var myRandom1=Math.round(Math.random()*2) //angka 2 disesuaikan dengan jumlah link
var aLink1=new Array()
aLink1[0]="halaman-1-1.html"
aLink1[1]="halaman-1-2.html"
aLink1[2]="halaman-1-3.html"
var aText1=new Array()
aText1[0]="TEXT ONE 1"
aText1[1]="TEXT TWO 1"
aText1[2]="TEXT THREE 1"
//TWO
var myRandom2=Math.round(Math.random()*3) //angka 3 disesuaikan dengan jumlah link
var aLink2=new Array()
aLink2[0]="halaman-2-1.html"
aLink2[1]="halaman-2-2.html"
aLink2[2]="halaman-2-3.html"
aLink2[3]="halaman-2-4.html"
var aText2=new Array()
aText2[0]="TEXT ONE 2"
aText2[1]="TEXT TWO 2"
aText2[2]="TEXT THREE 2"
aText2[3]="TEXT FOUR 2"
$("#tempat-link").html("<ol><li><a href='"+aLink1[myRandom1]+"'>"+aText1[myRandom1]+"</a></li><li><a href='"+aLink2[myRandom2]+"'>"+aText2[myRandom2]+"</a></li></ol>")
};
</script>
<script>
$(document).ready(function(){
$("#tempat-link").html(randomAds);
});
</script>
<div id="tempat-link"></div>

URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini