Cara Membuat Buku Tamu Auto Hide Pada Blog

Banya cara untuk mempercantik blog, salah satunya dengan menambahkan buku tamu di blog anda. Tapi buku tamu anda terlalu menghabiskan space halaman anda? jangan kawatir kita dapat membuat buku tamu kita menjadi auto hide atau nongol nyelip bahasa gaulnya,hhh
Kali ini blitari akan menunjukkan bagaimana cara untuk membuat buku tamu seperti di saamping itu.
Pertama tama anda harus sudah buat buku tamu anda di CBox, bagi yang belum buat dapat menuju ke link saya ini : Cara membuat buku tamu di blog.
Cara membuat Buku Tamu auto hide yang nempel di samping adalah sebagai berikut :

1. Sign in ke blogger dan silahkan Login dengan Account Anda

2. Pilih Layout/Tata Letak

3. Pilih Page Elemen/Elemen Halaman

4. Klik Add a Gadget/Tambah Gadget

5. Lalu pilih "HTML/JavaScript"



Kemudian Copy-Paste 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('http://sites.google.com/site/brugkembar/sc/bukutmbg.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="300" height="305" src="http://www7.cbox.ws/box/?boxid=463272&amp;boxtag=55ttsl&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-463272" style="border:#ababab 1px solid;" id="cboxmain7-463272"></iframe></div>
<div><iframe frameborder="0" width="300" height="75" src="http://www7.cbox.ws/box/?boxid=463272&amp;boxtag=55ttsl&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-463272" style="border:#ababab 1px solid;border-top:0px" id="cboxform7-463272"></iframe></div>
</div>
<!-- END CBOX -->
<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>

CATATAN :

1. Ganti tulisan yang berwarna merah dengan kode yang anda peroleh dari Cbox.
2. Tombol Buku Tamu dapat anda ganti sesuka hati dengan terlebih dahulu merancangnya di Photoshop atau di CorelDraw, setelah itu upload di hosting image seperti photobucket dsb. lalu ambil URLnya dan pasang di background.

6. Simpan, dan lihat hasilnya jreng jreeeng...jadilah buku tamu nyelap nyelip..

Cara Membuat Buku Tamu Auto Hide Pada Blog 2012-07-14T17:11:00+07:00 Rating: 4.5 Diposkan Oleh: blogku