Cara Membuat Cursor Blog Keren Dengan Efek Bintang Bertaburan - BBT: Cara membuat blog jadi keren dengan menambahkan script efek bintang bertaburan pada cursor blog blogger dengan mudah

Cara Membuat Cursor Blog Keren Dengan Efek Bintang Bertaburan

Cara Membuat Cursor Blog Keren Dengan Efek Bintang Bertaburan
Mau membuat cursor blog sobat jadi lebih keren dengan menambahkan efek bintang bertaburan ?

Jika sobat ingin membuat blog terlihat keren dengan efek tambahan, maka efek bintang bertaburan pada cursor blog ini mungkin bisa sobat jadikan sebagai alat untuk membuat blog terlihat lebih keren.

Oh ia, mungkin sobat juga ingin tahu bagaimana cara merubah cursor blog, jika ingin tahu caranya silakan sobat baca :

Nah, pada tutorial kali ini saya akan menuliskan panduan bagaimana cara membuat cursor blog sobat terlihat lebih keren dengan menambahkan efek bintang bertaburan dengan bantuan JavaScript, dan caranya mudah kok.

Cara Memberi Efek Bintang Bertaburan Di Cursor Blogger

Pada seri tutorial ini saya akan menuliskan 2 cara membuat efek bintang bertaburan di blogger, dan saya akan menuliskannya mulai dari cara yang menurut saya paling mudah. Dan silakan sobat terapkan cara yang menurut sobat paling mudah.

Oke, mari kita mulai satu persatu

Cara Membuat Efek Bintang Bertaburan Pada Cursor Blogger Dengan Mudah Dan Cepat

Ini adalah cara pertama yang bisa sobat lakukan untuk memberi efek bintang bertaburan di cursor blogger.

Dan untuk membuat efek bintang bertaburan di cursor blogger dengan cara ini silakan sobat ikuti langkah-langkah berikut :
  1. Masuk ke Dasbor Blogger
  2. Buka halaman Tata Letak
  3. Klik Tambahkan Gadget
  4. Pilih gadget HTML/JavaScript
  5. Masukkan script efek bintang bertaburan pada bagian Konten / Content (script saya sertakan di bawah nanti)
  6. Klik tombol Simpan / Save, dan selesai.
Cara Membuat Cursor Blog Keren Dengan Efek Bintang Bertaburan
Nah itulah cara yang menurut saya paling mudah untuk membuat efek bintang bertaburan di cursor blog blogger sobat, selain cara ini ada juga cara lain yang bisa sobat lakukan, silakan baca terus.

Alternatif Cara Membuat Efek Bintang Bertaburan Di Cursor Blog Blogger

Ini merupakan cara kedua yang bisa sobat jadikan sebagai alternatif untuk memberi efek bintang bertaburan di cursor blogger.
Dan cara ini tidak disarankan bagi pengguna blogger yang masih sangat pemula, karena memiliki resiko template / tampilan blog jadi error / berantakan, namun tidak ada salahnya juga jika sobat ingin mencoba cara ini.

Asalkan teliti menggunakan cara ini maka template sobat akan aman.

Oke, berikut langkah-langkah yang bisa sobat lakukan untuk membuat efek bintang bertaburan di cursor blog blogger :
  1. Masuk ke Dasbor blogger
  2. Buka halaman Template
  3. Backup template blogger sobat dengan cara mengklik tombol Cadangkan/Pulihkan (Backup/Restore) kemudian download full template, untuk jaga-jaga.
  4. Klik tombol Edit HTML (maka sobat akan dibawa ke halaman editor template blogger)
  5. Masukkan script efek bintang bertaburan pada template blog sobat sebelum kode </body>
  6. Klik tombol Simpan Template
  7. Selesai.
Cara Membuat Cursor Blog Keren Dengan Efek Bintang Bertaburan
Nah itulah 2 cara membuat efek bintang bertaburan di cursor blog blogger yang bisa sobat lakukan, khusus untuk cara kedua sebaiknya sobat lebih teliti dan hati-hati.

Script Efek Bintang Bertaburan Di Cursor

Berikut script efek bintang bertaburan di cursor yang bisa sobat gunakan.
<script type='text/javascript'>
// <![CDATA[
var colour="#0000ff";
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>
loading...
Lihat / Tinggalkan Komentar
- All Rights Reserved. Powered by Blogger. Membuat Blog

Terimakasih telah membaca , semoga artikel tentang Cara Membuat Cursor Blog Keren Dengan Efek Bintang Bertaburan yang ada di blog ini bermanfaat buat sobat