Hidden Show Shoutbox Widget

Hello blogger, gimana kabar blogger sekalian!! Ternyata kasus blog suspend sudah selesai. Blognya Kang Rohman sudah kembali seperti semula. Mau bagi-bagi info nie gimana cara simple biar blog kalian ga terlihat sumpek, alias kebanyakan widget sana sini. Hidden Show Shoutbox Widget. Kedengerannya unik, ini hanya sebuah tips saja biar blog kita lebih enak dipandang mata. Yakni dengan menempatkan Buku Tamu/ Chatbox / Guesbox  atau widget yang lain dengan mengHidden atau Show widget. Hehe kelihatan rumit bahasanya

Langsung aja dah tutorialnya. Simple saja

Pertama, masuk Login Blogger Draft kemudian pilih Tata Letak
Kedua pilih add gadget element lalu masukkan kode dibawah 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/AVvXsEjhP4-aK1bnRSt3NuUfIDbUEJ1hH2bDNYhtTk5BTtbYX1FD1T5pdUYqg2kWyA4Ij8v5vbGj37NoPzYw1LoXy0_ooS4BiP2sCdzssMQmhFqpl1S6OStuLHjWoEKdVHaHIkangHJ0WUOtpNcs/') 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 scrolling="auto" width="200" frameborder="0" src="http://www5.shoutmix.com/?ndyteens" height="400" title="ndyteens">
<a href="http://www5.shoutmix.com/?ndyteens">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="javascript:showHideGB()">

[tutup]
</a>
</div>

</div>

</div>

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

Cuma gitu aja. oh iya kamu bisa ganti widget tersebut dengan yang lain. Ga harus Shoutmix... Nah cara merubah dengan widget yang lain adalah cukup menghapus kode yang tercetak hitam tebal diatas. Lalu ganti dengan widget sesuka anda.

OK, Selamat Mencoba

Posted by: Andi Setyoko

Berita Harian, Updated at: 6:52 AM