Membuat Widget Chat Shoutmix Sembunyi di Sidebar

ini dia trik lagi tentang sembunyi-sembunyi widget, hehehe. Kalau masih penasaran dengan trik ini aku tuntun deh. Seperti yang sudah saya jelaskan sebelumnya tentang Widget Followers Sembunyi di Sidebar sebelumnya, trik ini pun tidaklah jauh berbeda. Malahan trik ini lebih simple ketimbang yang kemarin. Oke deh langsung saja tidak perlu banyak teori lagi.

1. Login ke Blogger.


2. Pilih tab Design – Page Elements.


3. Add widget – HTML/JavaScript.


4. Masukkan kode berikut ini :

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPGBZ7NVNyBPlmRQvLrS2zyAOr3D5wM_QPF4THT9uhuYkZ7kdhW6OTq2sdrvM7YP7Uoh7iUu2KCefpBe5PVJQIu_61IJngtDWIh_DYyLeEQFBhbhmapP7XjusSJ-WCZDFi_k73pgy0GvVf/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
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">

<!-- Begin ShoutMix - http://www.shoutmix.com -->

<iframe title="horier" src="http://www5.shoutmix.com/?horier" width="160" height="400" frameborder="0" scrolling="auto">

<a href="http://www5.shoutmix.com/?horier">View shoutbox</a>

</iframe>

<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />

<!-- End ShoutMix -->

<div style="text-align:right">
<a href="http://horier.blogspot.com/ ">[Horier]</a>><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></div></div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

5. Ganti code shoutmix berwarna merah dengan code anda sendiri. Bila sudah selesai Save dan lihat hasilnya. ^^