Cara Membuat Buku Tamu Tersembunyi Untuk Shoutmix dan Cbox di Blog

Malam ini saya sedikit menyempatkan waktu walaupun sudah lumayan ngantuk [untung tadi sudah beli kopi sama cemilan, hahaha] untuk membuat tutorial by request dari salah satu sobat blogger yaitu tentang bagaimana Cara Membuat Buku Tamu Tersembunyi Untuk Shoutmix dan Cbox di Blog.

lihat pict

Mungkin teman-teman semua sudah sering melihat buku tamu tersembunyi ini ketika teman-teman semua melakukan blogwalking di blog lainnya, nah buku tamu itulah yang dimaksud, biasanya di taruh di sebelah kanan blog.

Buku tamu tersebut akan keluar ketika teman-teman klik gambar Buku Tamunya yang berwarna hijau itu dan akan tersembunyi lagi ketika teman-teman klik kembali gambarnya atau klik 'close/tutup'. Menarik bukan teman-teman untuk dicoba? Selain itu juga cara ini sedikit menghemat tempat di dalam blog.

Untuk cara membuatnya ikuti langkah-langkah di bawah ini:

1. Login ke akun blogspot,
2. Klik Rancangan/Design >> Page Element >> Add a Gadget >> HTML/Javascript,
3. Copy paste kan semua kode di bawah ini dan masukkan di dalam konten HTML/Javascript,

<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/AVvXsEic-89xfyYgWlwidiiRw29wxAb-E3BAkCrwpzettMSePHbb4orTgl0htMdP01DcCo6jGjq-Oa3I26WLAnaY5PA-gdhpNzPoSFvzWA4sZemtLNfUD1Hl2Npy6dvqDKmYT-q79rbH8qBbZMK1/') 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 Shoutmix/Cbox teman-teman di sini]

<div style="text-align:right">
<a href="http://cantik-2013.blogspot.com/2010/07/cara-membuat-buku-tamu-tersembunyi.html">
[Make Your Own]
</a> by anggasona |<a href="javascript:showHideGB()">
[Close]
</a>
</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

4. Ganti tulisan yang berwarna merah dengan kode Shoutmix atau Cbox teman-teman semua,
5. Jika sudah lalu klik save dan lihat hasilnya.

Selamat, teman-teman sekarang sudah memiliki Buku Tamu Tersembunyi di dalam Blognya. Untuk merubah Emoticons di Cbox teman-teman bisa cek di sini, Cara Menambah Emoticons Di Cbox Chat.

Kira-kira seperti itulah Cara Membuat Buku Tamu Tersembunyi Untuk Shoutmix dan Cbox di Blog. Semoga bisa bermanfaat dan selamat mencoba. Untuk request yang lainnya yang belum sempat saya postingkan harap bersabar ya, jika memang saya bisa dan sempat pasti akan saya buatkan tutorialnya :D