12 Membuat Buku Tamu C-Box/shoutmix Melayang

Membuat Buku Tamu C-Box/shoutmix Melayang adalah dimaksudkan untuk menghemat ruang halaman dari blog.


Gambar diatas merupakan contoh dari hasil membuat Membuat Buku Tamu C-Box/shoutmix melayang yang bisa dibuka tutup. Tertarik untuk membuatnya?saya sendiri membuat buku tamu dari cbox dikarenakan tidak perlu membayar sejumlah uang untuk membuatnya berbeda dengan shoutmix yang kini sudah berbayar untuk dapat membuatnya. Langsung saja ikuti langkah-langkahnya dibawah ini:

Bagi yang belum mempunyai cbox anda perlu mendaftar terlebih dahulu, anda dapat mendaftar disini (anda tinggal mengisi formulir pendaftaran, apabila sudah selesai pilih dan create my cbox). Setelah itu anda tinggal login dengan account yang telah dibuat dan anda dapat mengatur sendiri mengenai warna bacround, lebar dan tinggi dari cbox yang akan di buat, dan lain sebagainya.
Apabila tahap design telah selesai pilih publish, lihat kebawah pada step 1 anda tinggal memilih blog yang anda punya, pada step ke 2 pilih saja inline (default), dan pada step ke tiga anda tinggal copy paste pada tambah html/javasript, caranya seperti di bawah ini:


1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit Element
4. Klik Add Widget dan pilih
    HTML/Javascript
5. Masukan kode script 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('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 tulisan ini dengan kode cbox/shoutmix-->

<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>

6. tulisan yang berwarna merah seperti ini  <!-- Ganti tulisan ini dengan kode cbox/shoutmix--> anda tinggal menggantinya dengan kode cbox yang telah dibuat

7. Selesai dan semoga bermanfa'at. Jangan lupa komentarnya