Cursor Trail Art Of Fighting Saga

Cursor Trail Art Of Fighting Saga merupakan widget bertemakan karakter-karakter dari game Art of Fighting yang terkenal. Game Neo Geo besutan SNK yang berjudul Art of Fighting ini merupakan game bergenre fighting yang terkenal di era permainan ding-dong dan merupakan salah satu game favorit saya. Karakter favorit dari game Art of Fighting adalah Robert Garcia dan Ryo. Oke sob... cukup sekian intronya kita lanjutkan pembahasannya. Widget cursor trail merupakan salah satu ciri khas postingan artikel yang ada di blog MonozCore dengan beberapa postingan artikelnya seperti :

- Hello Kitty Cursor Trail
- Mortal Kombat Cursor Trail 2
- Explosion Cursor Trail
- Mortal Kombat Female Ninja Cursor Trail
- Mortal Kombat Ninja Cursor Trail
- Saint Saiya Cursor Trail
- TMNT Cursor Trail
- Sailormoon Cursor Trail
- Naruto Cursor Trail
- Tinkerbell Fairy Cursor Trail
- Doraemon Cursor Trail
- Cursor Effect Bubble Trail

Oke sob sama seperti widget cursor trail yang sudah pernah dibuat dengan sedikit modifikasi dan update script untuk memudahkan pemasangan, widget ini menggunakan JavaScript sederhana dan tidak akan memberatkan workload browser untuk blog sobat untuk contoh seperti yang terlihat pada postingan artikel ini... Buat yang tertarik memasang widget ini langsung aja ke TKP...

Cara Pemasangan

• Login » blogger.
• Rancangan » Edit HTML.
• Tekan tombol keyboard Ctrl+F dan cari kode berikut: </Body>
• Copy-Paste kode di bawah ini tepat di atas Kode </Body> atau bisa juga langsung ditaruh di kotak gadget sebagai widget untuk mempermudah pemasangan scriptnya.
  
  

  /* 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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcpkj_w99ZA4tEEPzbZmNo20pOrigHxjZY9s1yK7-vpZt9VWCyPo-O4rkw51qqHjO38vbbgHiWQ_USR5DE15UNCpeYZbggslTxUs8VH_6E_m3tTXT_6hTdrK_hWpBVGimopA7A0-J7DUw/s1600/artoffighting.gif";
  theimage2 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw1xLtcK6IJ9qzxz3UGx3kZrRRwh6wYVpvYX66FdadHpxjMxTK2J6dFrApVctCkdJQO4ALpNjejxVC2WHmOykDGw8CKBHSiCNIP6zxCw8XRuPBBSwzAMnpE5g8oustyd6COFWRtGbcul8/s1600/artoffighting1.gif";
  theimage3 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXBUgYmTL6ktDvekCGxGMG6povSE5dG7xQSlFUs6gY6-cpyKU8EUC-qnJ25j40hfrW-weLFl6gplfJI33Wff2oU0bna9nK8absDP9QKErXA1y5BlaTSsAJyOi6dBV35w9AJ8MJ6XAe3J4/s1600/artoffighting3.gif";
  theimage4 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJoDzqXuMbN4q_uR973DXHNjYyM8wWcLBfruQV7rWeczvsoHDphGt1YEPiCM2YLL9hK9CM_It_OTlxzrAenaRfgS3XZtBiGIKZRBr5NtCIJR38g19b3wRWSNUWCwWnk_f2uSv7iwPyy1g/s1600/artoffighting14.gif";
  theimage5 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOXpDv7BcOBAZAsGZcJRPIlo0eQsucM4-U4hytqO9ywamguOGp9e37Y5OSMVUZdIDQK6MsyEYpN03oRsCUBI1Ob0VTiytiaPKvPuICVMPvm39qwqvIMgRUo_0GIEvuufkvfuw5HsMPoGw/s1600/artoffighting15.gif";
  theimage6 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZGzUnQ4diT5HisJykv0428ZcJqS69hl3pWoCxBTfOOMz_dDppVXk23sE7j1RX2oC4JJud2nfB5UYZ4zJf7L8PeIvDWQVV89i7og5cAl-LcSw02Zns7iCzcNTHJBOX8LGlixc_O7Q7JvY/s1600/artoffighting13.gif";
  
  /* 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 = 80;  /*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+5) {
  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">';
  strHTMLTrail +='<img src="' + theimage6 + '" id="imgLayerTrail' + (kImg+5) + '" class="imgLayerTrail" alt="" border="0">';
  $('body').append(strHTMLTrail);
  }}
  imageAniBegin();



• Keterangan :
  - Apabila ingin menggunakan gambar Karakter Art of Fighting yang lain silakan dirubah URL Images pada kode script diatas.
• Klik "Save" dan lihat hasilnya

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:.