Cara Membuat Buku Tamu Pada Blog

Membuat buku tamu dibawah merupakan cara yang pas untuk meringankan sebuah blog jika dibandingkan dengan menaruh sebuat Shoutbox di halaman template secara langsung.

Berikut ini merupakan cara untuk membuat buku tamu tersebut, untuk memuat shoutboxnya, cara menyusul.

1. Login Bloger --> Rancangan --> Elemen Laman,
2. Tambahkan Gadget --> HTML / Java Script,
3. Masukkan kode berikut ( Jangan Diberi Judul ) :

<style type="text/css">#cb{
position:fixed;
bottom:150px;
z-index:+1000;
}
* html #cb{position:relative;}
.cbtab{
height:30px;
width:150px;
float:top;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAsQxJZk-pd_BS4Kn4tThE9Zf2pCUI-UKNLxN7yD4YYZrhGXcABFh4RunfQchFhcCELcm9iT3hiC1QiznnWXeu5MA2617s7pT9wLB1dkB6a37GzGLNbXa4PNZ1-FAi4MzA1qsjvVC-uhA/') no-repeat;
}
.cbcontent{
float:left;
border:2px solid #676767;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYsXEjzphuvCMl_z0JubxnGwmyFsZBxl7hzRil-ZYO6GJTM0_8VVNyEl_NMcPBsxNoe4n0k6DHb0HKq2H9wLw2eKePW_myJSvyHQwruALVgRxIKz-sYDO3nVK46pXAl-wkfKG4lZvuceLR/)#000000 repeat-x bottom center scroll;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:30px;
-moz-border-radius-bottomleft:30px;
-moz-border-radius-bottomright:5px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideCB(){
var cb = document.getElementById("cb");
var w = cb.offsetWidth;
cb.opened ? moveCB(0, 30-w) : moveCB(20-w, 0);
cb.opened = !cb.opened;
}
function moveCB(x0, xf){
var cb = document.getElementById("cb");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
cb.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveCB("+x+", "+xf+")", 10);}
}
</script>
<div id="cb">
<div class="cbtab" onclick="showHideCB()"> </div>
<div class="cbcontent">
[Ganti dengan embed Shoutmix-mu]
<div style="text-align: right;">
<a href="javascript:showHideCB()">
Close
</a></div>
<font size="2"><a href="http://faceblog-share.blogspot.com/"target=_blank"><div style="color: #444444;">
<span >Download Game + Software</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var cb = document.getElementById("cb");
cb.style.bottom = (30-cb.offsetWidth).toString() + "px";
</script>

4. Save Template

Source