Cursor Effect Bubble Trail

Cursor Effect Bubble Trail - merupakan trik dekorasi blog dengan efek balon gelembung yang beterbangan... cukup keren-kan ?!? yaaa salah satu trik yang lumayan-lah bagus setidaknya bisa memberikan nuansa segar dan dinamis untuk blog sobat. Trik ini banyak digunakan para blogger untuk menambah daya tarik blognya dengan animasi bubble trail. Cara ini digunakan para blogger tidak lain, agar pengunjung blog tidak bosen dengan tema blog default yang telah ada. Oke sob.. buat yang tertarik memasang trik ini langsung saja menuju TKP... Untuk contoh bisa dilihat di postingan ini.

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>
  /* Created by MonozCore 2016 http://monozcore.blogspot.com */
  var colours = new Array("#0066FF", "#0066FF", "#0066FF", "#0066FF", "#0066FF");
  var bubbles = 100;
  var x = ox = 400;
  var y = oy = 300;
  var swide = 800;
  var shigh = 600;
  var sleft = sdown = 0;
  var bubb = new Array();
  var bubbx = new Array();
  var bubby = new Array();
  var bubbs = new Array();
  window.onload = function() {
  if (document.getElementById) {
  var rats, div;
  for (var i = 0; i < bubbles; i++) {
  rats = createDiv("3px", "3px");
  rats.style.visibility = "hidden";
  div = createDiv("auto", "auto");
  rats.appendChild(div);
  div = div.style;
  div.top = "1px";
  div.left = "0px";
  div.bottom = "1px";
  div.right = "0px";
  div.borderLeft = "1px solid " + colours[3];
  div.borderRight = "1px solid " + colours[1];
  div = createDiv("auto", "auto");
  rats.appendChild(div);
  div = div.style;
  div.top = "0px";
  div.left = "1px";
  div.right = "1px";
  div.bottom = "0px"
  div.borderTop = "1px solid " + colours[0];
  div.borderBottom = "1px solid " + colours[2];
  div = createDiv("auto", "auto");
  rats.appendChild(div);
  div = div.style;
  div.left = "1px";
  div.right = "1px";
  div.bottom = "1px";
  div.top = "1px";
  div.backgroundColor = colours[4];
  div.opacity = 0.5;
  if (document.all) div.filter = "alpha(opacity=50)";
  document.body.appendChild(rats);
  bubb[i] = rats.style;
  }
  set_scroll();
  set_width();
  bubble();
  }
  }
  
  function bubble() {
  var c;
  if (x != ox || y != oy) {
  ox = x;
  oy = y;
  for (c = 0; c < bubbles; c++)
  if (!bubby[c]) {
  bubb[c].left = (bubbx[c] = x) + "px";
  bubb[c].top = (bubby[c] = y) + "px";
  bubb[c].width = "3px";
  bubb[c].height = "3px"
  bubb[c].visibility = "visible";
  bubbs[c] = 3;
  break;
  }
  }
  for (c = 0; c < bubbles; c++)
  if (bubby[c]) update_bubb(c);
  setTimeout("bubble()", 40);
  }
  
  function update_bubb(i) {
  if (bubby[i]) {
  bubby[i] -= bubbs[i] / 2 + i % 2;
  bubbx[i] += (i % 5 - 2) / 5;
  if (bubby[i] > sdown && bubbx[i] > 0) {
  if (Math.random() < bubbs[i] / shigh * 2 && bubbs[i]++ < 8) {
  bubb[i].width = bubbs[i] + "px";
  bubb[i].height = bubbs[i] + "px";
  }
  bubb[i].top = bubby[i] + "px";
  bubb[i].left = bubbx[i] + "px";
  }
  else {
  bubb[i].visibility = "hidden";
  bubby[i] = 0;
  return;
  }
  }
  }
  document.onmousemove = mouse;
  
  function mouse(e) {
  set_scroll();
  y = (e) ? e.pageY : event.y + sleft;
  x = (e) ? e.pageX : event.x + sdown;
  }
  window.onresize = set_width;
  
  function set_width() {
  if (document.documentElement && document.documentElement.clientWidth) {
  swide = document.documentElement.clientWidth;
  shigh = document.documentElement.clientHeight;
  }
  else if (typeof(self.innerHeight) == "number") {
  swide = self.innerWidth;
  shigh = self.innerHeight;
  }
  else if (document.body.clientWidth) {
  swide = document.body.clientWidth;
  shigh = document.body.clientHeight;
  }
  else {
  swide = 800;
  shigh = 600;
  }
  }
  window.onscroll = set_scroll;
  
  function set_scroll() {
  if (typeof(self.pageYOffset) == "number") {
  sdown = self.pageYOffset;
  sleft = self.pageXOffset;
  }
  else if (document.body.scrollTop || document.body.scrollLeft) {
  sdown = document.body.scrollTop;
  sleft = document.body.scrollLeft;
  }
  else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
  sleft = document.documentElement.scrollLeft;
  sdown = document.documentElement.scrollTop;
  }
  else {
  sdown = 0;
  sleft = 0;
  }
  }
  
  function createDiv(height, width) {
  var div = document.createElement("div");
  div.style.position = "absolute";
  div.style.height = height;
  div.style.width = width;
  div.style.overflow = "hidden";
  return (div);
  }
  </script>

  
  KETERANGAN :
  • var colours = new Array("#0066FF", "#0066FF", "#0066FF", "#0066FF", "#0066FF"); // merupakan warna bubble silakan sobat sesuaikan dengan warna yang sobat inginkan. Warna dalam kode hexadesimal.
  • Klik disini [ Kode Warna ] untuk mengetahui kode warna hexadesimal.


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