Header Ads Widget

Responsive Advertisement

Efek Awan Dan Pesawat Terbang Di Blog

Monoz 10:42 PM

Iseng-iseng jalan ke negeri tetangga, sewaktu blogwalking ehh nemu script unik di blog tersebut. Awalnya sich ga tau mesti di apain nich script namun tiba-tiba dapet ide untuk berkreasi menggunakan script ini dan hasilnya seperti awan dan pesawat yang terlihat pada postingan artikel ini. Gimana sob... kerenkan... kalo blog sobat mempunyai tema tentang traveling, ulasan pesawat terbang atau pun cuma pengen tampilan blognya tampil beda monngo sob di pasang widget ini... Nah buat yang tertarik langsung aja dech ke TKP.

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.
    <style type="text/css">#cover-cloud { width:100%; height:200px; position:absolute; z-index:100; left:0; top:0; } #cloud { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsxQae6ZND1Sa272MLbU1ebsmw0D5kKNFL43-0tG99RW3hjtDBbycKk32AD3LdbIJR_TWtty1yLu5vfxTbh4eOM4nAGzvzpFhV2WTFN4aqSGxNRFURf_tVQN5t6QuICMay5v-s5mtFFTg/s1600/cloud1.png) repeat-x 0 0; position: absolute; width:100%; height:188px; z-index: 200; } #cloud2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXBjj7reMKb7kGcYrwYj0rhzlJC3k1jDCa_V4Jp3ZRsci-86sqhLxQ8uQyT_B3Wn5lURYLgxTqsDhyphenhyphenfGLT_pUCCCwl3Zg4LOGfeJ432w8KeczCPyb4ttm4ZLy7Yw_jxD9jnPSV09x_btY/s1600/cloud2.png) repeat-x 0 0; position: absolute; width:100%; height:125px; z-index: 300; } #cloud3 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXSqi1YYQQDNXG7J_axgeRMvAw87q3M2zaFGRIUxk013n390L1zTqYY03evqdmAGbI2E3fNO_Dg4SbPxqLEkfYa0C5Xiohm2Kp2BTQwzVG4x5UHXhyphenhyphenIUnxRHhx-c9GlMgLCM3j-ZsdEWA/s1600/cloud3.png) repeat-x 0 0; position: absolute; width:100%; height:46px; z-index: 400; }</style>
<script>var imgLinkUrlCloud="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7TSnhJtWZ8NfvHuWP4dzJOgxv7XRl-yVBG7ZoYOSnqpd52dMeXL6STFdSZhxJA3ZwELnHlpBuNTT8DTpYcrgXGWej8dV_pY4VMiviSYLGppidhQ7GNN_dtymiamxh-BkA7BKxITARju6C/s800/sexy-witch.gif";
</script>
<script>
var textCode="<div id='cover-cloud'><div id='cloud'></div><div id='cloud2'><marquee direction='right'><a href='http://monozcore.blogspot.com' target='blank' title='Get this widget'><img src='"+imgLinkUrlCloud+"'/></a></marquee></div><div id='cloud3'></div></div>";
$("body").append(textCode);(function($) {$(document).ready(function() {$('#cloud').pan({fps: 30, speed: 1, dir: 'right'});$('#cloud2').pan({fps: 30, speed: 2, dir: 'right'});$('#cloud3').pan({fps: 30, speed: 0.5, dir: 'right'});});})(jQuery);
</script>
<script>
(function($) {
  $._spritely = {
    // shared methods and variables used by spritely plugin
    animate: function(options) {
      var el = $(options.el);
      var el_id = el.attr('id');
      if (!$._spritely.instances) {
        $._spritely.instances = {};
      }
      if (!$._spritely.instances[el_id]) {
        $._spritely.instances[el_id] = {
          current_frame: -1
        };
      }
      var instance = $._spritely.instances[el_id];
      if (options.type == 'sprite') {
        var frames;
        var animate = function(el) {
          var w = options.width,
            h = options.height;
          if (!frames) {
            frames = [];
            total = 0
            for (var i = 0; i < options.no_of_frames; i++) {
              frames[frames.length] = (0 - total);
              total += w;
            }
          }
          if ($._spritely.instances[el_id]['current_frame'] >= frames.length - 1) {
            $._spritely.instances[el_id]['current_frame'] = 0;
          } else {
            $._spritely.instances[el_id]['current_frame'] = $._spritely.instances[el_id]['current_frame'] + 1;
          }
          el.css('background-position', frames[$._spritely.instances[el_id]['current_frame']] + 'px 0');
          if (options.bounce && options.bounce[0] > 0 && options.bounce[1] > 0) {
            var ud = options.bounce[0]; // up-down
            var lr = options.bounce[1]; // left-right
            var ms = options.bounce[2]; // milliseconds
            el
              .animate({
                top: '+=' + ud + 'px',
                left: '-=' + lr + 'px'
              }, ms)
              .animate({
                top: '-=' + ud + 'px',
                left: '+=' + lr + 'px'
              }, ms);
          }
        }
        animate(el);
      } else if (options.type == 'pan') {
        if (options.dir == 'left') {
          $._spritely.instances[el_id]['l'] = ($._spritely.instances[el_id]['l'] - (options.speed || 1)) || 0;
        } else {
          $._spritely.instances[el_id]['l'] = ($._spritely.instances[el_id]['l'] + (options.speed || 1)) || 0;
        }
        if ($.browser.msie) {
          // fixme - the background-position property does not work
          // corretly in IE so we have to hack it here... Not ideal
          // especially as $.browser is depricated
          var bp_top = $(el).css('background-position-y') || '0';
          $(el).css('background-position', $._spritely.instances[el_id]['l'] + 'px ' + bp_top);
        } else {
          var bp_top = ($(el).css('background-position').split(' ') || ' ')[1];
          $(el).css('background-position', $._spritely.instances[el_id]['l'] + 'px ' + bp_top);
        }
      }
    },
    randomIntBetween: function(lower, higher) {
      return parseInt(rand_no = Math.floor((higher - (lower - 1)) * Math.random()) + lower);
    }
  };
  $.fn.extend({
    spritely: function(options) {
      var options = $.extend({
        type: 'sprite',
        do_once: false,
        width: null,
        height: null,
        fps: 12,
        no_of_frames: 2
      }, options || {});
      options.el = this;
      options.width = options.width || $(this).width() || 100;
      options.height = options.height || $(this).height() || 100;
      var get_rate = function() {
        return parseInt(1000 / options.fps);
      }
      if (!options.do_once) {
        window.setInterval(function() {
          $._spritely.animate(options);
        }, get_rate(options.fps));
      } else {
        $._spritely.animate(options);
      }
      return this; // so we can chain events
    },
    sprite: function(options) {
      var options = $.extend({
        type: 'sprite',
        bounce: [0, 0, 1000] // up-down, left-right, milliseconds
      }, options || {});
      return $(this).spritely(options);
    },
    pan: function(options) {
      var options = $.extend({
        type: 'pan',
        dir: 'left',
        continuous: true,
        speed: 1 // 1 pixel per frame
      }, options || {});
      return $(this).spritely(options);
    },
    flyToTap: function(options) {
      var options = $.extend({
        el_to_move: null,
        type: 'moveToTap',
        ms: 1000, // milliseconds
        do_once: true
      }, options || {});
      if (options.el_to_move) {
        $(options.el_to_move).active();
      }
      if ($._spritely.activeSprite) {
        if (window.Touch) { // iphone method see http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone/9 or http://www.nimblekit.com/tutorials.html for clues...
          $(this)[0].ontouchstart = function(e) {
            var el_to_move = $._spritely.activeSprite;
            var touch = e.touches[0];
            var t = touch.pageY - (el_to_move.height() / 2);
            var l = touch.pageX - (el_to_move.width() / 2);
            el_to_move.animate({
              top: t + 'px',
              left: l + 'px'
            }, 1000);
          };
        } else {
          $(this).click(function(e) {
            var el_to_move = $._spritely.activeSprite;
            $(el_to_move).stop(true);
            var w = el_to_move.width();
            var h = el_to_move.height();
            var l = e.pageX - (w / 2);
            var t = e.pageY - (h / 2);
            el_to_move.animate({
              top: t + 'px',
              left: l + 'px'
            }, 1000);
          });
        }
      }
      return this;
    },
    active: function() {
      // the active sprite
      $._spritely.activeSprite = this;
      return this;
    },
    activeOnClick: function() {
      // make this the active script if clicked...
      var el = $(this);
      if (window.Touch) { // iphone method see http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone/9 or http://www.nimblekit.com/tutorials.html for clues...
        el[0].ontouchstart = function(e) {
          $._spritely.activeSprite = el;
        };
      } else {
        el.click(function(e) {
          $._spritely.activeSprite = el;
        });
      }
      return this;
    },
    spRandom: function(options) {
      var options = $.extend({
        top: 50,
        left: 50,
        right: 290,
        bottom: 320,
        speed: 4000,
        pause: 0
      }, options || {});
      var el_id = $(this).attr('id');
      var r = $._spritely.randomIntBetween;
      var t = r(options.top, options.bottom);
      var l = r(options.left, options.right);
      $('#' + el_id).animate({
        top: t + 'px',
        left: l + 'px'
      }, options.speed)
      window.setTimeout(function() {
        $('#' + el_id).spRandom(options);
      }, options.speed + options.pause)
      return this;
    },
    makeAbsolute: function() {
      // remove an element from its current position in the DOM and
      // position it absolutely, appended to the body tag.
      return this.each(function() {
        var el = $(this);
        var pos = el.position();
        el.css({
            position: "absolute",
            marginLeft: 0,
            marginTop: 0,
            top: pos.top,
            left: pos.left
          })
          .remove()
          .appendTo("body");
      });

    }
  })
})(jQuery);
// Stop IE6 re-loading background images continuously
try {
  document.execCommand("BackgroundImageCache", false, true);
} catch (err) {}
</script>

    KETERANGAN :
    • Jangan lupa untuk memasang kode script JQuery.
    • Pada kode : imgLinkUrlCloud="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJvht6uQVi5Bt3pGLWKXDFicrEiP_dH8D2DxE11gnXts4iIUMNaE1D1g0TkntsaarWQSQVmwqe9i5wjrTCXFl36GY53E802BpOFfdCtjWj8fs97MYe18n0XxhnnpTN-BB9d5HjfMn23jro/s800/red_baron.gif"; merupakan link gambar pesawat, untuk mengganti gambar pesawat silakan ganti link tersebut dengan link gambar yang sobat inginkan. Usahakan menggunakan gambar dengan ukuran 144 pixel baik ukuran tinggi maupun ukuran lebar gambar. Pada postingan artikel ini terdapat beberapa pilihan gambar yang bisa sobat gunakan untuk menyesuaikan gambar pesawat dengan tema template blog sobat.

  • Pilihan Gambar Pesawat :















  • 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 :.
Tags:
Monoz

Posted by: Monoz

Post a Comment

0 Comments