Tutorial: Popup Hide Shoutbox Comel

Semalam jenjalan, dan seperti biasa aku akan semak link atau pesanan di Shoutbox.. Tak sangka ada orang berminat cara shoutbox macam ni.. iaitu Popup Hide Shoutbox... Sebenarnya ada tujuan aku guna shoutbox macam ni... Tujuan utama, untuk mengurangkan ruang di widget sidebar... Sebab bila kurangnya widget tu, lebih cepat blog kita loading... Aku tak nak buang shoutbox sebab masih ada kepentingannya di situ...

Fini tak meninggalkan link entry atau URL blog... Jadi aku kongsikan kat sini aje lah... mungkin ada yang mencari tutorial ni.. Aku memang tak pandai nak buat sendiri.. Segala ilmu tutorial blog aku guna enjin carian google aje... memang banyak, tapi cuba lah yang mana menjadi dan sesuai untuk blog kita ea...

Ni aku sediakan coding untuk sesiapa yang berminat nak mencuba...

Caranya mudah...
Buka LAYOUT > ADD WIDGET > HTML

Copy coding ni:

<center>
<style type='text/css'></style>
<div style='display:scroll; position:fixed; top:50px; right:-0px;'>

<center>
<!-- 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:0;
top:0;
width:225px;
height:400px;
display:none;
z-index:9999;
padding:20px;
}
#boxes #evariena {

) no-repeat 0 0 transparent;
width:720px;
height:460px;
padding:56px 0 20px 5px;
}
#closesb {
padding:2px 0 0 0;
}
#author {
padding:8px 0 0 168px;
}
</style>
<ul><center>
 <a href="#evariena" name="modal"><img src="http://4.bp.blogspot.com/-gX2CCqnaQAU/T8po_BxRekI/AAAAAAAAAi0/7IGpTLO2QIA/s1600/pink10.gif" border="0" /></a> </center>
</ul>
<div id="boxes">
<center>

ISIKAN CODING SHOUTBOX ANDA DI SINI

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

Credit tutor dari Mia Liana

Cari Perkataan ISIKAN CODING SHOUTBOX ANDA DI SINI dalam coding yang aku sediakan dan tukarkan perkataan tu dengan coding shoutbox korang sendiri. Copy dan paste aje kat ruangan tu..

Lepas tu korang cari coding ni:
"http://4.bp.blogspot.com/-gX2CCqnaQAU/T8po_BxRekI/AAAAAAAAAi0/7IGpTLO2QIA/s1600/pink10.gif".

Coding ni ialah icon comel yang bergerak-gerak tu... Korang boleh tukar dengan icon sendiri atau cuba cari kat google "Freebies icon Shoutbox".

Dah siap setting, save dan preview...

Tutorial ni bukan ciptaan sendiri tapi aku cari juga di google... aku sendiri tak ingat dah aku amik dari blogger mana... tapi korang boleh cari juga di google tutorial ni di google... insha Allah.. akan membantu... Itu aje lah yang boleh aku bantu bagi menjawab pertanyaan si penanya soalan...