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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZsvBZ3_u32XDYriMRsyA_Ym4nyVj8mQ4x4nkGQIQgOSBGEv5Wknt38iVQlrvMVooa2Pbv7-zSWgc-IKxq59VkVkHLE7rTrWQvJ5h0GhwNdquFYGumgny2jEJsKUaxNKLRbO9DuqmpRMg/s1600/donatelo.gif"; theimage2 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK4VkjbIcxgMwAHmkpz-uAas6-0SVFcqKQFih_ZVDtXuozWtypIaSjjDdJVb-4FILRkIxiaqZjatWbzlE9xMM6dw0VoYqDbTn33Wfj-sPLAswXsFFiOZw772rSl9YNfYve4hz93KQJk8s/s1600/leonardo.gif"; theimage3 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV86FyVVElHKf6Iob7z3hmPfCV3kjWif0HXkMOKjLKJ6TWj8ERaCTxvcDhtpn5vTFhG91f36cz9ovEmgQQytkxRh9jlm_C_wFP7YTPyeyxzUfG0kkI5yAFmpSDCNNkvk3mb3iy2KHb_Ew/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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTTA3CxbB5KJuosm25LR1_-oA25mFB0lTdqzHX5Bq4aKdCimMdFN7kIRFPPncBcO7UQFD7bbgrBbuwwgIlecl2NIcb7GpIN4QEGitZ4zXNpENWFncEYhtpwxJri7b9TdMWOqJL36mu5jU/s1600/Mirage+Studios+TMNT+_+Donatello.gif"; theimage2 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia05W8IDsPQkvCzi1wW_MG9_eMya3AvXMoPXUMLPyxwrUPM1kJZfmNoSGCUlRbKYegkL_lyxs773S0yZIdQKQ2TL6lAwQfNSfa6L-2MXZNJp5mkaSrSCQVsmc0wA0aM5j8DBw5oUHdFzA/s1600/Mirage+Studios+TMNT+_+Leonardo.gif"; theimage3 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg_LBSgVopCybiOhymg4oQWdadblgylE6zkxyNXy-TjR4Siy5inhCvhJKGRXIGVXiWJtE4ESdXl_iSk5VcQqtWJWrZTx4gyL700WXOH5y62wevecyxPCSkPrZomsq-gOYOsNpIUKt4nnU/s1600/Mirage+Studios+TMNT+_+Michelangelo.gif"; theimage4 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4VarAlGQKw78Ey1RonPBTgJ5CWBF_amXO3jk8wT3S8ThdOz938OS1OA_nA4tQalGmp5BxIU-Umi6Hyj75DUGTlfv6b_R2PL5N7ehKYnhhWguC1rArGlnsfALHVBAF0YYtt72FBGvNccE/s1600/Mirage+Studios+TMNT+_+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>
  
  
  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 :.