Cara Memasang Buku Tamu Hide Show Kanan/Kiri

Salam sahabat Wahyu Hary? Kesempatan ini wahyu hary memposting tentang Cara Memasang Buku Tamu Hide Show Kanan/Kiri pada blog sobat.

Pasti banyak dari sobat yang sudah tahu cara memasangnya...tapi apa salahnya kalau kita berbagi info..siapa tahu banyak newbie seperti saya yang belum tahu...he

semoga Artikel ini bisa membantu sobat blogger newbie dalam membuat sebuah buku tamu hide and show kiri atau kanan….

Sebelum membuat buku tamu sobat harus sudah mempunyai kode buku tamu yang didapat dari cbox atau southmix, sobat harus mendaftar dulu untuk mendapatkan kode tersebut

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.Wahyu-Hary07.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.wahyu-hary07.blogspot.com/ END -->

Right Hidden Guest Book

<!-- right hidden chatbox by www.wahyu-hary07.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.Wahyu-Hary07.blogspot.com/ END -->

4.Simpan dan jreeennggg….lihat hasilnya sob. . J

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.

Sekian artikel dari saya, semoga bermanfaat,,,,,