Assalammualaikum...
hari ni,nak kongsi tutorial pasal hideshoutbox lak..tutorial ni di-ask-kan(adakah ayat camni?.....ayat aku lah camni!haiyh) oleh cik B.Love yang comel..here bukti nya yang sahih :)




dia kata,,
"eniq, BL nak tanye mcmmne nk hide shoutbox?mcm best jerww"

wahh..best ke B.Love???
jawapan Eniq,,,
ha'a....memang best pon,,,, sebab leoas ni,,tak perlulah berpanas-panas keluar rumah untuk main hide and seek sebab sekarang kita boleh main hide and seek dengan shoutbox sendiri ^^
hahaaaaa..... LOL~

ok,,,jom start!

For Layout


pergi design.....pastu,,tekan add a gadjet,lepastu scroll kebawah lagi.....
sampai jumpa HTML/JAVASCRIPT .Klik tu HTML/JAVASCRIPT ok.. :)
Dah klik????? nanti muncul satu kotak kan?(haiyh..itu pun mau di ajar ka?)

lepastu,,,,dipersilakan copy code dibawah ni lepastu paste di  ruang kosong tu ok

<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:200px;
width:50px;
float:left;
cursor:pointer;
background:url('URL icon shoutbox kamu tu') no-repeat;}
.gbcontent{
float:left;
border:2px solid #666666;
padding:1px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 50-w) : moveGB(10-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<center>
<div id="custombg" style="width:260px; height:380px; background:url(URL background Shoutbox) repeat; padding-top:0px; padding-left:0px; position:relative" align="center">

SHOUTBOX CODE 

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</center></div></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>

yang saya boldkan dan warnakan tu,,,maksudnya boleh adjust lah.

10 => jarak icon dan shoutbox dari atas
Url icon shoutbox kamu tu =>url icon untuk shoutbox korang tu..maksudnya,,gambar yang kalau diklik,,terus keluar shoutbox kamu tu :)
260=>lebar background shoutbox
380=>panjang background shoutbox
Url background shoutbox => Url gambar untuk background shoutbox kamu tu..kalau Eniq,tak letak apa-apa..so,dia jadi transparent..hahaaa... pemalas kan?
Shoutbox code => Letaklah shoutbox code kamu tu.. :)






For classic template a.k.a blogskins,, ni tutorial dia :)

seperti B.Love,,, awak boleh paste code kat atas ni di tempat sidebar.
Kalau ada kemusykilan,,sila bertanya pada saya lalu shoutbox,comment form atau pm saya difacebook.




Maaf saya tak dapat buat freebies untuk kali ni......
saya agak busy dengan edit-edit blog orang.
heheeee....

so,,insya-allah kalau saya ada masa,saya update post kali ni dengan memasukkan freebies sekali :)
chill beb! :)


tutorial dikreditkan kepada : Azhafizah@Gadis Merah Jambu 

Labels: tutorial