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

Judul Artikel :Cara buat buku tamu | Light Effect jQuery

Terima Kasih Sobat sudah membaca Artikel saya Tentang Cara buat buku tamu | Light Effect jQuery Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih