Membuat Buku Tamu Tersembunyi Untuk Cbox atau Shoutmix

Peletakan buku tamu sebaiknya diletakkan di tempat yang mudah terlihat oleh pengunjung. Ya, tentunya agar pengunjung mudah menemukan dan mengisi buku tamu. Namun jika diletakkan apa adanya, ntar yang ada malah template terasa penuh. Gini cara mengakalinya, jagoan liat disebelah kanan layout jagoBlog.com ada buku tamu yang tersembunyi bukan. Coba jagoan klik, dooorrr, dan buku tamunya muncul. Cara seperti itulah yang cocok untuk sebuah penempatan buku tamu. Tertarik? ikuti langkah-langkahnya:

1. Pertama-tama jagoan harus punya akun di Cbox atau Shoutmix dan kreasikan tampilan buku tamu yang cocok untuk blog jagoan. 

2. Dapatkan kode cbox/shoutmix untuk blog jagoan

3. Masuk ke akun blogger jagoan dan masuk ke Layout dan masuk tab Page Elemen

4. Tambahkan widget HTML/Javascript dan letakkan terserah dimanapun

5. Copy dan pastekan kode dibawah ke dalam widget HTML/Javascript tadi

<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('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.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 ini dengan kode cbox/shoutmix jagoan -->

<a href="http://www.jagoblog.com/2011/07/membuat-buku-tamu-tersembunyi-untuk.html"> Grab this </a> 
</a>

<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. Ganti kode <!-- Ganti ini dengan kode cbox/shoutmix jagoan --> dengan kode cbox/shoutmix jagoan. Jagoan juga bisa mengatur posisi tampilannya. Rubah nilai atribut top, semakin kecil nilai, maka tampilan akan semakin ke atas.

6. Save, dan liat hasilnya

Title: Membuat Buku Tamu Tersembunyi Untuk Cbox atau Shoutmix; Written by jeremyrancsio; Rating: 5 dari 5