CHATBOX BER-EFFECT SCREENSAVER

Chatbox Ber-effect ScreenSaver atau lebih di kenal dengan Floating Chatbox, chatbox ini memang ngga beda jauh dengan chatbox tersembunyi (inti nya sama sembunyi2 juga :p).

Perbedaan chatbox ini hanya pada effect saat memunculkan nya saja, chatbox ini juga sebenar nya lebih akrab di panggil chatbox melayang (floating chatbox), namun saya menamakan nya yaitu chatbox screensaver karena effect chatbox saat di munculkan memang menyerupai screen saver, yaitu membuat area di sekitar nya menjadi redup dan menyisakan sebuah chatbox yang nyala terang, wee..

Postingan ini merupakan sebuah request dari teman saya beberapa hari yang lalu, yang punya blog http://utuy-semrawut.blogspot.com.

Nih langkah-langkah nya :

* Login (pasti lah :p) 'Dasbor'
* Rancangan 'Elemen Laman'
* Tambahkan Gadget
* Pilih Edit Html/JavaScript

Copy-paste script di bawah ini :

<!-- Start Shoutbox ScreenSaver Effect -->

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

background:url(http://i1238.photobucket.com/albums/ff493/Putrasta/Guestbook1.png) no-repeat 0 0 transparent;

width:280px;

height:430px;

padding:56px 0 20px 5px;

}
#tutupan {

padding:2px 0 0 0;

}

</style>


<ul><center> <a href="#SAchatbox" name="modal"><img src="http://i1238.photobucket.com/albums/ff493/Putrasta/ButtonGB.png" border="0" width="158" height="58" /></a> </center> </ul>

<div id="wadah">

<!-- Start Shoutbox -->

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

SIMPAN SCRIPT CHATBOX KALIAN DISINI

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

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

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

<!-- End of Shoutbox ScreenSaver Effect -->
</div>

Untuk merubah tombol chatbox menjadi di samping, silahkan ganti script :

<ul><center> <a href="#SAchatbox" name="modal"><img src="http://i1238.photobucket.com/albums/ff493/Putrasta/ButtonGB.png" border="0" width="158" height="58" /></a> </center> </ul>

Dengan :

<ul><div style='display:scroll; position:fixed; top:5px; right:3px;'>
<a href="#SAchatbox" name="modal"><img src="http://i1238.photobucket.com/albums/ff493/Putrasta/ButtonGB2.png" width="158" height="58" /></a>
</div>
</ul>

Ket.

* Silahkan sobat sesuaikan posisi chatbox dengan gambar pada script yang berwarna hijau, atau bisa menambahkan script css seperti :
margin:..px , 
margin-left:..px
margin-right:..px
margin-bottom:.px
margin-top:..px
atau
padding:..px
padding-left:..px
padding-right:..px
padding-top:..px
padding-bottom:..px antara kode #wadah #SAchatbox { sampai #tutupan {


Sumber : http://celoteh-galang.blogspot.com/2011/03/cara-membuat-shoutbox-melayang-dengan.html