Saint Seiya Cursor Trail

Saint Seiya Cursor Trail - merupakan efek jejak kursor mouse di blog dengan animasi karakter Saint Seiya dan kawan-kawan. Buat yang suka dengan film Saint Seiya saya buatkan widget cursor trail dengan karakter avatar Saint Seiya. Oke mazbro langsung aja ke TKP untuk melihat Saint Seiya dan kawan-kawan beraksi di blog, hasilnya seperti pada contoh di halaman postingan ini, jika mouse digerakan maka akan meninggalkan jejak karakter seiya pegasus, andromeda, hyoga diamond swan, shiryu dragon dan ikki phoenix... Gimana sob, kerenkan ??? oke dech buat yang tertarik memasang widget ini silakan di copy-paste scriptnya..

Penting !!! ada baiknya sobat blogger mem-backup terlebih dahulu template blog sobat untuk menghindari  hal-hal yang tidak diinginkan dalam menerapkan widget ini.

Cara Pemasangan :

• Login ke blog sobat...


• Klik "More Options" selector box kemudian klik "Tata Letak" setelah itu pilih "Add Widget" dan pilih "HTML / Javascript", seperti gambar di bawah ini.
  
  
  

  
  

  

  
  

  

  
  

  


• Copy-paste kode di bawah ini dan taruh di kotak gadget blog. Silakan sesuaikan beberapa parameter kode tersebut agar sesuai dengan tema blog sobat.
  
  
  Saint Seiya Versi 1
  
  
  
  
  
  

  <script>
  if(typeof(jQuery) == 'undefined'){document.write("<scr" + "ipt type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></scr" + "ipt>");}
  </script>
  <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://3.bp.blogspot.com/-el_9BupjbFs/VH_v9n9lDUI/AAAAAAAAElg/DYg07tiOGxM/s1600/Saiya.png";
  theimage2 = "http://4.bp.blogspot.com/--CHHkbrtWM8/VH_v7GeRaZI/AAAAAAAAElE/HEH3jU3zSGo/s1600/Andromeda.png";
  theimage3 = "http://4.bp.blogspot.com/-HjQbxcOWfZk/VH_v7rvregI/AAAAAAAAElM/d_yjJe5Yq0E/s1600/Hyoga.png";
  theimage4 = "http://3.bp.blogspot.com/-vP39n6KM6MY/VH_v9im3wjI/AAAAAAAAElk/MDinOvdT4Wk/s1600/Shiryu.png";
  theimage5 = "http://4.bp.blogspot.com/-up7Z2pOL7pw/VH_v9bkNplI/AAAAAAAAElc/rsB6FrlFDHQ/s1600/Phoenix.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>
  

  
  
  
  Saint Seiya Versi 2
  
  
  
  
  
  

  <script>
  if(typeof(jQuery) == 'undefined'){document.write("<scr" + "ipt type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></scr" + "ipt>");}
  </script>
  <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 */
  var theimage1 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQw38F5QHqdgTTH9YSpFA_gZo0PEbNTukwb7d8090NVO-ggxUfIlVvTTpn5-uSVSeJvXCslkjzgcIkHiejbPXwjLodFxEEcbTY36WeJSwt-1zN0CUSCbywy-a5OJzYlp19Lowy6M405ZR7/s1600/seiya.gif";
  var theimage2 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfqCaBrqZDcKMe-9VS988L1NpaK56e4OeCQsd5O-0mQTIP0B0zCHfp75bMfE2V6x-Yhycw_PQSXZuwJ4KtPDqzwuW_MSbsZ2-FKe3iNNxn-pGTYN-eSgcTGgVWqUk5tKhNotHp4ZABCzU5/s1600/shun.gif";
  var theimage3 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB3JVwoeyJwOvRdTaawInnqFQnJg3StlfSvg1MW4VX6ue2dIRhtlbwwphpRfRoRmRZOzNXhWs8BgMj_ZTo-OcpZvrhHb0WiX8w9OPqFYii0ZgHQAwtjQSxVFsEoUKJHu1aDBHnhFhXTQO8/s1600/hyoga.gif";
  var theimage4 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYiuQhh_Bqgwy1Hp9vE3G8ijJnHvIb8jaKwk0hbI_gXcu0vhdy6vxLVWN5Tym0WcLEg70slAqFO-xgplmygPVOFqN8kriSSKCnmUscT5dOj2Y2trMxO67vMxV_SvxM1MoSUS-POKNVxPIK/s1600/shiryu.png";
  var theimage5 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1PNB0WChgGlKJ52Nl1XNpxQhxQ_Y-v2rFzk8CeqFf0xvmOTVV7V5nfnqaMz8E9HmhxpLIV0RJeZkGW0IB8z9c82oyK_tB8znBg8MALiafyHWd_QeA_maDRObTHzVlHmbOAe8kDPfgdKrB/s1600/ikki.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 = 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>
  



• Klik "Save" dan lihat hasilnya...

Oke sobat monozcore jangan lupa meninggalkan jejak komentarnya yaa... biar postingan berikutnya semakin unik dan menarik.. happy blogging...

.: Semoga Bermanfaat :.