Sailormoon Cursor Trail

Sailormoon Cursor Trail - merupakan efek jejak kursor mouse di blog dengan animasi karakter sailormoon dan teman - temannya, untuk contoh seperti yang terlihat di halaman postingan ini, jika mouse digerakan maka akan meninggalkan jejak karakter sailormoon dan teman-teman... Gimana sob, kerenkan ???. Widget cursor trail yang lain seperti Naruto Cursor Trail dan Doraemon Cursor Trail. 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.

  <script type="text/javascript">
  /* 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/AVvXsEgAwWwb2wUkC_5jr7UHIrRgwjI_K1diCG_UNXg_ERuqdwg1udKimv4H8XSfRL4rRwhdR1Z7Ap_nRWxNfIHLUjz3eqBZsJTzl5BoO6n9-LKlP9SYhheNi1r6ju2nK9vyA-a4c0Xo7lHGTdQ/s1600/manga_sailor_moon_sd2_01.gif";
  theimage2 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji7hMMoaKGnWED-rMHE-dJzArNHgfsq3o1Pav6RRxiXsUv5SWkOaZFvETwZ4yaa2SLsaIfwcuO9r-UHIcSCQ2Im979NxoEoZGmKhStKuzUgR1hTMGxquR2VbkynnHPqaBBMKGkQfWZ-9s/s1600/manga_sailor_moon_sd2_02.gif";
  theimage3 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcKhxwF7nvq7yYvSATcfD7w88mO445O2c6vjjpndJY3t4PuD16zGvRcVx16yYMN5cCivBGJCZxAbfXqqDg7HrNUm14VXrHvoO2B-6uJ8r4B7PnB3k_6QQNtd0y3xjb3shIetj6HS0ERtQ/s1600/manga_sailor_moon_sd2_03.gif";
  theimage4 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj0uGlqMpKC2t9i9oHN8A1f1WLePKx5fKBbHz5JdGRMv5dg9Lmpgv1F7t8oi4_5Sqn_0oCNZJGFFVsvW8DF-0b-63YLhrDG-meZTGk6XY3iqbsPcyvsjN_7MNwnpImNO8MlXF7KJ0Z8TQ/s1600/manga_sailor_moon_sd2_04.gif";
  theimage5 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7FIt4CGsPAsYizO8MnCJwDcDGWmWQEiprlAAIfUghNuGAG2C0dGFbFvxZWE65rbH4SGqBEQv8AyVc0JmRt0ne8AZc4sBrD0Bj3Tn6lIDLF3Yuri008ud5ekNykyxVbIODQqDeIT8XSgg/s1600/manga_sailor_moon_sd2_05.gif";
  theimage6 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYUhFk0iwa3RFyMgX2ifimk-svd33pM6O344KhGCClFkVuLcTFyC_4-F9M83Melbaw5jHQ2j3QZ5N94vIo2MlDM-jxHAi5F31QbCS57nngf41PJRBmvn06hXGv0aKn6m1z0aTbOq6OuJo/s1600/manga_sailor_moon_sd2_06.gif";
  theimage7 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj5tqwcBsVZ_ubaHyaANbYYKoIyF7i94wY0JvOq8_qdDDAdV4YyE_w2O8jepZOZb9fe_YVoKFm90hEgtXfQdWbVkxTtp827kGC67WNrx9MT78hzuXa1NHjfDVzex_LoyjafCBdsCC323Y/s1600/manga_sailor_moon_sd2_07.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+6) {
  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">';
  strHTMLTrail +='<img src="' + theimage7 + '" id="imgLayerTrail' + (kImg+6) + '" 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 :.