Header Ads Widget

Responsive Advertisement

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 = "http://4.bp.blogspot.com/-mC2-gHywoWY/VH_y5Y9olJI/AAAAAAAAEmA/jB5VPCu7MrM/s1600/manga_sailor_moon_sd2_01.gif";
    theimage2 = "http://2.bp.blogspot.com/-lQBMbG8XYGI/VH_y5TJFDyI/AAAAAAAAEl8/FNurcEqYKVg/s1600/manga_sailor_moon_sd2_02.gif";
    theimage3 = "http://1.bp.blogspot.com/--YzVMxT86KA/VH_y6WkXykI/AAAAAAAAEmM/XDQvtxRGzwU/s1600/manga_sailor_moon_sd2_03.gif";
    theimage4 = "http://1.bp.blogspot.com/-aVK30w9VV-8/VH_y7XX0yPI/AAAAAAAAEms/rU0DCoYiz1E/s1600/manga_sailor_moon_sd2_04.gif";
    theimage5 = "http://2.bp.blogspot.com/-xM7US7WDhPM/VH_y7tieWkI/AAAAAAAAEmU/2p9vzgrB_xQ/s1600/manga_sailor_moon_sd2_05.gif";
    theimage6 = "http://4.bp.blogspot.com/-e1DEQ6Z-g2M/VH_y8Qy5I_I/AAAAAAAAEmc/uThybkeK3c0/s1600/manga_sailor_moon_sd2_06.gif";
    theimage7 = "http://2.bp.blogspot.com/-1Eo6ec9WY50/VH_y9SvNH6I/AAAAAAAAEmg/T0YfO48jr50/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 :.

Post a Comment

0 Comments