Trik Membuat Buku Tamu Keren Melayang

Membuat Buku Tamu Melayang Dengan Light Effect jQuery

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:

1. Login Ke Blogger kalian
2. Pilih Rancangan ---> ELEMEN halaman
3. Tambah Gadget ---> Pilih HTML/Java Script
4. Simpan kode berikut dalam konten HTML/Java Scriptnya

<!-- Start Shoutbox light effect by Han -->

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

<script>

$(document).ready(function() {

//select all the a tag with name equal to modal

$('a[name=modal]').click(function(e) {

//Cancel the link behavior

e.preventDefault();

//Get the A tag

var id = $(this).attr('href');

//Get the screen height and width

var semahHeight = $(document).height();

var semahWidth = $(window).width();

//Set heigth and width to semah to fill up the whole screen

$('#semah').css({'width':semahWidth,'height':semahHeight});

//transition effect

$('#semah').fadeIn(1000);

$('#semah').fadeTo("slow",0.8);

//Get the window height and width

var winH = $(window).height();

var winW = $(window).width();

//Set the popup window to center

$(id).css('top', winH/2-$(id).height()/2);

$(id).css('left', winW/2-$(id).width()/2);

//transition effect

$(id).fadeIn(2000);

});

//if close button is clicked

$('.window .close').click(function (e) {

//Cancel the link behavior

e.preventDefault();

$('#semah').hide();

$('.window').hide();

});

//if semah is clicked

$('#semah').click(function () {

$(this).hide();

$('.window').hide();

});

});

</script>

<style>a {color:#ffffff; text-decoration:none}

img { border: none; }

#semah {

position:absolute;

left:0;

top:0;

z-index:9000;

background-color:#000;

display:none;

}

#wadah .window {

position:fixed;

left:0;

top:0;

width:440px;

height:200px;

display:none;

z-index:9999;

padding:20px;

}

#wadah #kid53 {

background:url(http://i809.photobucket.com/albums/zz15/yuda03/REDGUESTBOOK.png) no-repeat 0 0 transparent;

width:272px;

height:460px;

padding:56px 0 20px 5px;

}

#tutupan {

padding:2px 0 0 0;

}

</style>

<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>

<div id="wadah">

<!-- Start Shoutbox -->

<div id="kid53" class="window">

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www6.cbox.ws/box/?boxid=780266&amp;boxtag=jx5ge1&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain6-780266" style="border:#000000 1px solid;" id="cboxmain6-780266"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www6.cbox.ws/box/?boxid=780266&amp;boxtag=jx5ge1&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform6-780266" style="border:#000000 1px solid;border-top:0px" id="cboxform6-780266"></iframe></div>
</div>
<!-- END CBOX -->

<div id="tutupan"><input type="button" value="Close" class="close" />

</div></div><!-- End Shoutbox -->

<div id="semah"></div></div>

5. Jangan lupa disimpan

Catatan

ganti code yang berwarna merah dengan kode shoutmix/chatbox kalian sendiri

Untuk ukuran shoutbox/shoutmix/cbox kalian bisa kalian sesuaikan dengan background gambar.
Untuk Shoutmix ukurannya Height: 380px dan Width: 261px
Untuk Cbox ukurannya height:300px width:250px , untuk width yang bawah samakan dengan width pertama, karena di cbox ada 2 width
kalian boleh menyesuaikannya sendiri.

untuk background gambar bisa kalian ganti dengan gambar kalian sendiri, namun jika ingin gambar buatan saya bisa menggunakan gambar dibawah ini :

	http://i809.photobucket.com/albums/zz15/yuda03/GUESTBOOKRED.png
	http://i809.photobucket.com/albums/zz15/yuda03/gbRED.png

TAMBAHAN :

Tampilan button shoutbox diatas letaknya didalam sidebar, dan karena ada permintaan salah satu sahabat blogger, yang meminta untuk memasang buttonnya disamping,

Supaya gambar berada melayang disamping silahkan kalian ganti kode ini:

<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>

dengan kode ini :

1	<ul><div style='display:scroll; position:fixed; top:5px; right:3px;'>

2	<a href="#kid53" name="modal"><imgsrc="http://lh3.ggpht.com/_MvLBi88bM_I/TKBi6-LLyiI/AAAAAAAABgo/mXUIjU7ayaY/NiceGB.png" width="158" height="58"/></a>

3

</div>

4

</ul>

Untuk gambarnya juga saya sudah buatkan, dan silahkan tinggal digunakan.

	http://lh5.ggpht.com/_MvLBi88bM_I/TKBi67qZ-BI/AAAAAAAABgk/jkuk4xIevG0/GbNice.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7qbITlQr_YYzxR5RfYQPSTp-5ygW4VoBaP2qBlw05aC0PRT5GmWCtWboQcH7ePDEG0DlzscbHthQl9Lw9Wipm5VbQax4UhiOsRfeyf-XDGljH5KnSa8fydzznJAvveyhaKpuePLaws0E/s128/template_tamu.gif
	http://zuazz.googlecode.com/files/chatbox.gif
	http://i1081.photobucket.com/albums/j343/rickylp/buku2520tamu.png
	http://i1042.photobucket.com/albums/b429/Farix_2010/Chatting.png

Atau terserah anda. Gambar yang mana ajha yang anda suka
Okay guys Semoga bisa bermanfaat, good luck..

Suka dengan postingan ini.?

source

keyword  trik membuat buku tamu melayang | trik membuat buku tamu keren | trik membuat buku tamu auto/hide | trik membuat buku tamu seperti blog syamsudin namaku | cara membuat buku tamu auto hide keren

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest

Saipul Muiz

Artikel Terkait