28 February 2012

Cara Menghias Cursor Blog

Photobucket
Picture by : Tutorial Untuk Blog

Hari ini menjadi hari yang melelahkan dan membosankan buat saya, melelahkan karena banyaknya pekerjaan yang harus diselesaikan, dan membosankan karena jaringan internet yang saya gunakan lagi gangguan. Tepaksa, postingan yang seharusnya saya publikasikan, saya tunda untuk beberapa hari. Terus postingan yang sobat blogger baca saat ini, bisa dikatakan sebagai media curhat supaya kedua rasa yang sudah saya sebutkan tadi bisa sedikit berkurang. Tapi kalau saya teruskan curhat saya ini, bisa-bisa blog ini menjadi blog untuk curhat bukan blog yang kasih tutorial tentang blog. Jadi, saya putuskan untuk membuat tutorial singkat tentang cara membuat Cursor Blog di kejar warna. Salah salah salah, saya ganti istilahnya menjadi cara membuat cursor di krumuni warna. Waduh, kayaknya masih kurang tepat juga istilah ini, ya sudah, saya pakai istilah yang lebih umum saja yaitu "Cara Modifikasi Cursor Blog".

Teknik ini tidak merubah tampilan default dari cursor kita yang berbentuk panah (Arrow), akan tetapi crusor yang tanda panah itu akan di kejar oleh sekumpulan warna yang indah. Teknik ini bisa dikatakan sebagai salah satu cara memperindah blog. Mungkin sobat blogger tidak bisa membayangkan apa yang sudah saya jelaskan tadi. Jadi, supaya sobat blogger bisa melihat langsung seperti apa yang saya jelaskan tadi, langsung saja praktekkan tutorial ini :

Cara Modifikasi Crusor Blog :
  • Seperti biasa, masuk dulu ke akun blogger sobat
  • Di bagian Dashboard klik design
  • Selanjutnya klik Add a Gadget dan HTML/javascript
  • Copy kode di bawah ini dan paste pada kolom yang tersedia :

<script language="JavaScript" type="text/javascript">
var xCol = "#FF0000";
var yCol = "#FFFF00";
var zCol = "#0000FF";
var n = 6; //number of dots per trail.
var t = 40; //setTimeout speed.
var s = 0.2; //effect speed.
var r,h,w;
var d = document;
var my = 10;
var mx = 10;
var stp = 0;
var evn = 360/3;
var vx = new Array();
var vy = new Array();
var vz = new Array();
var dy = new Array();
var dx = new Array();
var pix = "px";
var strictmod = ((document.compatMode) &&
document.compatMode.indexOf("CSS") != -1);
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;
for (i = 0; i < n; i++)
{
var dims = (i+1)/2;
d.write('<div id="x'+(idx+i)+'" style="position:absolute;'
+'top:0px;left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+xCol+';font-size:'+dims+'px"><\/div>'
+'<div id="y'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+yCol+';font-size:'+dims+'px"><\/div>'
+'<div id="z'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+zCol+';font-size:'+dims+'px"><\/div>');
}
if (domWw) r = window;
else
{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else
{
if (d.body && typeof d.body.clientWidth == "number")
r = d.body;
}
}
function winsize()
{
var oh,sy,ow,sx,rh,rw;
if (domWw)
{
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number")
{
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else
{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh;
w = rw;
}
else
{
h = r.clientHeight;
w = r.clientWidth;
}
}
function scrl(yx)
{
var y,x;
if (domSy)
{
y = r.pageYOffset;
x = r.pageXOffset;
}
else
{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}
function mouse(e)
{
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == 'number')
{
my = e.pageY - msy + 16;
mx = e.pageX + 6;
}
else
{
my = e.clientY - msy + 16;
mx = e.clientX + 6;
}
if (my > h-65) my = h-65;
if (mx > w-50) mx = w-50;
}
function assgn()
{
for (j = 0; j < 3; j++)
{
dy[j] = my + 50 * Math.cos(stp+j*evn*Math.PI/180) *
Math.sin((stp+j*25)/2) + scrl(0) + pix;
dx[j] = mx + 50 * Math.sin(stp+j*evn*Math.PI/180) *
Math.sin((stp+j*25)/2) * Math.sin(stp/4) + pix;
}
stp+=s;
for (i = 0; i < n; i++)
{
if (i < n-1)
{
vx[i].top = vx[i+1].top; vx[i].left = vx[i+1].left;
vy[i].top = vy[i+1].top; vy[i].left = vy[i+1].left;
vz[i].top = vz[i+1].top; vz[i].left = vz[i+1].left;
}
else
{
vx[i].top = dy[0]; vx[i].left = dx[0];
vy[i].top = dy[1]; vy[i].left = dx[1];
vz[i].top = dy[2]; vz[i].left = dx[2];
}
}
setTimeout(assgn,t);
}
function init()
{
for (i = 0; i < n; i++)
{
vx[i] = document.getElementById("x"+(idx+i)).style;
vy[i] = document.getElementById("y"+(idx+i)).style;
vz[i] = document.getElementById("z"+(idx+i)).style;
}
winsize();
assgn();
}
if (window.addEventListener)
{
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
}
else
if (window.attachEvent)
{
window.attachEvent("onload",init);
document.attachEvent("onmousemove",mouse);
window.attachEvent("onresize",winsize);
}
</script>

  • Save
Tambahan :
Kalau sobat blogger mau mengganti warna yang mengitari cursor, sobat bisa rubah kode ini :
var xCol = "#FF0000";
var yCol = "#FFFF00";
var zCol = "#0000FF";
Untuk melihat kode warna silahkan kunjungi halaman blog saya ini : HTML Color Code


Baca tutorial menarik lainnya di bawah ini :

73 comments:

  1. komplit dan lansung ke sasaran....
    trims MasBro....

    ReplyDelete
  2. thanks mas brooo kalau ad informasi tolong di share lagi

    ReplyDelete
  3. terima kasih banyak , hanya yg membuat tulisan judul ditengah-tengah belum berhasil

    ReplyDelete
  4. thank's gan

    nitip ya

    muslihthekop.blogspot.com

    ReplyDelete
  5. makasih banyak ya gan sudah mau berbagi ilmunya

    ReplyDelete
  6. ilmunya sungguh bermnafaat sekali nih

    ReplyDelete
  7. Thanks gan ..
    jd gak bosen gw liat cursor.y..
    low smpet mampir http://bblackprince.blogspot.com/ yach hhehe
    XD

    ReplyDelete
  8. kok punya q gagal sih...gimana cranya pke blog yg skrang ini...T,T

    ReplyDelete
  9. nice post kk :) jngn lupa mampir2 ya http://ebooksetia.blogspot.com

    ReplyDelete
  10. Thank ya atas informasinya////jngan lupa kunjungi blog ku

    ReplyDelete
  11. Kalau Add a Gadget dan HTML/javascript itu di sebelah mana???? PLEASE BALES!!!!

    ReplyDelete
  12. kok gk bisa ya tolong dibantu dong

    ReplyDelete
  13. cara nya gimana gan, kok g bisa?

    ReplyDelete
  14. yg cursor kok ndak bisa yah...??
    aduh tapi makasi bnget deh buat ilmu yg laennya,,

    ReplyDelete
  15. bahasa html buat gue merinding Gan......coz sering error templatenya...

    ReplyDelete
  16. cara nge save HTML/JavaScript ga bisa

    ReplyDelete
  17. dah berhasil ,, tp kok gada hiasanx ya ?

    ReplyDelete
  18. kok aku gak bisa yaa ... udah di kopas ,, tapi malah ada bacaan merah nya .. gak bisa .. aku bingung

    ReplyDelete
  19. gan bles dong...punya gue gagal juga

    ReplyDelete
  20. kok gue gagal yak?
    mampir di http://sweetpeppermintandsoda.blogspot.com/
    ^^ happy blogging

    ReplyDelete
  21. add a gadgetnya dimana yaa ? kok sulit nemuinnyaa :( ... oiyaa.. makasih juga buat infonya..

    ReplyDelete
  22. sy sudah coba tapi gak berhasil namun artikel agan ttg membuat salam pembuka blog berhasil, kira-kira salah di mana ya gan?

    ReplyDelete
  23. dapet ilmu lagi dalam menghias blog....blog Ane bisa lebih cantik lagi nih...
    terima kasih

    ReplyDelete
  24. jadi makin menarik kalau seperti ini
    nice share

    ReplyDelete
  25. Hihihi ini nih yang saya suka,... nanti saya akan coba prktekin di blog baru saya hehe

    ReplyDelete
  26. langsung preaktek dan berhasil... makasih

    ReplyDelete
  27. Thanks gan...
    Mampir juga di Blog ku..

    ReplyDelete
  28. aq ini org bru di blog.. so aq mau nanya... urmm disign terletak di mana yha?

    ReplyDelete
  29. duh tampilan blog gua baru nih beda banget, ga ada bacaan add gadget

    ReplyDelete
  30. susah bangat aku mahu menghias blog ku aku orang baru
    yang nmembuat blog so aku tidak tahu macama mana caranya..tlg ajari aku,

    ReplyDelete
  31. Oya, mau nnya nih..
    Kalau kursorny brubah mnjadi gambar bs ga??
    Jd kursorny bukan gmbar segitiga putih biasa gini, tp berubah mnjdi gmbr yg lucu, contoh love, atau lainny.
    Thank's ya.
    Kunjungi blog sya yg berantakkn ini, hehe..
    firdhamayasari.blogspot.com

    ReplyDelete
  32. This comment has been removed by the author.

    ReplyDelete
  33. Izin copy link yaa.. Makasih ;)

    ReplyDelete
  34. kunjungi blogg ku ya.
    www.MyniaAsih.blogspot.com

    ReplyDelete