Cara Membuat Buku Tamu / Shoutmix Tersembunyi

Cara Membuat Buku Tamu / Shoutmix Tersembunyi - inilah yang akan Damul sharing pada artikel kali ini. Shoutmix, Cbox atau yang sering disebut dengan Buku Tamu merupakan sesuatu yang dianggap penting terdapat didalam sebuah blog. Buku tamu tersebut bisa dijadikan sebagai tempat berinteraksi, tempat bertanya dan lain sebagainya yang tentunya dengan tujuan yang positif.

Mungkin sobat sudah tau bagaimana cara membuat buku tamu, tetapi apakah sobat tau bagaimana caranya agar buku tamu tersebut tersembunyi di samping kiri / kanan blog yang tentunya bisa menghemat tempat di sidebar blog kita. Untuk melihat bagaimana tampilan buku tamu tersembunyi tersebut silahkan klik link dibawah ini : 

Buku Tamu Tersembunyi Di Blog

Bagaimana Cara Membuat Buku Tamu Tersembunyi ?

Untuk membuatnya sangatlah mudah, hanya dengan menambah beberapa kode ke dalam blog, maka buku tamu akan terlihat tersembunyi pada blog. Berikut langkah-langkah yang perlu sobat lakukan untuk membuat buku tamu tersembunyi : 

1. Login pada account blogger anda. 

2. Pilih "Rancangan" kemudian pilih "Tambah Gadget"

3. Pilih HTML/Javascript

4. Copy kode dibawah ini, kemudian letakkan di dalam tempat yang disediakan

<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/AVvXsEh1Tq1GbVmZIVbNwoQ1F3U0iozpO9qGeS9-Cma8ngPiYYvVSG6JwIsPsoW2E0OIFUfJBxbBZKQ1AqFrl1EXk-u23VaUDin4pqQk7Ljn_sYhK8NIZBCt8TSJTo6_iK2cW8093jq3k1aYat3u/') 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">

<< Masukkan Kode Cbox, Shoutmix Sobat Untuk dijadikan Buku Tamu >>

<br/>
<div style="text-align:right">
<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>

5. Simpan

Itulah langkah-langkah yang harus dilakukan untuk membuat buku tamu tersembunyi. Apabila sobat sudah melakukan langkah-langkah diatas, coba lihat hasilnya pada blog sobat, maka buku tamu akan tampil tersembunyi disamping kiri/kanan blog.