TMNT Cursor Trail

TMNT Cursor Trail - merupakan efek jejak kursor mouse di blog dengan animasi karakter TMNT (kura-kura ninja). Mumpung lagi trend saya sengaja membuat kreasi unik tentang TMNT siapa tau postingan artikel ini bisa Hit List Topic. Nah... siapa yang suka dengan superhero kura-kura ninja ??? kalo yaa monggo dilihat hasil kreasi MonozCore yang satu ini, hasilnya seperti pada contoh di halaman postingan ini, jika mouse digerakan maka akan meninggalkan jejak karakter kura-kura ninja, ada donatelo, leonardo, michaelangelo dan raphael... 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".


• Cari kode </Body> kemudian pilih salah satu type kode berikut ini dan letakan tepat diatas kode </Body> atau taruh sebagai widget/gadget.
  
  
  TMNT Type 1
  
  <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 = "http://3.bp.blogspot.com/-XYGJsAcQRdg/VIFssSFCm4I/AAAAAAAAEtM/k-zYbE6oO2w/s1600/donatelo.gif"; theimage2 = "http://3.bp.blogspot.com/-Jptm_g0Dh3w/VIFstubNlZI/AAAAAAAAEtU/FDm9xpe3YY4/s1600/leonardo.gif"; theimage3 = "http://3.bp.blogspot.com/-NgUR-hP_JfE/VIFst_o4WMI/AAAAAAAAEtY/nxF5-tPGjB8/s1600/michelangelo.gif"; theimage4 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzT9Nl_E3BJ3Snz0zdqM3k3DNGc5yedEVUJqvlI_Ej345j3awO1APDsL5XwaEYQNX9zYFjQo-a0tbF2vO8epnJbH4lzYz8kP5TmhyE74tGcpG3h1b0XqiUAgu3jCiVGKCIcg5MFQDKXIs/s1600/raphael.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+3) { 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">'; $('body').append(strHTMLTrail); }} imageAniBegin(); </script>
  
  
  
  TMNT Type 2
  
  <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 = "http://4.bp.blogspot.com/-HEeupcbwrXA/VUC9bta42-I/AAAAAAAAGgA/gyDFxxkAsss/s1600/Mirage%2BStudios%2BTMNT%2B_%2BDonatello.gif"; theimage2 = "http://3.bp.blogspot.com/-MKCBOlNFdZY/VUC9blzCGTI/AAAAAAAAGf8/g3XrH3J_T6A/s1600/Mirage%2BStudios%2BTMNT%2B_%2BLeonardo.gif"; theimage3 = "http://1.bp.blogspot.com/-bCfIt1NytJg/VUC9bhnoqOI/AAAAAAAAGgQ/7yEMYTg8MjY/s1600/Mirage%2BStudios%2BTMNT%2B_%2BMichelangelo.gif"; theimage4 = "http://1.bp.blogspot.com/-6tA1vKsPpZ4/VUC9cd2dltI/AAAAAAAAGgI/nM1oeXMXzTE/s1600/Mirage%2BStudios%2BTMNT%2B_%2BRaphael.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+3) { 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">'; $('body').append(strHTMLTrail); }} imageAniBegin(); </script>
  
  
  Keterangan :
  
  • Pilih salah satu type saja, apabila keduanya digunakan script tidak akan jalan.


• Klik "Save" dan lihat hasilnya...

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

.: Semoga Bermanfaat :.