Pengikut

Salam blogger, pada kesempatan kali ini saya akan sedikit membahas tentang  Design blog yaitu cara membuat efek bintang berjatuhan di blog. Maksud dari efek bintang jatuh disini adalah bintang bintang yang jatuh pada tampilan blog kita, cara kerjanya pun cukup mudah yakni hanya dengan menggerakan cursor mouse di blog sobat dan bintang pun akan berjatuhan mengikuti arah dari cursor tersebut. Dengan tutorial blogger yang satu ini blog kita akan terlihat lebih menarik dan tentunya semakin Ok.

Berikut Tutorial untuk membuat Efek Bintang Berjatuhan di Blog:
1. Login ke account blogger sobat
2. klik menu Tata letak
 
3. lalu tambah gadget
 
4. kemudian pilih html/javascript
5. Copy kode dibawah ini ke box html tersebut
<script type=’text/javascript’>
// <![CDATA[
var colour="#52D8ED";
var sparkles=100;
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=”3px”;
rlef.style.left=”0px”;
rdow.style.top=”0px”;
rdow.style.left=”3px”;
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);}
// ]]>
</script>
  • Catatan: Sobat bisa mengganti kode warna (teks merah) diatas dengan warna yang sobat inginkan
6. Simpan Gadget

Selamat mencoba dan semoga bermanfaat

Posting Komentar

  1. Saya coba terapkan gan, trims ya. Ditunggu kunjungannya...

    BalasHapus
    Balasan
    1. iya gan silahkan dicoba, thank's komentarnya

      Hapus
  2. gan kalo dipasangnya di blog wordpress bisa ga?

    BalasHapus
    Balasan
    1. asuh kalo untuk itu saya kurang tau gan saya belum pernah pake wordpress, tapi dicoba dulu ajah, siapa tau berhasil

      Hapus
  3. Balasan
    1. sama sma gan, makasih juga komentarnya

      Hapus
  4. Balasan
    1. kenapa gan, coba sekali lagi mungkin ada yang salah

      Hapus

Silahkan berkomentar, komentar sobat adalah inspirasi saya !!