Cara Memasang Buku Tamu pada Blog

Buku Tamu adalah suatu elemen atau bagian dalam blog yang cukup penting, walaupun tidak terlalu penting. (bingung ???. ). Dengan buku tamu, kita dapat berinteraksi dengan pemilik blog, jadi bisa saling silaturahmi, nah bagi kawan-kawan yang bingung dalam pemasangan buku tamu, andryemos akan berbagi cara memasang buku tamu

Dafar ke situs penyedia Buku tamu

1. Daftar ke situs penyedia buku tamu, klik disini
2. Isi form pendaftaran dengan data yang agan miliki
3. Setelah berhasil mendaftar, masuk ke situs web tersebut. (cbox)
4. Masuk ke tab Publish !, lalu copy code buku tamunya

contoh code cbox

<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=501967&boxtag=wq06xm&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-501967" style="border:#000000 1px solid;" id="cboxmain7-501967"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=501967&boxtag=wq06xm&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-501967" style="border:#000000 1px solid;border-top:0px" id="cboxform7-501967"></iframe></div>
</div>

Cara Memasang Buku Tamu di Blog

1. Masuk ke dasbhord blog agan
2. Pilih tata letak > tambah gadget > HTML/Javascript
3. Masukkan kode yang sudah agan copy tadi di kolom HTML/javascript
4. Save

Cara Memasang Buku Tamu di bagian Kanan Blog

1. Masuk ke dasbhord blog agan
2. Pilih tata letak > tambah gadget > HTML/Javascript
3. Masukkan kode dibawah ini

<style type="text/css">
#gb{
position:fixed;
top:60px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i1089.photobucket.com/albums/i346/andryemos/ScreenHunter_02Mar102026.jpg') no-repeat;
}
.gbcontent{
float:left;
border:3px solid #000000;
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 id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www7.cbox.ws/box/?boxid=501967&boxtag=wq06xm&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-501967" style="border:#000000 1px solid;" id="cboxmain7-501967"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=501967&boxtag=wq06xm&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-501967" style="border:#000000 1px solid;border-top:0px" id="cboxform7-501967"></iframe></div>
</div>


<div style="text-align:right">
<a href="http://andryemos.blogspot.com">
[Free ShoutMix]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

catatan : ganti script warna merah dengan script cbox agan

4. Save

Cara Memasang Buku Tamu Auto Hide (Otomatis tersembunyi) di Blog

1. Masuk ke dasbhord blog agan
2. Pilih tata letak > tambah gadget > HTML/Javascript
3. Masukkan kode dibawah ini

<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}* html #gb{position:relative;}

.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://i1089.photobucket.com/albums/i346/andryemos/ScreenHunter_02Mar102026.jpg') no-repeat;
}

.gbcontent {
float:left;
border:1px solid #000000;
-moz-border-radius-bottomleft:5px;
-webkit-border-radius-bottomleft:5px;
-o-border-radius-bottomleft:5px;
-khtml-border-radius-bottomleft:5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
background: #F2F2F2; url() no-repeat bottom;
padding:10px;
}

</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){

var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}
}</script>

<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>

<div class="gbcontent">
<center>


<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=501967&boxtag=wq06xm&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-501967" style="border:#000000 1px solid;" id="cboxmain7-501967"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=501967&boxtag=wq06xm&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-501967" style="border:#000000 1px solid;border-top:0px" id="cboxform7-501967"></iframe></div>
</div>

<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://andryemos.blogspot.com/"> widget! </a></span>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>

</div>

catatan : ganti script warna merah dengan script cbox agan

4. Save

Sekian beberapa cara memasang buku tamu. semoga bisa membantu agan2 sekalian.. ;D

Cara Memasang Buku Tamu pada Blog

14 Responses to "Cara Memasang Buku Tamu pada Blog"