Membuat buku tamu nempel atau atauhide di bagian samping blog merupakan salah satu cara menghemat sidebar blog. Buku tamu ini akan tersembunyi dan hanya terlihat tulisan buku tamu saja pada bagian samping blog. Buku tamu akan otomatis tampil setelah anda mengklik tulisan
'Buku Tamu" tersebut. Berikut cara lengkapnya...
1. Sign in ke blogger dan silahkan Login dengan Account Anda
2. Pilih Layout/Tata Letak
3. Pilih Page Elemen/Elemen Halaman
4. Klik Add a Gadget/Tambah Gadget
5. Lalu pilih "HTML/JavaScript" dan copykan code script di bawah ini :
Script:
<style type="text/css">
#gb{
position:fixed;
top:20px;
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/AVvXsEhKgL3phqweRA8QFEkCN7uH0YBlW5vF15J3ngNsPezg53G7rXdqhqbNHZVyPe_ONGDauZB4L9GLYaP6T63Ju80MTSb2aUN29rrT2HEXQlUiiPgZX0dftSzxCe07XPRADGPNvCWgHwJ1spY/s1600/bukutamu.png') no-repeat;
}
.gbcontent{
float:right;
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">
<center>
<!-- BEGIN CBOX -->
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www7.cbox.ws/box/?boxid=788757&boxtag=p8jlrc&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-788757" style="border:#EDDEDB 1px solid;" id="cboxmain7-788757"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=788757&boxtag=p8jlrc&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-788757" style="border:#EDDEDB 1px solid;border-top:0px" id="cboxform7-788757"></iframe></div>
</div>
<!-- END CBOX -->
</center>
<div style="text-align:right">
<a href="http://iwan-ingin-berbagi.blogspot.com/2012/08/membuat-buku-tamucbox-nempel-di-sebelah_25.html">[get this widget]</a><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>
6. Simpan dan lihat hasilnya.
'Buku Tamu" tersebut. Berikut cara lengkapnya...
1. Sign in ke blogger dan silahkan Login dengan Account Anda
2. Pilih Layout/Tata Letak
3. Pilih Page Elemen/Elemen Halaman
4. Klik Add a Gadget/Tambah Gadget
5. Lalu pilih "HTML/JavaScript" dan copykan code script di bawah ini :
Script:
<style type="text/css">
#gb{
position:fixed;
top:20px;
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/AVvXsEhKgL3phqweRA8QFEkCN7uH0YBlW5vF15J3ngNsPezg53G7rXdqhqbNHZVyPe_ONGDauZB4L9GLYaP6T63Ju80MTSb2aUN29rrT2HEXQlUiiPgZX0dftSzxCe07XPRADGPNvCWgHwJ1spY/s1600/bukutamu.png') no-repeat;
}
.gbcontent{
float:right;
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">
<center>
<!-- BEGIN CBOX -->
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www7.cbox.ws/box/?boxid=788757&boxtag=p8jlrc&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-788757" style="border:#EDDEDB 1px solid;" id="cboxmain7-788757"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=788757&boxtag=p8jlrc&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-788757" style="border:#EDDEDB 1px solid;border-top:0px" id="cboxform7-788757"></iframe></div>
</div>
<!-- END CBOX -->
</center>
<div style="text-align:right">
<a href="http://iwan-ingin-berbagi.blogspot.com/2012/08/membuat-buku-tamucbox-nempel-di-sebelah_25.html">[get this widget]</a><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>
6. Simpan dan lihat hasilnya.