Cara pasang shoutbox melayang

Dalam artikel sebelum ini saya ada menerangkan cara bagaimana cara memasang shout box secara tersembunyi pada tepi paparan blog.Untuk kali ini pula agak berlainan kerana shoutbox yang diklik akan muncul dibahagian tengah  paparan blog dengan kesan gelap dan muncul secara perlahan lahan.Cara membuatnya juga agak mudah kerana  cuma perlu masukkan pada widget sahaja.

Cara memasangnya:

1.Masuk ke design-klik page elements

2. pilih add a gadget

3.Pilih HTML/Javascript

Dan masukkan kod ini:

<!-- Start flying Shoutbox  by ybl -->

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

$('a[name=ybl]').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 tbbHeight = $(document).height();

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

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

$('#tbb').css({'width':tbbWidth,'height':tbbHeight});

//transition effect

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

$('#tbb').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();

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

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

});

//if tbb is clicked

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

$(this).hide();

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

});

});

</script>

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

img { border: none; }

#tbb {

position:absolute;

left:0;

top:0;

z-index:9000;

background-color:#000;

display:none;

}

#ddt .window {

position:fixed;

left:0;

top:0;

width:440px;

height:200px;

display:none;

z-index:9999;

padding:20px;

}

#ddt #yblshoutbox {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVIiWSjuZK6_yEQ48Ol0CbTJvn0n0JHDvRZ8gwzI0zenGw2FYWONBwGRqsANGLXe_t77v3RyDgYkEuen1WIKaftSEY5i55CioFr_y_AEn5FhAhTnG2yGhEO3eE-J7OYcdR_7NTGnx9y4E/s1600/shout.gif) no-repeat 0 0 transparent;

width:272px;

height:460px;

padding:60px 0 20px 15px;

}

#ttp {

padding:2px 0 0 0;

}

</style>

<ul><center> <a href="#yblshoutbox" name="ybl"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcTuo-9Q8s6uwkAs_gptl2-i5udnCQ25TI-E_VtK7ekv5js8u7wQa8Lc7GL2wc0bFmzGnlkpLUsvTMDWHPRFGQuWMDErMsMYrtRjuUszDFzwBWGfu71gGjAopl7ZfKr3ql6AX9J2d_3CQ/s512/button.gif" border="0" width="128" height="58" /></a> </center> </ul>

<div id="ddt">

<!-- Start Shoutbox -->

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

LETAKKAN KOD SHOUTBOX DISINI

<div id="ttp"><input type="button" value="Close" class="close" style="background: #0066FF; color: #ffffff;"/><a href="http://jendela-id.blogspot.com/2010/12/cara-pasang-shoutbox-melayang.html"><font size="1">get this</font>

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

<div id="tbb"></div></div>

<!-- End of flying Shoutbox  by ybl -->

Kemudian klik save
#Jangan lupa masukkan kod shoutmix pada ruangan diatas.Ubahkan kod shoutmix/Cbox contoh width="240" height="380" supaya memenuhi ruang bingkai.

contoh kod shoutmix