Cara menyembunyikan shoutbox dengan ajax style

Shoutbox sangat penting pada sebuah blog,karena dengan adanya shoutbox kita bisa melakukan interaksi pada blog yang kita kunjungi, jadi buat yang belum memasang shoutbox atau buku tamu pada blog,silahkan baca tentang cara memasang shoutbox atau buku tamu disini.

Shoutbox juga bisa memperindah tampilan daripada blog kamu,kamu bisa menyembunyikan shoutbox pada sisi kiri atau kanan blog kamu juga bisa menambah shoutbox dengan emoticon sesuai yang kamu inginkan agar blog terlihat lebih keren.

Nah,kali ini saya akan share tentang cara menyembunyikan shoutbox kamu dengan ajax style, dengan cara ini buku tamu tidak akan terlihat sebelum tombol shoutbox di klik,cara menyembnunyikan shoutbox dengan cara ini saya pikir keren juga dapat mengurangi loading shoutbox itu sendiri.

Inilah tampilan menyembunyikan shoutbox dengan ajax style:

Sebelum di klik

Setelah di klik

Nah keren kan,cara membuatnya mudah,caranya sebagai berikut:

• Login ke blogspot kamu.
• Klik rancangan.
• Klik add gadget
• Pilih HTML/JavaScript
• Masukkan kode dibawah ini:
  

  
  <div style='display:scroll;position:fixed;top:70px;right:-0px;'><script type="text/javascript" src="http://infonetmu.googlecode.com/files/jquery-latest.pack.js"></script><script>$(document).ready(function(){$('a[name=modal]').click(function(e){e.preventDefault();var id=$(this).attr('href');var maskHeight=$(document).height();var maskWidth=$(window).width();$('#mask').css({'width':maskWidth,'height':maskHeight});var winH=$(window).height();var winW=$(window).width();$(id).css('top',winH/2-$(id).height()/2);$(id).css('left',winW/2-$(id).width()/2);$(id).fadeIn(2000);});$('.window .close').click(function(e){e.preventDefault();$('#mask').hide();$('.window').hide();});$('#mask').click(function(){$(this).hide();$('.window').hide();});});</script><style>img{border:none}#mask{position:center;left:0;top:0;z-index:9000;background-color:#000;display:none}#boxes .window{position:fixed;left:0;top:0;width:271px;height:477px;display:none;z-index:9999;padding:20px}#boxes #polska{background:none no-repeat 0 0 transparent;width:271px;height:480px;padding:56px 0 20px 5px}#closesb{padding:2px 0 0 0}#author{padding:8px 0 0 168px}</style><ul><center><a href="#polska" name="modal"><button>ShoutBox</button></a></center></ul><div id="boxes"><div id="polska" class="window"><center>GANTIKAN TULISAN INI DENGAN CODE SHOUTBOX ANDA</center><div id="author"></div><div id="closesb"><center><input type="button" value="Close" class="close"/><center></div></div><div id="mask"></div></div></div>

• Ganti tulisan berwarna merah dengan kode shoutbox kamu
• Simpan.
  
  

Lihatlah hasilnya,semoga berhasil.

Posted in: tips blog