Cara buat buku tamu | Light Effect jQuery

Setelah sebelumnya aku buat tutorial cara membuat buku tamu di blog  nah pada pertemuan kali ini pun aku juga akan buat cara membuat buku tamu | Light Effect jQuery selain sebagai koleksi pribadi juga untuk di bagi bagi ke sobat blogger siapa tahu ada yang jenuh dengan tampilan buku tamu /shoutbox nya dan ingin  menggantinya dengan yang tampilan yang beda ,adapun effec dari buku tamu yang akan aku posting ini adalah tampilan shoutbox/buku tamu nya akan muncul di tengah tengah template sebagai contoh coba lihat gambar di bawah ini

Nah untuk cara membuat nya ikuti tutorialnya seperti di bawah ini:

1. masuk ke blogger.com
2. klik dasbor/design 
3. lalu klik tata letak ===>tambah gadget ==>pilih HTML JAVA SCRIPT Lalu masukkan kode script di bawah ini 

<div style='display:scroll;position:fixed;top:70px;right:-0px;'> <script type="text/javascript" src="http://karinafotocollection-project.googlecode.com/files/jquery-latest.pack.js"> </script><script>$(document).ready(function(){$('a[name=full-blog-design]').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:350px;height:10px;display:none;z-index:9999;padding:20px}#boxes #polska{background:#000 url(http://c.dryicons.com/files/graphics_previews/dotted_background.jpg)center no-repeat;border:2px solid red;width:320px;height:400px;padding:20px 20px 20px 20px;box-shadow:3px 5px 15px orange, 0px -1px 3px red, -2px -2px 2px red, -3px 3px 3px yellow;border-radius:7px; }#closesb{padding:2px 0 0 0}#author{padding:8px 0 0 168px}</style><ul><center><a href="#polska" name="full-blog-design"><img src=" http://i1136.photobucket.com/albums/n499/Mahfid_Mayanto/buku-tamu.gif" /></a></center></ul><div id="boxes"><div id="polska" class="window"><center>MASUKKAN KODE CBOX DISINI</center><div id="author"></div><div id="closesb"><center><input type="button" value="Close" class="close"/><center></center></center></div></div><div id="mask"></div></div></div>

4. Lalu save simpan

Perlu di perhatikan : Teks yang berwarna merah isi dengan kode shoutbox sobat blogger
                                untuk merubah tinggi dan lebarnya edit teks warna hijau ....oke selamat ,mencoba