Cara Pasang Shoutbox Melayang dengan Light Effect jQuery

SALAM SEJAHTERA !!!Untuk Cara Pasang Shoutbox Melayang dengan Light Effect jQuery sangatlah mudah dan simple, kita tidak perlu mengutak-atik kode pada template kita, karena anda tinggal memasangnya pada widget Elemen Halaman.

Untuk lebih jelasnya silahkan ikuti langkah-langkahnya pemasangannya dibawah ini:

1. Login Ke Blogger anda
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 TB -->
<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></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 #TBshoutbox {background :url (https://sites.google.com/site/tutorialbloghost/mypictures/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="#TBshoutbox" name="modal"><img border="0" height="58" src="https://sites.google.com/site/tutorialbloghost/mypictures/shoutboxtabRED.png" width="158" /></a> </center>
</ul>
<div id="wadah">
<!-- Start Shoutbox -->
<div class="window" id="TBshoutbox">

LETAKKAN SCRIPT SHOUTBOX ANDA DISINI

<div id="tutupan">
<input class="close" type="button" value="Close" />
</div>
</div>
<!-- End Shoutbox -->
<div id="semah">
</div>
</div>
<!-- End of Shoutbox light effect TB -->

5. Jangan lupa disimpan

Catatan

• 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
• untuk ukuran tidak harus terpaku pada punya saya diatas, kalian boleh menyesuaikannya sendiri.

Kalo background gambar bisa ganti dengan gambar anda sendiri.
Semoga bermanfaat - Happy Blogging
Salam