Tutorial#12 - Hide/Minimize ShoutBox Celah Skrin

Jan 27, 2011 - ♛Posted by : Mr.IX at 6:30 PM
Aku serba salah, dilemma la nak letah Shoutmix ke taknak...letak-takyah-letak-takyah...
Jadi, dengan nak-taknak-nya aku letak gak la..Blogger ciput macam aku kan, mudah la nampak peminat-peminat Shoutmix tu kan... Honestly, aku lebih layan Commentators berbanding ShoutMixers...

[p/s: Saje nak wat penegasan, tutorial ni lebih kepada personal..untuk simpanan rujukan masa akan datang jer..Jika ia juga turut membantu blogger, amat saya hargai]
Since Layout aku huru-hara ada la kebaikannya jugak...
Kebaikan : aku leh update tutorial blog, jadi blog ni updated.
Ke-tidak-brapa-baik : aku luangkan masa duk kemaskini blog jer...

Kali ni nak letak ShoutMix : Tapi ShoutMix ni 'hide/minimize' kat celah-celah skrin tu.....supaya dapat maximizekan sidebar space..
1 - Perlulah Log In Blogger dulu
2 - Free Sign Up dulu kat website ShoutMix : http://www.shoutmix.com/main/
p/s: perlu sign up shoutmix supaya pasni mudah nak delete chat yang tak-sesuai/detect IP address/nak Banned ker atau adjust ShoutMix Box.

3 - Pergi kepada 'Design'
4 - Pilih 'Add a Gadget'
5 - Pilih lagi yang 'HTML/JavaScript'
6 - Pastu Copy Paste Code :
<style type="text/css">
#gb{
position:fixed;
top:30px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://3.bp.blogspot.com/_LZtXSNcp76A/SzzN08B1K5I/AAAAAAAAA0U/QT4rY6-FhI8/s320/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-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">



Insert Your Shoutbox Code Here

<a href="http://riezarchry.com/home/?p=457"><small>Hide your ShoutBox</small></a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>  
7 - Di antara Code di atas terdapat "Insert Your Shoutbox Code Here" dan gantikan dengan Code Shoutmix anda (yang di dapati di dalam Shoutmix Akaun anda)
8 -Code Image tersebut [background:url('http://3.bp.blogspot.com/_LZtXSNcp76A/SzzN08B1K5I/AAAAAAAAA0U/QT4rY6-FhI8/s320/tabs.png') ] boleh di gantikan dengan imej kegemaran anda

Hasilnya :