Naruto Cursor Trail

Naruto Cursor Trail - merupakan efek jejak kursor mouse di blog dengan animasi karakter naruto dan teman - temannya. Sebelumnya saya sudah pernah buat dengan tema doraemon dan kawan-kawan yang ada di postingan Doraemon Cursor Trail, nah kali ini saya buat dengan karakter animasi naruto. Contoh Naruto Cursor Trail seperti yang ada di halaman postingan ini, jika mouse digerakan maka akan meninggalkan jejak karakter naruto dan teman-teman... 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 letakan kode berikut ini tepat diatas kode </Body>.
  
  
  

  <script> /*Created by MonozCore Website : http://monozcore.blogspot.com Please do not remove this tag*/ 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 heart appears theimage1 = "http://dl.dropboxusercontent.com/u/74044634/Image/Naruto/Naruto.gif" theimage2 = "http://dl.dropboxusercontent.com/u/74044634/Image/Naruto/Sakura.gif" theimage3 = "http://dl.dropboxusercontent.com/u/74044634/Image/Naruto/Sasuke.gif" theimage4 = "http://dl.dropboxusercontent.com/u/74044634/Image/Naruto/tenten.gif" theimage5 = "http://dl.dropboxusercontent.com/u/74044634/Image/Naruto/Kakashi.gif" //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 imglastX = 0 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} document.getElementById("imgLayerTrail" + curImage).style.left=processedx+"px"; document.getElementById("imgLayerTrail" + curImage).style.top=y+"px"; // eval(docbitK + "imgLayerTrail" + curImage + docbitendK + stylebitK + ".left = " + processedx) // eval(docbitK + "imgLayerTrail" + curImage + docbitendK + stylebitK + ".top = " + y) 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 + "'") } function imageAniBegin(){ //Let the browser know when the mouse moves if (docLayers) { document.captureEvents(Event.MOUSEMOVE) document.onMouseMove = doImgTrail } else { document.onmousemove = doImgTrail } } document.write('<style type="text/css">.imgLayerTrail {position:absolute;top:0;left:0;visibility:hidden;}<\/STYLE>'); if (document.all||document.getElementById||document.layers){ for (kImg=0;kImg<imageCount;kImg=kImg+5) { document.write('<div id="imgLayerTrail' + kImg + '" class="imgLayerTrail"> <img src="' + theimage1 + '" alt="" border="0"></div> \n'); document.write('<div id="imgLayerTrail' + (kImg+1) + '" class="imgLayerTrail"> <img src="' + theimage2 + '" alt="" border="0"></div> \n'); document.write('<div id="imgLayerTrail' + (kImg+2) + '" class="imgLayerTrail"> <img src="' + theimage3 + '" alt="" border="0"></div> \n'); document.write('<div id="imgLayerTrail' + (kImg+3) + '" class="imgLayerTrail"> <img src="' + theimage4 + '" alt="" border="0"></div> \n'); document.write('<div id="imgLayerTrail' + (kImg+4) + '" class="imgLayerTrail"> <img src="' + theimage5 + '" alt="" border="0"></div> \n'); } } imageAniBegin(); </SCRIPT>
  
  
  Keterangan :
  
  • // not available...


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

.: Semoga Bermanfaat :. 

Sumber: http://monozcore.blogspot.com