Membuat Buku Tamu Dengan Light Effect

<div style="text-align: justify;">Hari ini ada sahabat Klinik <a href="http://klinik-blogger.blogspot.com/">Blogger</a> yang bertanya kepada saya, Bagaimana cara membuat buku tamu seperti <b>Shoutbox Melayang Dengan Light Effect jQuery</b> . Buku Tamu kali ini adalah shoutbox melayang dengan jquery namun tampilannya berbeda dengan adanya light effect, dalam artian, saat button buku tamu di KLIK maka seluruh halaman akan gelap kecuali shoutbox atau buku tamunya. </div> <center></center><br /><br /><center><a href="http://klinik-blogger.blogspot.com/"><img alt="Membuat Buku Tamu Melayang Dengan Light Effect" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxZFRbDdlsLYXq9XR26OBqB4d2GOGpgN2WD_VMYNBFzZKcN5gjt4X2KNPKpo0mpw0KsUEoQWm-PMxXL3RkDrfuBE5UEqh9KlIwuZfS1WMUWjJJncguqE_UByTrHZAmxH_zHWyJ5ht8taa_/s400/shoutbox+melayang.bmp" width="400" /></a></center><br /><br /><div style="text-align: center;"><br /></div>Untuk membuatnya sangat simple, kita tidak perlu mengutak-atik kode pada template kita, karena kalian tinggal memasangnya pada widget di Elemen Halaman. Untuk lebih jelasnya silahkan ikuti tahap-tahap pemasangannya dibawah ini:<br /><br />1. Login Ke Blogger kalian<br />2. Pilih <span style="font-weight: bold;">Rancangan</span> ---> <span style="font-weight: bold;">ELEMEN halaman</span><br />3. <span style="font-weight: bold;">Tambah Gadget</span> ---> Pilih <span style="font-weight: bold;">HTML/Java Script</span><br />4. Simpan kode berikut dalam konten HTML/Java Scriptnya<br /><br /><blockquote style="color: rgb(51, 204, 255);"><!-- Start Shoutbox light effect by Han --><br /><script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script><br /><script><br />$(document).ready(function() {<br />//select all the a tag with name equal to modal<br />$('a[name=modal]').click(function(e) {<br />//Cancel the link behavior<br />e.preventDefault();<br />//Get the A tag<br />var id = $(this).attr('href');<br />//Get the screen height and width<br />var semahHeight = $(document).height();<br />var semahWidth = $(window).width();<br />//Set heigth and width to semah to fill up the whole screen<br />$('#semah').css({'width':semahWidth,'height':semahHeight});<br />//transition effect<br />$('#semah').fadeIn(1000);<br />$('#semah').fadeTo("slow",0.8);<br />//Get the window height and width<br />var winH = $(window).height();<br />var winW = $(window).width();<br />//Set the popup window to center<br />$(id).css('top', winH/2-$(id).height()/2);<br />$(id).css('left', winW/2-$(id).width()/2);<br />//transition effect<br />$(id).fadeIn(2000);<br />});<br />//if close button is clicked<br />$('.window .close').click(function (e) {<br />//Cancel the link behavior<br />e.preventDefault();<br />$('#semah').hide();<br />$('.window').hide();<br />});<br />//if semah is clicked<br />$('#semah').click(function () {<br />$(this).hide();<br />$('.window').hide();<br />});<br />});<br /></script><br /><br /><style>a {color:#ffffff; text-decoration:none}<br />img { border: none; }<br />#semah {<br />position:absolute;<br />left:0;<br />top:0;<br />z-index:9000;<br />background-color:#000;<br />display:none;<br />}<br />#wadah .window {<br />position:fixed;<br />left:0;<br />top:0;<br />width:440px;<br />height:200px;<br />display:none;<br />z-index:9999;<br />padding:20px;<br />}<br />#wadah #kid53 {<br />background:url(<span style="color: rgb(255, 0, 0);">http://i809.photobucket.com/albums/zz15/yuda03/REDGUESTBOOK.png</span>) no-repeat 0 0 transparent;<br />width:272px;<br />height:460px;<br />padding:56px 0 20px 5px;<br />}<br />#tutupan {<br />padding:2px 0 0 0;<br />}<br /></style><br /><br /><ul><center> <a href="#kid53" name="modal"><img src="<span style="color: rgb(255, 0, 0);">http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png</span>" border="0" width="158" height="58" /></a> </center> </ul><br /><br /><div id="wadah"><br /><!-- Start Shoutbox --><br /><div id="kid53" class="window"><br /><br /><span style="color: rgb(255, 0, 0);">SIMPAN SCRIPT Cbox KALIAN DISINI</span><br /><br /><div id="tutupan"><input type="button" value="Close" class="close" /><br /></div></div><!-- End Shoutbox --><br /><div id="semah"></div></div><br /><!-- End of Shoutbox light effect by Han--><br /></div></blockquote><br /><br /><br />5. Jangan lupa disimpan<br /><br /><br /><div class="perhatian"><b>Catatan</b><br /><ul><li>Untuk ukuran shoutbox/shoutmix/cbox kalian bisa kalian sesuaikan dengan background gambar.</li><li>Untuk Shoutmix ukurannya Height: 380px dan Width: 261px</li><li>Untuk Cbox ukurannya height:300px width:250px , untuk width yang bawah samakan dengan width pertama, karena di cbox ada 2 width</li><li>untuk ukuran tidak harus terpaku pada punya saya diatas, kalian boleh menyesuaikannya sendiri.</li></ul></div>untuk background gambar bisa kalian ganti dengan gambar kalian sendiri, namun jika ingin gambar buatan saya bisa menggunakan gambar dibawah ini :<br /><br /><table border="1"><tbody> <tr> <td align="center"><img src="http://i809.photobucket.com/albums/zz15/yuda03/GUESTBOOKRED.png" /></td> <td align="center">http://i809.photobucket.com/albums/zz15/yuda03/GUESTBOOKRED.png</td></tr> <tr> <td align="center"><img src="http://i809.photobucket.com/albums/zz15/yuda03/gbRED.png" /></td> <td align="center">http://i809.photobucket.com/albums/zz15/yuda03/gbRED.png</td></tr> <tr> <td align="center"><img src="http://i809.photobucket.com/albums/zz15/yuda03/REDGUESTBOOK.png" /></td> <td align="center">http://i809.photobucket.com/albums/zz15/yuda03/REDGUESTBOOK.png</td></tr> <tr> <td align="center"><img src="http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png" /></td> <td align="center">http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png</td></tr> </tbody></table><br /><br />TAMBAHAN :<br /><br />Tampilan button shoutbox diatas letaknya didalam sidebar, dan karena ada permintaan salah satu sahabat blogger, yang meminta untuk memasang buttonnya disamping,<br /><br />gan saya mau nanya ni, bisa gak bmbrnya di tempel di kanan gtu atw di kiri? mohon bntuannya ya :)<br />Supaya gambar berada melayang disamping silahkan kalian ganti kode ini:<br /><blockquote style="color: rgb(51, 204, 255);"><br /><ul><center> <a href="#kid53" name="modal"><img src="http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png" border="0" width="158" height="58" /></a> </center> </ul></blockquote>dengan kode ini :<br /><blockquote style="color: rgb(51, 204, 255);"><ul><div style='display:scroll; position:fixed; top:5px; right:3px;'><br /><a href="#kid53" name="modal"><img src="http://lh3.ggpht.com/_MvLBi88bM_I/TKBi6-LLyiI/AAAAAAAABgo/mXUIjU7ayaY/NiceGB.png" width="158" height="58" /></a><br /></div><br /></ul><br /></blockquote>Untuk gambarnya juga saya sudah buatkan, dan silahkan tinggal digunakan.<br /><br /><span style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://lh5.ggpht.com/_MvLBi88bM_I/TKBi67qZ-BI/AAAAAAAABgk/jkuk4xIevG0/GbNice.png" /></span><img src="http://lh3.ggpht.com/_MvLBi88bM_I/TKBi6-LLyiI/AAAAAAAABgo/mXUIjU7ayaY/NiceGB.png" /><br /><br />Semoga <span style="font-weight: bold;">Membuat Buku Tamu Melayang Dengan Light Effect</span> ini bisa membantu dan Semoga bermanfaat.

tutorial blog Membuat Buku Tamu Dengan Light Effect

Hari ini ada sahabat Klinik Blogger yang bertanya kepada saya, Bagaimana cara membuat buku tamu seperti Shoutbox Melayang Dengan Light Ef...

Read more »