Membuat Shoutbox Melayang

Mungkin banyak sobat yang masih bingung tentang cara Membuat Shoutbox Melayang berikut akan saya tunjukkan caranya sekalian buat postingan untuk update dan sekalian supaya banyak sobat yang masih newbie pada tahu tentang cara membuat shoutbox melayang ini.
Langsung saja ke pokok bahasan, langkah-langkah dalam membuat Shoutbox melayang adalah sebagai berikut:

1. Login ke Blogger.com.
2. Dari halaman Dashboard klik menu Rancangan dan klik menu Edit Html.
3. Jika sudah cari code </head>, jika sudah ketemu, letakkan code dibawah ini tepat dibawah code </head>

<style type='text/css'>
#gb{
position:fixed;

top:50px;

/* letak Posisi tombol ubah sesuai keinginan */
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/AVvXsEhq-f760-wn4-8KRn37-kv-Iv7YV09ophioUU6ZgPREsoS5stBkRcaFGtNhd44kv3FrxKNKu1mJVWFwnOKktczL_218hcA_SdwDsygKp0i6WjI5HZBgW4sg55P3ApkCw7SInnwsI6-HjUl0/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #cccccc;
background:#eeeeee;
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:center;'><a href='javascript:showHideGB()' title='Close/Tutup'/>
</div>

Letakkan script Shoutbox dari Cbox kamu disini.

<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>
</div>

Keterangan :

top:50px;

adalah letak dari tombol Shoutbox bisa di atas dan di bawah silahkan creasikan sendiri sesuai keinginan sobat.


4. Klik tombol Pratinjau dan jika sudah sesuai dengan keinginan klik tombol Simpan Template.

Selesai dan selamat mencoba!

Tweet