Sembunyikan Shoutbox

Assalamualaikum korang semua. Selamat malam! Amla nak share dengan korang macam mana nak sembunyikan shoutbox di blog kita. "Eh Amla, apa tu? Nak sembunyi macam mana?" Ha! Korang tengok gambar dekat bawah ni dulu. Then, baru Amla ajarkan korang semua macam mana nak buat. OK??

 
Ha! Korang nak tau tak buat macam mana? Ikut step-step di bawah ea:

1. Login akaun blogger korang, dari dashboard > design > page element > add a gadget > HTML/javascript.

2. Copy dan paste kod berikut ke ruangan html/javascript:

 <style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>
<div style='display:scroll; position:fixed; top:0px; right:-0px;'>
<br />
<!-- Start Ajax Popup Shoutbox by -->
<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 maskHeight = $(document).height();
var maskWidth = $(window).width();


//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});






//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();


$('#mask').hide();
$('.window').hide();
});


//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});


});
</script>
<style>
img { border: none; }
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}


#boxes .window {
position:fixed;
left:100;
top:67;
width:240px;
height:289px;
display:none;
z-index:9999;
padding:20px;
}
#boxes #shoutbox {
background:url('URL BACKGROUND SHOUTBOX KORANG');

width:540px;
height:300px;
padding:4px 0 30px 3px;
}

#closesb {
padding:2px 0 0 0;
}
#author {
padding:8px 0 0 168px;
}
</style>
<ul><center> <a href="#shoutbox" name="modal"><img src="URL GAMBAR KORANG" border="0" /></a> </center> </ul>
<div id="boxes">
<!-- Start Shoutbox -->
<div id="shoutbox" class="window">
<!-- Begin ShoutMix - http://www.shoutmix.com --><center>

CODE SHOUT BOX KORANG


<!-- End ShoutMix -->
<div id="author">
</div><div id="closesb"><input type="button" value="Close" class="close" />
</div><!-- End of Ajax Shoutbox -->
<!-- Mask to cover the whole screen -->
<div id="mask"></div>
<!-- End of Ajax Popup Shoutbox--></center></div></div></div>

3. Then save. Kalau menjadi silalah comment. :)

#Warna hijau: Letakkan URL background gambar korang
#Warna biru: URL gambar shoutmix korang
#Warna merah: Letakkan kod shoutmix korang dekat situ.

DEKAT SINI ADA BEBERAPA GAMBAR YANG BOLEH KORANG GUNA UNTUK GAMBAR SHOTMIX:

http://i.imgur.com/IjVCh.png

http://img580.imageshack.us/img580/7914/shoutbox13.png

http://i.imgur.com/MneFX.png

http://i.imgur.com/7ygQJ.png

http://img818.imageshack.us/img818/9782/shoutbox4.png

 INI PULAK UNTUK GAMBAR TUTUP SHOUTMIX KORANG:

http://i.imgur.com/QFdS2.png

http:/i.imgur.com/5REkR.jpg

http://i.imgur.com/1NENC.jpg