Membuat Buku Tamu di Blogspot dengan cara disembunyikan

 

Membuat Buku Tamu di Blogspot dengan cara disembunyikan, Lama tak berjumpa dengan postingan mengenai Tutorial Blog hehehee. mungkin sudah banyak yang tahu cara membuat buku tamu di blog, tapi yang belum tahu bisa mengikuti cara dibawah ini, kali ini dengan cara di hidden alias tidak ditampakkan yang biasanya berada pada side bar sebuah blog. Contohnya pada blog saya ini, bisa dilihat di samping kanan blog ini. silahkan lihat dan sekalian tinggalkan pesan atau komentar di blog ini dan coba bagaimana cara kerjanya.

Buku tamu pada sebuah blogger sebenarnya bukan sesuatu yang wajib dipasang, tapi pastinya kita akan mendapatkan keuntungan apabila kita memasang buku tamu di blogspot yaitu selain mempercantik blog juga sebagai sarana komunikasi dengan sapa-menyapa antara pengunjung dengan admin untuk saling berbagi pengalaman.

Membuat Buku Tamu di Blogspot dengan cara disembunyikan, kita bisa memanfaatkan situs-situs penyedia buku tamu gratis yang mudah kita dapatkan di internet, salah satunya adalah www.cbox.ws .

Silahkan kunjungi dahulu situs tersebut, mendaftar kemudian ambil kode scriptnya yang nantinya akan dipasang kan ke dalam blog.

Setelah mengcopy kode script buku tamunya, maka silahkan masuk ke blog  lalu log in > klik rancangan > elemen laman > tambah Gadget > html/javascript, dan masukan kode di bawah ini:

 

<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/AVvXsEg6wwxoErYx82DMTOG_Z455Yg88RUt8JpS0V-hERmqWVCJAec92rV40zY-4iUnhhgdY-73KyIDTKrpL6e1VdZezoJnheshNAyFhe9yKAwg8or7Pw9hmStVzXKQ6LoNWIb6eWfpp4kmxEqY/s1600/bukutamu.png') 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">
 

GANTI TULISAN INI DENGAN KODE BUKU TAMU KALIAN

<div style="text-align:right">
<a href="http://aliandika.blogspot.com/2012/11/membuat-buku-tamu-di-blogspot-dengan.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></div></div>

Masukan kode buku tamu yang telah dibuat lalu paste di tulisan yang berwarna merah

Apabila sudah di paste jangan lupa di simpan “save”.

Dan hasilnya akan seperti contoh diblog dibawah ini

<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/AVvXsEg6wwxoErYx82DMTOG_Z455Yg88RUt8JpS0V-hERmqWVCJAec92rV40zY-4iUnhhgdY-73KyIDTKrpL6e1VdZezoJnheshNAyFhe9yKAwg8or7Pw9hmStVzXKQ6LoNWIb6eWfpp4kmxEqY/s1600/bukutamu.png') 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 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://www5.cbox.ws/box/?boxid=755266&amp;boxtag=7175&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain5-755266" style="border:#ababab 1px solid;" id="cboxmain5-755266"></iframe></div>

<div><iframe frameborder="0" width="200" height="75" src="http://www5.cbox.ws/box/?boxid=755266&amp;boxtag=7175&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform5-755266" style="border:#ababab 1px solid;border-top:0px" id="cboxform5-755266"></iframe></div>

</div>

<!-- END CBOX -->

<div style="text-align:right">

<a href="http://aliandika.blogspot.com/2012/11/membuat-buku-tamu-di-blogspot-dengan.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>

Ganti kode yang diberi warna di atas dengan kode script yang telah anda buat disalah satu situs penyediaan buku tamu..

Selamat mencoba...!!