JavaScript for Bloggers
Kumpulan beberapa kode HTML dan Javascript hasil blogwalking kemudian saya rangkum pada postingan artikel di MonozCore, yaaa barangkali ada tertarik buat digunakan di blog atau website sobat. Beberapa kode HTML dan Javascript sudah diberi keterangan untuk cara pemasangan serta contoh dari penggunaanya. Oke sob... tinggal copy-paste aja deh, jangan lupa komentarnya yaa.
Background Effect
- Script Efek Daun Berguguran
<script> var snowsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-1IziIK_dYQVPmiJelVL9X5wK7bsH2Fs8QQynf3NjIOGdYKpl9UsMN1hEZXxMVvOUQVYwMB-K4Ni9Pk17ywPtbK5jUrUgJQNTrjreGVDMpPbnw3mM0BeXB1gaaw2yz5TzVUHiR4vSutY/s1600/green_leaf.gif"; var no = 20; var hidesnowtime = "0"; var snowdistance = "pageheight"; var ie4up = (document.all) ? 1 : 0; var ns6up = (document.getElementById&&!document.all) ? 1 : 0; function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } var dx, xp, yp; var am, stx, sty; var i, doc_width = 800, doc_height = 400; if (ns6up) { doc_width = self.innerWidth; doc_height = self.innerHeight; } else if (ie4up) { doc_width = iecompattest().clientWidth; doc_height = iecompattest().clientHeight; } dx = new Array(); xp = new Array(); yp = new Array(); am = new Array(); stx = new Array(); sty = new Array(); snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc for (i = 0; i < no; ++ i) { dx[i] = 0; xp[i] = Math.random()*(doc_width-50); yp[i] = Math.random()*doc_height; am[i] = Math.random()*20; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); if (ie4up||ns6up) { if (i == 0) { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://wpplugins.info\"><img src="+snowsrc+" border=\"0\"><\/a><\/div>"); } else { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src="+snowsrc+" border=\"0\"><\/div>"); } } } function snowIE_NS6() { doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10; doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight; for (i = 0; i < no; ++ i) { yp[i] += sty[i]; if (yp[i] > doc_height-50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = 0; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); } dx[i] += stx[i]; document.getElementById("dot"+i).style.top=yp[i]+"px"; document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px"; } snowtimer=setTimeout("snowIE_NS6()", 10); } function hidesnow(){ if (window.snowtimer) clearTimeout(snowtimer) for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden" } if (ie4up||ns6up){ snowIE_NS6(); if (hidesnowtime>0) setTimeout("hidesnow()", hidesnowtime*1000) } </script>
Taruh script ini dibawah <body> pada kode HTML Template blog atau bisa juga dipasang di kotak postingan gadget sebagai widget blog. - Script Efek Faling Love Heart
<script> var snowsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpXWb9rh6j9VZwjvCzjQfLHF8Rxv8VjWQeXpvRkk5gf_3DUOXN4mZjCjSzOZ3B2-W8t3MtT9PW5Uqd-vfRHW0xY3sRtCrvbI6Jiq4Wp1lvpztxzYdZKC77YRh4ulPBflMlJ9enG0uGU__K/s1600/LoveHeart-1-dance.gif"; var no = 20; var hidesnowtime = "0"; var snowdistance = "pageheight"; var ie4up = (document.all) ? 1 : 0; var ns6up = (document.getElementById&&!document.all) ? 1 : 0; function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } var dx, xp, yp; var am, stx, sty; var i, doc_width = 800, doc_height = 400; if (ns6up) { doc_width = self.innerWidth; doc_height = self.innerHeight; } else if (ie4up) { doc_width = iecompattest().clientWidth; doc_height = iecompattest().clientHeight; } dx = new Array(); xp = new Array(); yp = new Array(); am = new Array(); stx = new Array(); sty = new Array(); snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc for (i = 0; i < no; ++ i) { dx[i] = 0; xp[i] = Math.random()*(doc_width-50); yp[i] = Math.random()*doc_height; am[i] = Math.random()*20; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); if (ie4up||ns6up) { if (i == 0) { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://wpplugins.info\"><img src="+snowsrc+" border=\"0\"><\/a><\/div>"); } else { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src="+snowsrc+" border=\"0\"><\/div>"); } } } function snowIE_NS6() { doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10; doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight; for (i = 0; i < no; ++ i) { yp[i] += sty[i]; if (yp[i] > doc_height-50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = 0; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); } dx[i] += stx[i]; document.getElementById("dot"+i).style.top=yp[i]+"px"; document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px"; } snowtimer=setTimeout("snowIE_NS6()", 10); } function hidesnow(){ if (window.snowtimer) clearTimeout(snowtimer) for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden" } if (ie4up||ns6up){ snowIE_NS6(); if (hidesnowtime>0) setTimeout("hidesnow()", hidesnowtime*1000) } </script>
Taruh script ini dibawah <body> pada kode HTML Template blog atau bisa juga dipasang di kotak postingan gadget sebagai widget blog. - Script Efek Color Star
<script> var snowsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Oy_i5o1UGBtX9c5xAhTIy9aJnz9zUP9iShdO8aZfYQgjtYJHDARCLFkz3uwL0_6HRW5Poa9TfEZsrOoDh6jmh4vgYk2NLNLtntknYVCGtpAgaCGgiSfQeKM-z1qGVnlciLub4xd-oGje/s1600/ColoredStars.gif"; var no = 20; var hidesnowtime = "0"; var snowdistance = "pageheight"; var ie4up = (document.all) ? 1 : 0; var ns6up = (document.getElementById&&!document.all) ? 1 : 0; function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } var dx, xp, yp; var am, stx, sty; var i, doc_width = 800, doc_height = 400; if (ns6up) { doc_width = self.innerWidth; doc_height = self.innerHeight; } else if (ie4up) { doc_width = iecompattest().clientWidth; doc_height = iecompattest().clientHeight; } dx = new Array(); xp = new Array(); yp = new Array(); am = new Array(); stx = new Array(); sty = new Array(); snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc for (i = 0; i < no; ++ i) { dx[i] = 0; xp[i] = Math.random()*(doc_width-50); yp[i] = Math.random()*doc_height; am[i] = Math.random()*20; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); if (ie4up||ns6up) { if (i == 0) { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://wpplugins.info\"><img src="+snowsrc+" border=\"0\"><\/a><\/div>"); } else { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src="+snowsrc+" border=\"0\"><\/div>"); } } } function snowIE_NS6() { doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10; doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight; for (i = 0; i < no; ++ i) { yp[i] += sty[i]; if (yp[i] > doc_height-50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = 0; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); } dx[i] += stx[i]; document.getElementById("dot"+i).style.top=yp[i]+"px"; document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px"; } snowtimer=setTimeout("snowIE_NS6()", 10); } function hidesnow(){ if (window.snowtimer) clearTimeout(snowtimer) for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden" } if (ie4up||ns6up){ snowIE_NS6(); if (hidesnowtime>0) setTimeout("hidesnow()", hidesnowtime*1000) } </script>
Taruh script ini dibawah <body> pada kode HTML Template blog atau bisa juga dipasang di kotak postingan gadget sebagai widget blog. - Script Efek Salju Kecil
<script src="http://sites.google.com/site/monosbit/monosbit_snow.js"></script>
Taruh script ini dibawah <body> pada kode HTML Template blog atau bisa juga dipasang di kotak postingan gadget sebagai widget blog. - Script Efek Salju Besar
<script src="http://sites.google.com/site/monosbit/monosbit_snowstorm.js"></script>
Taruh script ini dibawah <body> pada kode HTML Template blog atau bisa juga dipasang di kotak postingan gadget sebagai widget blog.
Cursor Effect
- Script Efek Bintang
<script src="http://sites.google.com/site/monosbit/monosbit_bintang.js"></script>
Script ini menampilkan efek bintang berjatuhan pada saat mouse digerakan di halaman blog atau website. Taruh script ini dibawah <body> pada kode HTML Template blog atau bisa juga dipasang di kotak postingan gadget sebagai widget blog. - Script Efek Pelangi Pada Mouseover Teks Link
<script src="http://sites.google.com/site/monosbit/monosbit_rainbow.js"></script>
Contoh :
[ Dekatkan Mouse Pada Teks Ini ]
Cara Penggunaan Script :
<a href="link.html" onmouseover="doRainbow(this);" onmouseout="stopRainbow();">Test Program</a>
Perhatikan kode yang berwarna biru, taruh kode tersebut pada teks link yang ingin dibuat efek pelangi.Taruh script ini dibawah <body> pada kode HTML Template blog atau bisa juga dipasang di kotak postingan gadget sebagai widget blog.
Welcome Alert
- Teks Alert Saat Masuk Blog
<script>window.onload=alert('SELAMAT DATANG Jangan lupa isi Buku Tamu ya!!!');</script>
Taruh script ini dibawah <body> pada kode HTML Template blog atau bisa juga dipasang di kotak postingan gadget sebagai widget blog. - Text Alert Saat Mau keluar Blog
<script type="text/javascript">window.onbeforeunload = function() {return "Sampai Jumpa Lagi !";};</script>
Taruh script ini di bawah <body> pada kode HTML Template blog atau bisa juga di kotak postingan gadget blog. - Teks alert pada Link (saat link di-klik maka akan ada peringatan muncul)
onclick="alert('Siapa...silahkan masuk'); return true"
Taruh script ini didalam tag <a>Link</a> pada kode HTML atau pada tag HTML lain yang ingin diberi efek peringatan ketika akan di-klik.
Contoh :
<a href="http://monozcore.blogspot.com" onclick="alert('Siapa...silahkan masuk'); return true">JUDUL LINK</a>
Marquee Effect (Efek Teks Berjalan)
- Teks jalan dari kanan ke kiri
<marquee bgcolor="red" direction="left" scrolldelay="50">Kata2 anda disini</marquee>
- Teks jalan bolak balik
<marquee bgcolor="red" behavior="alternate" scrolldelay="50">Kata2 anda disini</marquee>
- direction :- direction="left" (Arah dari Kanan ke Kiri)
- direction="right" (Arah dari Kiri ke Kanan)
- direction="up" (Arah dari Bawah ke Atas)
- direction="down" (Arah dari Atas ke Bawah)
- scrolldelay (Kecepatan gerak teks)
- behavior (Gerakan teks)
Copyrights Script
- Script Anti Copy-Paste
Taruh script ini diatas </Head> - Me-Nonaktifkan Klik Kanan
Taruh script ini diatas </Head>
Title Bar Effect
- Efek Teks Berkelanjutan
Taruh script ini diatas </Head> - Efek Teks Berganti
Taruh script ini diatas </Head>
Link Hover
- Script Link Bekerlip
Taruh script ini diatas </Head>
Contoh :[ Dekatkan Mouse Pada Teks Ini ]
Pilihan Gambar Blink :- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLYHYfdeMuDPx0g4RI_sIsU-zJQazyhJAMRHE4viYhrhrtsL2Ny1-3qEWRbcBco8U1RiCtEGGbBYXo9AB4V55YZvOpA53r9KCMr-IokiEA4H3SZJlc_qyotzoWrVtnvORW9EDeTGVrUWE/s1600/BlinkStar.gif
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZr4iAzN4lTAv7PZoAGqykTGlkpzjkuTXHwK1o0OztMCa1fin5i9IQldrcI158ujtpXVqGJXlzFiYVMIDpmXh21c_DTsxSFZNW_lMFvUdTTee6YSYLAEnD_ORZ6pPQD_db7hDG-IaN3S0/s1600/str4.gif
Miscelenous
- Script Google Translate
Contoh : - Script Ucapan Selamat Sesuai Waktu
Taruh script ini diatas </Head> - Script Mouse Hover Berganti Gambar
Taruh script ini pada tag img
Contoh :
Dekatkan kursor pada gambar >>
Kode HTML :
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl4S-_bd81YurXYDnUhPuFhMlsMqNv6mB5X6EtQJzHgi0b904yyYD_472bFuVlC6u71zlA5L6mdY40G49dI0kCuDYQfP2BWHlztGigOv9Rn9ASzi30SIROtpuE3j1lQ1X58bgZUVcQTMRF/s1600/Minion-Hello-icon.png" onMouseOver="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4nFUnRHsloRfnbMeGEZGna2KRXzoxNSj6_qeMEHNyq6hBqDPsT2YaScUKN6-LgiBdXEXfDayAMtP7QsiKPZPzhAbwd-kKpkPzJI2j1YzB9SaUOZk8GT9WJKxLK3xHeRhxyWTu3fd8pkKz/s1600/Minion-Kungfu-icon.png'" onMouseOut="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl4S-_bd81YurXYDnUhPuFhMlsMqNv6mB5X6EtQJzHgi0b904yyYD_472bFuVlC6u71zlA5L6mdY40G49dI0kCuDYQfP2BWHlztGigOv9Rn9ASzi30SIROtpuE3j1lQ1X58bgZUVcQTMRF/s1600/Minion-Hello-icon.png'"/> - Script Redirect Ctrl+U ButtonScript ini berfungsi untuk mengarahkan pengunjung blog ke suatu halaman blog apabila pengunjung menekan tombol keyboard CTRL + U, kombinasi tombol ini pada browser berfungsi untuk melihat kode sumber HTML blog atau website. Salah satu trik untuk mematikan fungsi kombinasi tombol ini yaitu menggunakan script berikut ini.
Contoh :Coba tekan tombol keyboard Ctrl + U pada keyboard sobat, setelah ditekan sobat akan diarahkan ke halaman kontak monozcore. Apabila tidak menggunakan script ini sobat akan melihat kode sumber HTML blog monozcore. Untuk bisa membedakannya coba buka halaman situs lain kemudian tekan tombol keyboard Ctrl + U.Silakan sobat ganti URL http://monozcore.blogspot.com dengan link URL yang sobat inginkan.
.: Semoga Bermanfaat :.
0 Comments