Cara Memasang Buku Tamu Hide Show Kanan/Kiri

Halo sahabat otowebsite? kali ini blog ini akan update postingan/articles tentang Cara Memasang Buku Tamu Hide Show Kanan/Kiri pada blog sobat.
Sobat semua pasti udah pada punya akun buku tamu kan? seperti cbox atau shoutmix??? kalo diem saya anggap sobat udah pada punya, karna dalam blog ini tidak menjelaskan cara membuat akunnya karna kelihtannya sobat pasti sudah pada punya semua. Dan bagi sobat yang ingin membuat buku tamunya hide show di kanan atau kiri blog sobat sobat hanya tinggal menambahkan kode script berikut ke dalam wiget blog sobat.

contoh tampilan buku tamu hide show

Oke dah sekarang kita lansung aja tentang cara pemasangannya:
1.Masuk ke akun blogger sobat.
2.Pada tab menu pilih Rancangan ➨ Tambah Gadget ➨ Pilih HTML/Java Script.
3.Pada Gadget HTML Java Scrip masukkan salah satu kode scrip berikut( kotak HTML/Java Scrip tidak usah di beri judul)

Left Hidden Guest Book.

<!-- left hidden guestbook by www.otowebsite.blogspot.com/ START -->
<style>
#hcl {
position:fixed;top:100px;
left:0px;
z-index:+1000;
}
* html #hcl {position:relative;}
.hcltab {height:100px;width:30px;
float:left;
cursor:pointer;
background:url(' http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_bukutamu55.png ') no-repeat;
}
.hclcontent {
float:left;
border:2px solid #790909;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcl(){
var hcl = document.getElementById("hcl");
var w = hcl.offsetWidth;
hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);
hcl.opened = !hcl.opened;
}
function movehcl(x0, xf){
var hcl = document.getElementById("hcl");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcl.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}
}
</script>
<div id="hcl">
<div class="hclcontent">

LETAKKAN KODE BUKU TAMUMU DISINI

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<span style="font-size: 100%;">
<span style="color: red;"> Get this</span>
<a href="http://otowebsite.blogspot.com/2012/05/cara-memasang-buku-tamu-hide-show.html" target="_blank">
<span class="Apple-style-span" style="color: orange;"> Desaign</span>
<span style="float:right">
<a href="javascript:showHidehcl()">
[close]
</a>
</span>
</div>
</div>
<div class="hcltab" onclick="showHidehcl()"> </div>
</div>
<script type="text/javascript">
var hcl = document.getElementById("hcl");
hcl.style.left = (30-hcl.offsetWidth).toString() + "px";
</script>
<!-- left hidden guestbook by www.otowebsite.blogspot.com/ END -->

Right Hidden Guest Book

<!-- right hidden chatbox by www.otowebsite.blogspot.com/ START -->
<style>
#hcr {
position:fixed;top:100px;
z-index:+1000;
}
* html #hcr {position:relative;}
.hcrtab {height:100px;width:30px;
float:left;
cursor:pointer;
background:url(' http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_buku-tamumu.png ') no-repeat;
}
.hcrcontent {
float:left;
border:2px solid #003e82;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcr(){
var hcr = document.getElementById("hcr");
var w = hcr.offsetWidth;
hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
hcr.opened = !hcr.opened;
}
function movehcr(x0, xf){
var hcr = document.getElementById("hcr");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcr.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}
}
</script>
<div id="hcr">
<div class="hcrtab" onclick="showHidehcr()"> </div>
<div class="hcrcontent">

LETAKKAN KODE BUKU TAMUMU DISINI

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<span style="font-size: 100%;">
<span style="color: red;"> Get this</span>
<a href="http://otowebsite.blogspot.com/2012/05/cara-memasang-buku-tamu-hide-show.html" target="_blank">
<span class="Apple-style-span" style="color: orange;"> Desaign</span>
<span style="float:right">
<a href="javascript:showHidehcr()">
[close]
</a>
</span>
</div>
</div>
</div>
<script type="text/javascript">
var hcr = document.getElementById("hcr");
hcr.style.right = (30-hcr.offsetWidth).toString() + "px";
</script>
<!-- right hidden chatbox by www.otowebsite.blogspot.com/ END -->

4.Simpan dan lihat hasilnya.

Keterangan:

1. top:100px adalah keterangan jarak icon hidden chatbox dari atas (top) sejauh 100 px.
2. height:100px adalah tinggi (height) tampilan icon hidden chatbox yang sebesar 100 px.
3. width:30px adalah lebar (width) tampilan icon hidden chatbox yang sebesar 30 px.
4. background:url(' http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_bukutamu55.png ') no-repeat adalah icon hidden chatbox yang akan berguna untuk menampilkan chatbox yang disembunyikan.
5. LETAKKAN KODE BUKU TAMUMU DISINI, ganti dengan kode buku tamu sobat seperti cbox atau southmix
6. border:2px solid #003e82 adalah warna (solid) dan ukuran border yaitu #003e82 dan border sebesar 2 px.
7. background:#f3f6f7 adalah warna background pada chatboxsaat ditampilkan.

Berikut ini adalah beberapa icon dan url icon hidden chatbox atau buku tamu yang saya siapkan untuk sobat yang bisa sobat gunakan.

http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_buku-tamumu.png

http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_bukutamu5.png

http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_bukutamu1.png

http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_bukutamu4.png

http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_bukutamu3.png

http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_bukutamu2.png

http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_bukutamu6.png

http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_buku-tamu-1.png

http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_bukutamu55.png

http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_bukutamu22.png

http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_bukutamu44.png

http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_bukutamu33.png

http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_bukutamu22.png

http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_bukutamu66.png

Sekian dulu untuk postingan/articles tentang Cara Memasang Buku Tamu Hide Show Kanan/Kiri kali ini, semoga bisa bermanfaat untuk sobat semua.
Bagaimana apakah sobat berhasil menerapkannya, silahkan tinggalkan tanggapan dan komentar sobat tentang postingan/articles kali ini.