Percantik Tampilan ChatBox Dengan Light JQuery



Bertemu sama saya lagi nih hehe.
Pada kesempatan kali ini, kita akan bahas tentang Blogger.com 
Sesuai dengan judul yang ada di atas, pasti kalian penasaran .
Okay chechk this out.

Tahap-tahap nya simple kok.
1. Login di Dasbor kalian masing-masing
2. Pergi ke menu Rancangan.
3. Tambah Gadget.
4. Pilih HTML edit Javascript.
5. masukkan script di bawah ini.



Ini Kode nya




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

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

<script>
$undefineddocument).readyundefinedfunctionundefined) {
//select all the a tag with name equal to modal

$undefined'a[name=modal]').clickundefinedfunctionundefinede) {

//Cancel the link behavior

e.preventDefaultundefined);



//Get the A tag

var id = $undefinedthis).attrundefined'href');



//Get the screen height and width

var semahHeight = $undefineddocument).heightundefined);

var semahWidth = $undefinedwindow).widthundefined);



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

$undefined'#semah').cssundefined{'width':semahWidth,'height':semahHeight});



//transition effect

$undefined'#semah').fadeInundefined1000);

$undefined'#semah').fadeToundefined"slow",0.8);



//Get the window height and width

var winH = $undefinedwindow).heightundefined);

var winW = $undefinedwindow).widthundefined);



//Set the popup window to center

$undefinedid).cssundefined'top', winH/2-$undefinedid).heightundefined)/2);

$undefinedid).cssundefined'left', winW/2-$undefinedid).widthundefined)/2);



//transition effect

$undefinedid).fadeInundefined2000);



});



//if close button is clicked

$undefined'.window .close').clickundefinedfunction undefinede) {

//Cancel the link behavior

e.preventDefaultundefined);



$undefined'#semah').hideundefined);

$undefined'.window').hideundefined);

});



//if semah is clicked

$undefined'#semah').clickundefinedfunction undefined) {

$undefinedthis).hideundefined);

$undefined'.window').hideundefined);

});



});
</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 #azisshoutbox {

background:urlundefinedhttp://www.boulder.swri.edu/~terrell/binori.gif) 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="#azisshoutbox" name="modal"><img src="http://www.oocities.org/zitarema/images/gb.gif" border="0" width="158" height="58" /></a> </center> </ul>

<div id="wadah">

<!-- Start Shoutbox -->

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


ISI DENGAN KODE CHATBOX KALIAN MASING-MASING



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

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

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

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

Rubah sesuai kebutuhan anda , mau ganti background atau yang lain ? terserah
Yang penting, masukin kode itu, lalu di save deh.
Maka tampilan nya akan seperti ini
Itu tampilan nya
Semoga berguna ya . good luck 
Wassalamualaikum.

Recent Posts