Tutorial : Sembunyikan shoutbox (dan cara letakkan icon dan background)

As'salammualaikum...

yup.kita bertutorial lagi di pagi isnin yg indah ini...acik sebenarnya nak menjawab dua soalan (soalan ker permintaan tu,konpius acik..xkisah la)

cik fathin tu tanya,cam ne nak wat blog cam acik nie?..ala..soalan cepu tak berapa cemas tu..cam ne ek? susah la nak jelaskan sekaligus dlm 1 entry..sbb acik renovate blog nie bukan sekaligus,kena wat sikit2..lgpun blog acik nie tak la kiut mana pun,cantik apatah lagi..blog acik nie biasa2 aje la cik fathin..insyaALLAH acik boleh ajar..lau ada soalan,boleh tanya terus kat fb acik..lagipun acik ada wat tutorial kan,boleh la di jadikan panduan sikit2 ..insyaALLAH..

dan kepada akk chempaka Sari...nak wat shoutbox cam nie yea..ok,acik gtau cara2 dia yea..sebenarnya acik pun baru jumpa code2 dia sabtu lepas..nak share,tak sempat..

ok..seperti biasa..

Dashboard => Design => Page Element => Add A gadget => html/javascript

pas tu korang copy code ini....

<div style='display:scroll; position:fixed; top:100px; right:-0px;'>

<!-- Start Ajax Popup Shoutbox by -->

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js%22%3E%3C/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:center;

left:0;

top:0;

z-index:9000;

background-color:#000;

display:none;

}



#boxes .window {

position:fixed;

left:0;

top:0;

width:271px;

height:480px;

display:none;

z-index:9999;

padding:20px;

}

#boxes #wanhazelshoutbox {

background:url(Url background jika korang nak letak background..lau xnak tak di paksa) no-repeat 0 0 transparent;

width:271px;

height:480px;

padding:56px 0 20px 5px;

}

#closesb {

padding:2px 0 0 0;

}

#author {

padding:8px 0 0 168px;

}

</style>

<center> <a href="#wanhazelshoutbox" name="modal"><img src="Url shoutbox icon" border="0" /></a> </center>

<div id="boxes">

<!-- Start Shoutbox -->

<div id="wanhazelshoutbox" class="window">
<!-- Begin ShoutMix - http://www.shoutmix.com/ --><center>




code shoutbox korang



</center>
<!-- End ShoutMix -->

<div id="author">

</div><div id="closesb"><center><input type="button" value="Boleh tolong close" class="close" /><center>

</center></center></div></div><!-- End of Ajax Shoutbox -->

<!-- Mask to cover the whole screen -->

<div id="mask"></div></div>

<!-- End of Ajax Popup Shoutbox--></div>

dah copy code tu,paste la kat petak content..petak title tu biarlah kosong..tak akan menjejaskan blog korang pun..hehe..
oye,tulisan kaler merah tu,korang gantilah dengan url background dan url icon shoutbox yg korang berkenan...dan kaler hijau tu,korang ganti la dengan ayat korang sendiri,coz tu button utk tutup shoutbox korang nanti...

oya,klo korang malas nak cari url shoutbox icon,nie acik ada carikan utk korang,korang boleh la copy url dia utk shoutbox korang..sila klik SINI..selamat mencuba...

ehhh...terlupa..lau nak cari background utk shoutbox,boleh cari kat SINI

credit to : Wan hazel dan adk faqihah .

alhamdulillah..