Membuat Buku Tamu Melayang

Dalam postingan sebelumnya kita belajar bagaimana membuat atau menempatkan buku tamu pada blog (shoutbox). Kali ini kita akan belajar bagaimana Membuat Buku Tamu Melayang seperti di blog ini

Berikut tutorialnya
Kita hanya menambahkan script berikut pada html shoutbox kita

<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/AVvXsEh6x7Cf3SHfYkn4HPf_xxBT4QoE5bkkUj8KeJBLcME9sJGC0lVJpVG44b-UM4DZIjvsYHZZ-ACkV1wQ27Xqnm2QCHVHnySU4XRFPNeQYSV7jGL71HjvXIvXmWr-V9X4Lq5CLtYR2c9Yogl6/') 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="teknologiuntukkita" src="http://www5.shoutmix.com/?teknologiuntukkita" width="200" height="400" frameborder="0" scrolling="auto">
<a href="http://www5.shoutmix.com/?teknologiuntukkita">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 -->

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

Kopi script diatas dan ganti tulisan yang berwarna merah dengan SCRIPT ShoutMix punya anda dan simpan.

Artikel ini dapat dikopi dengan tanpa menambah atau mengurangi kata/kalimat yang ada.
Semoga bermanfaat.
Terima Kasih