Pengikut

Cara Membuat Random Words/Quotes/Jokes

/
0 Comments
Membuat Random Words/Quotes/Jokes - Widget blogger ini menggunakan Jquery Script yang berfungsi untuk memanggil "class" secara acak tiap kali halaman browser refresh/reload. Efeknya adalah tiap kata-kata yang sudah dikumpulkan di dalam "class" akan dipanggil dan ditampilkan secara acak. Untuk lebih jelasnya bisa lihat demonya di sini: DEMO

Widget ini bisa dipasang di sidebar atau di posisi manapun kita menginginkannya. Misalnya sekarang kita ingin memasangnya di sidebar.

Langkah pertama - Periksa dahulu apakah template blog sobat sudah support Jquery.

Login akun blogger sobat, klik menu "template", lalu pilih "edit html". Klik pada baris kode html, tekan ctrl+F untuk memunculkan kotak pencarian. Masukkan kata kunci "jquery" (tanpa tanda petik), lalu tekan enter sampai sobat menemukan kode script seperti di bawah ini.

Kode jquery berakhiran dengan .js, bila sobat tidak menemukannya, tambahkan kode ini sebelum kode </head>.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>


Biasakan backup terlebih dahulu sebelum edit html template.
Langkah kedua - Masukkan kode widget random words.

Masuk ke "layout", klik "add a gadget", lalu pilih "HTML/Javascript". Masukkan kode berikut:
<script> $(function() {
    var $s = $('.something');
    var count = $s.length;
  
        var r = Math.floor(Math.random() * count);
        $s.hide().eq(r).show();
  
});</script>

<style type="text/css">
.something {
display:none;
color:blue;
font-size:15px;
font-family:cursive;
font-weight:bold;
}
</style>
<span class="something"><center>Di jalan ada razia, polisinya yang gue tilang. Gue mah gitu orangnya.</center></span>

<span class="something"><center>Abis belanja di Indomaret, kembaliannya gue buang, struknya gue simpen. Gue mah gitu orangnya.</center></span>

<span class="something"><center>Ketemu begal di jalan, gue ajakin dia ke dealer, gue beliin dia motor. Gue mah gitu orangnya.</center></span>

<span class="something"><center>Gue kalo makan ga pernah mikirin harga, yang penting murah. Gue mah gitu orangnya.</center></span>


Langkah ketiga - Konfigurasi.

Lihat kembali kode di atas.

Kode berwarna merah adalah kode jquery nya, yang memiliki fungsi memanggil class secara acak setiap refresh/reload halaman browser. Fungsi ini bisa dimodifikasi, misalnya kita buat agar class dipanggil secara acak setiap lima detik, tanpa refresh atau reload page, maka kita perlu menambahkan kodenya sehingga menjadi seperti ini:
<script> $(function() { // short-hand for document.ready
    var $s = $('.something');
    var count = $s.length;
    setInterval(function() {
        var r = Math.floor(Math.random() * count);
        $s.hide().eq(r).show();
    }, 5000);
});</script>

Kode setInterval(function() { berfungsi menambah fungsi jarak jeda munculnya class yang dipanggil secara acak, sedangkan kode }, 5000); memberitahu kalau jedanya adalah 5000ms (5 detik).

Kode berwarna hijau adalah kode CSS dari kalimat yang ingin ditampilkan, seperti warna, ukuran, gaya tulisan, dll. silahkan ubah sesuai keinginan, tapi jangan menghilangkan kode CSS "display:none;".

Tulisan berwarna biru adalah isi dari kalimat-kalimat yang ingin ditampilkan. Silahkan ganti dengan kalimat sobat. Jika ingin menambah kalimat, jangan lupa masukkan ke dalam <span class="something"> seperti contoh di atas, diakhiri dengan tag penutup </span>.

Kalau semua sudah diatur, tinggal klik SAVE.

Oke, sekian tutorial kali ini, selamat mencoba dan semoga berhasil.


Tentang Penulis

Dengan semangat nulis artikel yang masih angin-anginan, tapi udah hobi nge blog dari jaman SMA sampe sekarang uda kuliah dan statusnya masih blogger pemula.

Artikel Terkait

Tidak ada komentar:

Diberdayakan oleh Blogger.

Popular Posts

  • BAHAYA: Negative SEO
    Kali ini gue mau bahas tentang tehnik SEO ( Search Engine Optimization ). Tapi kali ini pembahasannya gue fokusin tentang Negative SEO d...
  • Cara Membuat Random Words/Quotes/Jokes
    Membuat Random Words /Quotes/Jokes - Widget blogger ini menggunakan Jquery Script yang berfungsi untuk memanggil "class" seca...
  • Buat Apa Nge-blog?
    Buat apa nge blog? Sebenernya banyak alasan gue nge blog, yaitu... duit. Uda, itu doang. Iya itu mindset gue dulu. Pernah bikin blog yang...

Guest Book