Membuat Shoutmix Melayang Di Samping Halaman

Terkadang dalam membuat beberapa widget dibutuhkan banyak tempat. Belum lagi jika dalam suatu web atau blog yang sudah terlihat padat dan tidak ada tempat yang memungkinkan untuk menambah widget. Dalam tutorial blog ini saia akan mencoba membantu berbagi dengan menyembunyikannya di samping halaman, berikut langkah-langkahnya :

1. Masuk ke akun blogger pilih tata letak > Elemen Laman.
2. Klik add gadget > trus pilih HTML/Java script.
3. Copy paste kode di bawah ini > Kemudian simpan.

<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/AVvXsEi3cLnjDCelWmm-igyTV0iNEXXOH-gN62mwGTwCXnrskSyNZTRCfv4GGzZf1TTPgxEg7PTdeoJwP05ayqnUGLPC87c79-GeUnLr_4v4sapCkU-MLLacdeAl3ypGMKZ1JbfT7TYqqhQehJSQ/') 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">
<div style="text-align:right">
<a href="javascript:showHideGB()">
[Close]
</a>
</div>
<!-- Begin ShoutMix - http://www.shoutmix.com --><iframe title="donipunyablog" src="http://www6.shoutmix.com/?donipunyablog" width="100%" height="460" frameborder="0" scrolling="auto"><a href="http://www6.shoutmix.com/?donipunyablog">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; font-size:10px">
Dapatkan Buku Tamu Seperti Ini di
</div>
<div style="text-align:right; font-size:10px">
<a href="http://news126.blogspot.com/">
news126.blogspot.com</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Untuk kode yang berwarna merah silahkan ganti dengan shoutmix kode anda.

Selamat mencoba !

Semoga Artikel yang saia posting di blog ini bermanfaat,terima kasih..