Doraemon Mouse Cursor Trail - merupakan efek jejak kursor mouse di blog dengan animasi karakter doraemon dan teman - temannya. Lagi jalan - jalan ke blog tetangga tiba - tiba dapet ide buat bikin widget yang ada doraemonnya kemudian sambil site surf nemu script yang cocok untuk dibuat widget, hasilnya seperti pada contoh di halaman postingan ini, jika mouse digerakan maka akan meninggalkan jejak karakter doraemon 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> atau taruh di kotak gadget blog.
<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> /*monozcore*/ $('body').append('<style type="text/css">.imgLayerTrail {position:absolute;top:0px;left:0px;visibility:hidden;}</style>'); 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*/ theimage1 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLwnCRmSWvK5tiCj1yxYqW_QzUDMjPyz6bYA7IOX32yo7Hg2sX3_axoIFBpuXEAPUm4zBVcxZvxeypFBGRQaTLa8jWzN2M3o-TwC4GG_Pwcmri7JhqbgDKhAdjLK8zTvcc_694O8kU4LA/s1600/Nobita.gif"; theimage2 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_7SAB6UKNOqdx48ZO0HNBDfVSv3hXeq2h-dzr_gjXJdva2sgRSUu54Nj_mdkFRImiTZXObVG6RnvJNixtYKsiwgko8CbvDEL83I_3pR55SDp0Fd-wMqCdoP58mfmaF2hag3vnvZqiLI/s1600/Shizuka.gif"; theimage3 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZjf4MNALjOndFentD2ckbzJKxEgh54Y9TJEeTC1gI9W8QlIIoPdWgF_3sM99Djfc35Gs4Y8lDJs1yLi-EOk0k5ew3S_oTLs_M-fyp4fCeLvsnPH8x4OnqLpPJ0DQMtjGJAqrDhtjAsGE/s1600/Doraemon.gif"; theimage4 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWgpCmon_gRK-xP4GtLkm6KlAKGOI99CPZp6eFV3MZvc-t6VrH2pGQgH6bP6QNbVUtO_dMBkvux2DbMRJjy0O_kHcBMHUEyFAzSPEruRkK12di23lqcQnQvxiyRnTobdF_7IpPsBQ-XaI/s1600/Dorami.gif"; theimage5 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyAThVS6VWQVL8TeGqypS4qO9J7YOxbq8DP6yJELPgYSpxGsTZOZPV1ZZvFN5kbVz0DsHVvoU6Sz-kp3iWzgOizhrDNvjXixPUuS78wxrBYDBLQfvoYeo4xO3GOc5JL-qrMHT8eVvyJwU/s1600/Suneo.gif"; theimage6 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0WNtm1ngJtiHQc_NVlYJWpx68FxNpzyRJ9ztfMdtIHcYgUFJtC4bRRCxmG-7rjnxJ3-IXTcqt_C6KoOv0Mzaz0MwDfnHfrs03hrxl9U6nrXGOEboKaXiYq3NvKA9TsrR4Bctu2DRlbxM/s1600/Giant.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; 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 + "'"); } function imageAniBegin(){ /*Let the browser know when the mouse moves*/ if (docLayers) { document.captureEvents(Event.MOUSEMOVE); document.onMouseMove = doImgTrail; } else { document.onmousemove = doImgTrail; }} 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">'; $('body').append(strHTMLTrail); }} imageAniBegin(); </script> - Klik "Save" dan lihat hasilnya...
Cursor Doraemon
Biar makin komplit saya tambahkan artikelnya yaitu pemasangan penunjuk cursor dengan gambar Doraemon. Pemasangan cursor cukup mudah tinggal menambahkan beberapa kode berikut ini.
<style type="text/css">
body {cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQRQs6fSL5FUnJC4LoWpTXPncfo5yjK8YPoApCmkgPqjVdbWOPnaTErgTerGvrbdsTpUFCvHqNkQX3Mafx6Fjo5z7Y4USrCq78j255CmDi0PbULIcATIiIoZvtToaU7hKkJuIsC42-0V53/s1600/Doraemon2.png), default !important;}
</style>
Keterangan :
Apabila sobat blogger ingin merubah gambar cursor dengan pilihan gambar yang sobat suka cukup mengganti kode https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQRQs6fSL5FUnJC4LoWpTXPncfo5yjK8YPoApCmkgPqjVdbWOPnaTErgTerGvrbdsTpUFCvHqNkQX3Mafx6Fjo5z7Y4USrCq78j255CmDi0PbULIcATIiIoZvtToaU7hKkJuIsC42-0V53/s1600/Doraemon2.png. Kode tersebut merupakan URL gambar yang digunakan
Pilihan Gambar Cursor
Oke sobat monozcore jangan lupa meninggalkan jejak komentarnya yaa... biar postingan berikutnya semakin unik dan menarik.. happy blogging...
.: Semoga Bermanfaat :.
0 Comments