Efek Bintang Berjatuhan di Cursor Pada Blog
Pernahkah sobat mengunjungi suatu blog/website kemudian sobat melihat dari cursor sobat muncul seperti bintang yang jatuh, atau menurut saya lebih mirip seperti efek tongkat sihir. xixixi :D
Untuk mempercantik suatu blog, sangat banyak sekali cara yang bisa digunakan, dan yang paling mudah adalah sebuah gadget. Untuk kali ini saya akan memberikan salah satu cara mempercantik blok dengan memberikan efek bintang jatuh pada cursor ketika digerakkan, sebenarnya bukan bintang sih, cuman tanda + yang kecil sehingga mirip seperti bintang yang jatuh.
Sebenarnya ini bukanlah suatu gadget, tapi bisa dibilang gadget juga karena ini menggunakan kode javascript, dan untuk kode javascriptnya silahkan dilihat dibawah ini :
<script src='https://produck.googlecode.com/files/Bintang%20Merah.js' type='text/javascript'/></script>
Untuk menambahkannya silahkan ikuti cara berikut ini :
- masuk pada blogger
- kemudian masuk pada Tata Letak -> Add Gadget
- pilih HTML/JavaSript
- kemudian taruh kode diatas dalam HTML/JavaScript
- klik Save dan liahat hasilnya
- masuk pada Template -> Edit HTML
- centang pada Expand Template Widget
- kemudian cari kode ]]></b:skin>
- taruh script diatas tepat dibawah kode ]]></b:skin> tadi
- kemudian tekan Save
Jika terjadi eror maka hapus kode </script> yang ada pada kode diatas.
Kode diatas adalah untuk bintang yang berwarna merah, sobat bisa juga menggantinya dengan beberapa pilihan warna dibawah ini, caranya cukup ganti Link yang berwarna merah pada kode diatas dengan link berikut :
Warna Hijau
https://produck.googlecode.com/files/Bintang%20Hijau.js
Warna Biru
https://produck.googlecode.com/files/Bintang%20Biru.js
Warna Kuning
https://produck.googlecode.com/files/Bintang%20Kuning.js
Bagi sobat yang suka mengutak atik kode JavaScript silahkan edit kode dibawah ini, itu adalah kode JS dari efek bintang jatuh diatas, jika sudah maka save dengan extensi .js, kemudian upload pada Google Code yang sobat punya, jangan lupa ketika hendak memasang di blog tambahkan kode
<script src='Link JS Sobat' type='text/javascript'/></script>
Dan berikut adalah kode JS nya untuk sobat :
//Editted by Pro-Duck.Blogspot.com
// JavaScript Document<script type='text/javascript'>
// <![CDATA[
var colour="red";
var sparkles=65;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
Sekian saja dari saya untuk kali ini, semoga artikel diatas bermanfaat, dan terima kasih karena sobat sudah mau berkunjung ke blog saya ini. ^_^
Keyword :
By 
Haloo pak^^
Kami dari SENTANAPOKER ingin menawarkan pak^^
Untuk saat ini kami menerima Deposit Melalui Pulsa ya pak.
*untuk minimal deposit 10ribu
*untuk minimal Withdraw 25ribu
*untuk deposit pulsa kami menerima provider
-XL
-Telkomsel
untuk bonus yang kami miliki kami memiliki
*bonus cashback 0,5%
*bunus refferal 20%
*bonus gebiar bulanan (N-max,samsung Note 10+,Iphone xr 64G,camera go pro 7hero,Apple airpods 2 ,dan freechips)
Daftar Langsung Di:
SENTANAPOKER
Kontak Kami;
WA : +855 9647 76509
Line : SentanaPoker
Wechat : SentanaPokerLivechat Sentanapoker
Proses deposit dan withdraw tercepat bisa anda rasakan jika bermain di Sentanapoker. So… ? tunggu apa lagi ? Mari bergabung dengan kami. Pelayanan CS yang ramah dan Proffesional dan pastinya sangat aman juga bisa anda dapatkan di Sentanapoker.
Post a Comment