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 :

84 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. makasih gan ane masih newbie nih

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

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

    ReplyDelete
  25. jadi makin menarik kalau seperti ini
    nice share

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

    ReplyDelete
  27. langsung preaktek dan berhasil... makasih

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

    ReplyDelete
  29. yang di copy semuany or yg mana aja sih

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

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

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

    ReplyDelete
  33. 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
  34. This comment has been removed by the author.

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

    ReplyDelete
  36. kok ada tulisan ini ya? Kesalahan saat mengurai XML, baris 28, kolom 12: Element type "div" must be followed by either attribute specifications, ">" or "/>".
    gmn cara koreksinya min?

    ReplyDelete
  37. togel singapore

    Agen TOGEL 4DPOIN,Online Terpercaya.
    Minimal Deposit Dan Withdraw 20.000
    Keterangan Lebih Lanjut, Anda Bisa Hubungi Disini.
    ★ Pin BBM : D1A279B6
    ★ Pin BBM : 7B83E334
    ★ Whatsapp : +85598291698
    ★ Skype : Poin.4D
    ★ Line : +85598291698

    ReplyDelete
  38. Your own warm and friendly key points indicates a lot to me and extremely more to my mates. With thanks; from each one of us.

    idn poker

    ReplyDelete
  39. I think other website proprietors should take this site as an model, very clean and magnificent user friendly style and design, s128 apk let alone the content. You are an expert in this topic!

    ReplyDelete
  40. Very nice Post,Erectile Dysfunction is a common issues now these days .so it is not a big problem .if you want to cure this then you should go for Cenforce and Fildena product from our online pharmacy store visit more:-


    Cenforce 100
    Cenforce 200
    Fildena 100
    Vidalista 40
    Vidalista 60
    Cenforce 200
    vidalista 60

    ReplyDelete
  41. You can simply visit Amazon.com/mytv to link your Amazon Prime Video account to your streaming device.
    amazon.com/mytv
    amazon.com/redeem
    amazon.com/code
    amazon.com/mytv

    ReplyDelete