Hello Kitty Cursor Trail

Hello Kitty Cursor Trail merupakan widget efek jejak kursor mouse di blog dengan animasi karakter Hello Kitty yang lucu dan imut. Widget ini cocok untuk blog yang memiliki tema template Hello Kitty ataupun blog dengan warna tema pink. Widget ini seperti widget cursor trail yang sudah pernah saya buat sebelumnya, yaitu Cursor Trail Saint Saiya, Cursor Trail TMNT dan Cursor Trail Naruto. Oke mazbro langsung aja ke TKP untuk melihat Hello Kitty beraksi di blog, untuk contoh hasilnya seperti pada halaman postingan ini, jika mouse digerakan maka akan meninggalkan jejak karakter Hello Kitty... Gimana sob, kerenkan ??? oke dech buat yang tertarik memasang widget ini silakan di copy-paste scriptnya...

Cara Pemasangan

• Login ke blog sobat...
• Klik "More Options" selector box kemudian klik "Template" setelah itu pilih "Edit HTML".
• Tekan tombol keyboard Ctrl+F dan cari kode berikut: </Head>
• Copy-Paste kode di bawah ini tepat di atas Kode </Head>.
  
  

  <script>
  /* http://monozcore.blogspot.com Visit us to get more updates */
  
  /* Put CSS Style Element to Body */
  $('body').append('<style type="text/css">.imgLayerTrail {position:absolute;top:0px;left:0px;visibility:hidden;}</style>');
  
  /* Image Variabel URL */
  theimage1 = "http://sites.google.com/site/monozcore/home/Hello_Kitty_Icon1.png";
  theimage2 = "http://sites.google.com/site/monozcore/home/Hello_Kitty_Icon2.png";
  theimage3 = "http://sites.google.com/site/monozcore/home/Hello_Kitty_Icon3.png";
  theimage4 = "http://sites.google.com/site/monozcore/home/Hello_Kitty_Icon4.png";
  theimage5 = "http://sites.google.com/site/monozcore/home/Hello_Kitty_Icon5.png";
  
  /* Setting */
  imageCount = 15;   /*maximum number of images on screen at one time*/
  curImage = 0;      /*the last image DIV to be displayed (used for timer)*/
  imageDelay = 1000; /*duration images stay on screen (in milliseconds)*/
  imageSpacer = 50;  /*distance to move mouse b4 next image appears*/
  
  /* Browser checking and syntax variables */
  var docLayers = (document.layers) ? true:false;
  var docId = (document.getElementById) ? true:false;
  var docAll = (document.all) ? true:false;
  var docbitK = (docLayers) ? "document.layers['":(docId) ? "document.getElementById('":(docAll) ? "document.all['":"document.";
  var docbitendK = (docLayers) ? "']":(docId) ? "')":(docAll) ? "']":"";
  var stylebitK = (docLayers) ? "":".style";
  var showbitK = (docLayers) ? "show":"visible";
  var hidebitK = (docLayers) ? "hide":"hidden";
  var imgns6 = document.getElementById&&!document.all;
  
  /* Variables used in script */
  var imgPosX, imgposY, imglastX, imglastY, imageCount, curImage, imageDelay, imageSpacer, theimage;
  var imglastX = 0;
  var imglastY = 0;
  
  /* Collection of functions to get mouse position and place the images */
  function doImgTrail(e) {
  imgPosX = getMouseXPos(e);
  imgposY = getMouseYPos(e);
  if (imgPosX>(imglastX+imageSpacer)||imgPosX<(imglastX-imageSpacer)||imgposY>(imglastY+imageSpacer)||imgposY<(imglastY-imageSpacer)) {
      showImgTrail(imgPosX,imgposY);
      imglastX = imgPosX;
      imglastY = imgposY;
  }}
  /* Get the horizontal position of the mouse */
  function getMouseXPos(e) {
    if (document.layers||imgns6) {
      return parseInt(e.pageX+10);
    } else {
      return (parseInt(event.clientX+10) + parseInt(document.body.scrollLeft));
  }}
  /* Get the vartical position of the mouse */
  function getMouseYPos(e) {
    if (document.layers||imgns6) {
      return parseInt(e.pageY);
    } else {
      return (parseInt(event.clientY) + parseInt(document.body.scrollTop));
  }}
  /* Place the image and start timer so that it disappears after a period of time */
  function showImgTrail(x,y) {
    var processedx=imgns6? Math.min(x,window.innerWidth-75) : docAll? Math.min(x,document.body.clientWidth-55) : x;
    if (curImage >= imageCount) {curImage = 0}
     $('#imgLayerTrail' + curImage).css('left', processedx+'px');
     $('#imgLayerTrail' + curImage).css('top', y+'px');
    eval(docbitK + "imgLayerTrail" + curImage + docbitendK + stylebitK + ".visibility = '" + showbitK + "'");
    if (eval("typeof(imageDelay" + curImage + ")")=="number") {
      eval("clearTimeout(imageDelay" + curImage + ")");
    }
    eval("imageDelay" + curImage + " = setTimeout('hideImgTrail(" + curImage + ")',imageDelay)");
    curImage += 1;
  }
  /* Make the image disappear */
  function hideImgTrail(kImgNum) {
    eval(docbitK + "imgLayerTrail" + kImgNum + docbitendK + stylebitK + ".visibility = '" + hidebitK + "'");
  }
  /* http://monozcore.blogspot.com Visit us to get more updates */
  function imageAniBegin(){
  /* Let the browser know when the mouse moves */
  if (docLayers) {
    document.captureEvents(Event.MOUSEMOVE);
    document.onMouseMove = doImgTrail;
  } else {
    document.onmousemove = doImgTrail;
  }}
  
  /* Write Document HTML using jQuery for easy applied */
  if (document.all||document.getElementById||document.layers){
  for (kImg=0;kImg<imageCount;kImg=kImg+4) {
  var strHTMLTrail='<img src="' + theimage1 + '" id="imgLayerTrail' + kImg + '" class="imgLayerTrail" alt="" border="0">';
  strHTMLTrail +='<img src="' + theimage2 + '" id="imgLayerTrail' + (kImg+1) + '" class="imgLayerTrail" alt="" border="0">';
  strHTMLTrail +='<img src="' + theimage3 + '" id="imgLayerTrail' + (kImg+2) + '" class="imgLayerTrail" alt="" border="0">';
  strHTMLTrail +='<img src="' + theimage4 + '" id="imgLayerTrail' + (kImg+3) + '" class="imgLayerTrail" alt="" border="0">';
  strHTMLTrail +='<img src="' + theimage5 + '" id="imgLayerTrail' + (kImg+4) + '" class="imgLayerTrail" alt="" border="0">';
  $('body').append(strHTMLTrail);
  }}
  imageAniBegin();
  </script>

• Keterangan :
  - Apabila ingin menggunakan gambar Hello Kitty yang lain silakan dirubah URL Images pada kode script diatas.

Oke sobat monozcore jangan lupa kritik dan sarannya yaa biar postingan berikutnya semakin unik dan menarik.. Buat yang masih bingung dengan pemasangan widget ini.. monggo ditanyakan lewat kotak komentar, email, facebook ataupun twitter monozcore... happy blogging...

.:Selamat Mencoba:.