Myjayvyn.com

Javascript: Merotasi Banner Dan Link Ketika Page Reload

0  |  880 Views

Hal ini sudah pernah dibahas tempo lalu dengan menggunakan script PHP intip disini, namun hanya merotasi bannernya saja tanpa merotasi link tujuannya.

Pada kesempatan kali ini “Dengan kekuatan bulan… aku akan menghukum mu…”

sailormoon

Hehehe.. menghukum dengan ilmu cara merotasi banner dan link tujuannya setiap kali halaman website reload atau refresh, menggunakan bahasa javascript.

Formulanya nanti ditempatkan di file header.php dan single.php.

  • Langkah pertama anda adalah mengupload semua gambar atau banner yang akan digunakan melalui Add Media
  • Lalu klik Appearance>>editor
  • Disebelah kanan klik file Header.php untuk diedit
  • Lalu diantara tag <head> dan </head> anda tambahkan script dibawah ini”
<script type="text/javascript">
var ranNum = Math.floor(Math.random() * 3);
        //alert(ranNum);
        var gmb = new Array(3)
        var lnk = new Array(3)
          gmb[0] = "gambar1.jpg";
          gmb[1] = "gambar2.jpg";       
          gmb[2] = "gambar3.jpg";

          lnk[0] = "link1.html";     
          lnk[1] = "link2.html";
          lnk[2] = "link3.html";

</script>

Catatan! Silakan anda ganti tulisan gambar1.jpg, gambar2.jpg dan gambar3.jpg dengan alamat file URL gambar yang sebelumnya telah anda upload. Lalu ganti pula tulisan link1.html, link2.html dan link3.html dengan alamat link yang dituju.  Lihat contoh:

wpb329

  • Klik tombol Up date File

Karena kita akan menjadikan banner itu bagian dari setiap postingan atau artikel, maka carilah dan klik file single.php. Jika tidak ditemukan coba cari single-content.php atau content.php atau loop.php.

  • Di area editor carilah tulisan atau script ini
    <?php if (have_posts()) : ?>
    atau
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  • Jika script tersebut sudah ditemukan, tambahkan script dibawah ini tepat diatasnya.
<center>
<script type="text/javascript">                                
 //<![CDATA[
    document.write('<a href="' + lnk[ranNum] + '" target="_blank"><img src="' + gmb[ranNum] + '" alt="Description"/></a>')
 //]]>
</script>
</center>
  • Lihat contoh dibawah ini:
  • wpb330
  • Klik tombol Up date File

Script tersebut akan memunculkan banner dibagian atas artikel, tentu anda bisa memunculkan banner di tengah artikel, dibagian akhir artikel atau diposisi manapun, asal anda mengerti cara menempatkan script tersebut hehehe..

Semoga berhasil!!

Author: Agie

Semoga bermanfaat 🙂

More Posts - Website

Follow Me:
TwitterFacebookPinterestGoogle Plus

So, what do you think ?