Kumpulan JavaScript Unik Untuk Blog

JavaScript for Bloggers

Kumpulan beberapa kode HTML dan Javascript hasil blogwalking kemudian saya rangkum pada postingan artikel di MonosBit, 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 src="http://sites.google.com/site/monosbit/monosbit_daungugur.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 Faling Love Heart
```
<script src="http://sites.google.com/site/monosbit/monosbit_LoveHeart.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 Color Star
```
<script src="http://sites.google.com/site/monosbit/monosbit_ColoredStars.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 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://monosbit.blogspot.com" onclick="alert('Siapa...silahkan masuk'); return true">JUDUL LINK</a>

Marquee Effect (Efek Teks Berjalan)

Teks jalan dari kanan ke kiri
Kata2 anda disini

<marquee bgcolor="red" direction="left"  scrolldelay="50">Kata2 anda disini</marquee>

Teks jalan bolak balik
Kata2 anda disini
```
<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)
- bgcolor (Warna latar belakang teks)
- scrolldelay (Kecepatan gerak teks)
- behavior (Gerakan teks)

Copyrights Script

Script Anti Copy-Paste
<script type="text/javascript"> /*********************************************** * Disable select-text script- © Dynamic Drive (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ //form tags to omit in NS6+: var omitformtags=["input", "textarea", "select"] omitformtags=omitformtags.join("|") function disableselect(e){ if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1) return false } function reEnable(){ return true } if (typeof document.onselectstart!="undefined") document.onselectstart=new Function ("return false") else{ document.onmousedown=disableselect document.onmouseup=reEnable } </script>

Taruh script ini diatas </Head>

Me-Nonaktifkan Klik Kanan
<script language=JavaScript> </script>

Taruh script ini diatas </Head>

Title Bar Effect

Efek Teks Berkelanjutan
<script language="JavaScript"></script>

Taruh script ini diatas </Head>

Efek Teks Berganti
<script type="text/javascript">//<![CDATA[ var tmessage = new Array(); tmessage[0] = "Silakan"; tmessage[1] = "Tulis"; tmessage[2] = "Pesan"; tmessage[3] = "TitleBar"; tmessage[4] = "Anda"; tmessage[5] = "Disini"; var treps = 2 var tspeed = 120 var tp=tmessage.length; var tT=""; var tC=0; var tmC=0; var ts=0; var tsT=null; if(treps<1)treps=1; function doTheThing(){ tT=tmessage[tmC]; tA();} function tA(){ ts++ if(ts>9){ts=1} if(ts==1){document.title='[Monosbit]'+tT;} if(ts==2){document.title='[mOnosbit]'+tT;} if(ts==3){document.title='[moNosbit]'+tT;} if(ts==4){document.title='[monOsbit]'+tT;} if(ts==5){document.title='[monoSbit]'+tT;} if(ts==6){document.title='[monosBit]'+tT;} if(ts==7){document.title='[monosbIt]'+tT;} if(ts==8){document.title='[monosbiT]'+tT;} if(tC<(9*treps)){ tsT=setTimeout("tA()",tspeed); tC++ }else{ tC=0; ts=0; tmC++ if(tmC>tp-1)tmC=0; tsT=null; doTheThing();}} doTheThing(); //]]></script>

Taruh script ini diatas </Head>

Link Hover

Script Link Bekerlip
<style>a:hover {text-decoration:blink; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTIYdL9tCoBTxUXqtfFhofTqRFzMfXHg5HN_6hg7Zu7QeQJOIjfOHOi_rcmO7qoT6i-ppNJfvktRjKk9KSNFJnPR8bYJmJHPoXmvPzo2LCEo_4YzAJKevJo4LDFrDK-2MzwNQDPE2KWkA/s1600/blink.gif); } </style>Taruh script ini diatas </Head>

Contoh :[ Dekatkan Mouse Pada Teks Ini ]

Pilihan Gambar Blink :
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI1hy1eqkCRvHgY5FEMIELzP4z0EhDEYpKtNPosSJoFz-neDwKdrvRpwGJeR_Nd1gvJszbnuXH5vdvNhsbJF1EaGRZRKWmE4kmmMskwDo6-j8RVIOrzBj8kPYinpDj0-4CH6-9SyJPUQo/s1600/BlinkStar.gif
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisQYCCK16gXzpjkthTDgbDlZp4oGoOCZG6yMoAl-6QOpw03oyxR4MZOflD9xsFAB-fvXBcwd3rx95z-1zz7ZKJmEXoT_Pz1x8HoiX_FsSuEi7nglCiFFYcIgRQ0UX3_S_J8Ay5qrVIwdc/s1600/str4.gif

Miscelenous

Script Google Translate
<div style="text-align:center;"><div id="google_translate_element"></div><script type="text/javascript">function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'id', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false, multilanguagePage: true}, 'google_translate_element');} </script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script></div>
Contoh :

Animated Window Opener
<script>var winheight=100; var winsize=100; var x=5; function openwindow(thelocation){ temploc=thelocation; if (!(window.resizeTo&&document.all)&&!(window.resizeTo&&document.getElementById)){ window.open(thelocation); return; } win2=window.open("","","scrollbars"); win2.moveTo(0,0); win2.resizeTo(100,100); go2(); } function go2(){ if (winheight>=screen.availHeight-3) x=0; win2.resizeBy(5,x); winheight+=5; winsize+=5; if (winsize>=screen.width-40){ win2.location=temploc; winheight=100; winsize=100; x=5; return; } setTimeout("go2()",5); } </script>
Cara Penggunaan:
Gunakan kode onclick="openwindow('URL Tujuan')" pada setiap elemen HTML link yang ingin dibuka dengan efek animasi ini. Ganti URL Tujuan dengan link URL yang ingin dituju.

Script Ucapan Selamat Sesuai Waktu
<script type="text/javascript">date = new Date(); if ((date.getUTCHours() - date.getHours()) != 0) (date = date.getHours()) else (date = (8 + date.getHours())); if (date < 4) {alert("Selamat Malam!")} else {if (date < 11) {alert("Selamat Pagi,, Selamat Beraktifitas!")} else {if (date < 16) {alert("Selamat Siang!")} else {if (date < 20) {alert("Selamat Sore!")} else {alert("Selamat Malam Semuanya!")} } } } </script>
Taruh script ini diatas </Head>

Script Mouse Hover Berganti Gambar
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhAeHOp-L4kFhIAiz0nLZnPNgzUQJlNynjEdwvbYFuyrmPvNuJg5dFFH2Va_vPiWF9sMMponug1-TGKGys6ALSGCS4O6MlvDnKylp8DIuYmxHarnehOPbkJyKswyTmL49UDABaEzdh8ULi/s1600/Minion-Hello-icon.png" onMouseOver="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPM2WvKqoUhXC8_lF7bbmYsBC6yVHU-D7y_lGY-H0saDljvo1zmLrvfNKG0uhWk-0sXYqA0gU7hPIjkquQdJXLFsWMZ31QRzvAqRDUiITtIYZ71d5n5y6EgAoXOc19HVLQsPgxaoOl9jp8/s1600/Minion-Kungfu-icon.png'" onMouseOut="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhAeHOp-L4kFhIAiz0nLZnPNgzUQJlNynjEdwvbYFuyrmPvNuJg5dFFH2Va_vPiWF9sMMponug1-TGKGys6ALSGCS4O6MlvDnKylp8DIuYmxHarnehOPbkJyKswyTmL49UDABaEzdh8ULi/s1600/Minion-Hello-icon.png'"/>Taruh script ini pada tag img
Contoh :
Dekatkan kursor pada gambar >>

Kode HTML :
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhAeHOp-L4kFhIAiz0nLZnPNgzUQJlNynjEdwvbYFuyrmPvNuJg5dFFH2Va_vPiWF9sMMponug1-TGKGys6ALSGCS4O6MlvDnKylp8DIuYmxHarnehOPbkJyKswyTmL49UDABaEzdh8ULi/s1600/Minion-Hello-icon.png" onMouseOver="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPM2WvKqoUhXC8_lF7bbmYsBC6yVHU-D7y_lGY-H0saDljvo1zmLrvfNKG0uhWk-0sXYqA0gU7hPIjkquQdJXLFsWMZ31QRzvAqRDUiITtIYZ71d5n5y6EgAoXOc19HVLQsPgxaoOl9jp8/s1600/Minion-Kungfu-icon.png'" onMouseOut="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhAeHOp-L4kFhIAiz0nLZnPNgzUQJlNynjEdwvbYFuyrmPvNuJg5dFFH2Va_vPiWF9sMMponug1-TGKGys6ALSGCS4O6MlvDnKylp8DIuYmxHarnehOPbkJyKswyTmL49UDABaEzdh8ULi/s1600/Minion-Hello-icon.png'"/>

.: Semoga Bermanfaat :.

Kumpulan JavaScript Unik Untuk Blog

0 Response to "Kumpulan JavaScript Unik Untuk Blog"

Post a Comment

Popular Post