Hiden Chat Box / Buku Tamu

Langsung aja nih ga sempe basa-basi hahaha
karena ada yang minta untuk hiden chatbox / buku tamu jadi saya langsung kasih scripnya aja
ga sempet bikin tutorialnya
nih scripnya
tulisan yang berwarna merah adalah code chatbox yang akan diganti dengan chatbox yang kamu punya

<div class="widget-content">
<center>TINGGALKAN PESAN DI BUKU TAMU KETIKA SAYA TIDAK ON-LINE</center>
<!-- Start Shoutbox light effect by asmatking -->

<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 #asmatshoutbox {

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="#asmatshoutbox" name="modal"><img src="http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png" width="158" border="0" height="58" /></a> </center> </ul>

<div id="wadah">

<!-- Start Shoutbox -->

<div style="top: 172px; left: 695.5px; display: none;" id="asmatshoutbox" class="window">



<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="250" height="305" src="http://www6.cbox.ws/box/?boxid=307259&amp;boxtag=h6y7d1&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#004D98 1px solid;" id="cboxmain"></iframe></div>
<div><iframe frameborder="0" width="250" height="75" src="http://www6.cbox.ws/box/?boxid=307259&amp;boxtag=h6y7d1&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#004D98 1px solid;border-top:0px" id="cboxform"></iframe></div>
</div>
<!-- END CBOX -->
<embed src="http://www54.indowebster.com/4gkix228vxkzmgrz27eyil6opskpa72g.swf" autostart="TRUE" loop="TRUE" repeat="TRUE" width="0" height="0" align="CENTER"></embed>



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

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

<div style="width: 1663px; height: 1208px; display: none; opacity: 0.8;" id="semah"></div></div>

<!-- End of Shoutbox light effect by asmatking -->
</div>


untuk yang bingung cara peletakan dan editnya silahkan hubungi saya di YM : asmat_clan@yahoo.com

Artikel yang berhubungan :