Membuat Widget Buku Tamu Melayang

hai, masih dengan Intipan ponorogo, kali ini kita akan membahas tentang bagaimana membuat buku tamu melayang.

jika temen temen slalu ngikutin postingan kita, pasti sudah buat buku tamu dengan C-box kan? kali ini kita buat buku tamu itu melayang dan bisa di sembunyikan seperti punya ane itu lo. .

langsung aja ya, ini dia caranya.

1. langkah pertama masuk ke akun blog kamu.

2. langkah ke dua, pilih rancangan.

3. langkah ke tiga pilih tambah widget/gadget kemudian pilih HTML/Javascript.

4. langkah ke empat masukkan kode di bawah ini.

<!-- right hidden chatbox by http://www.intipanponorogo.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQgYCEaxz4wQX8V9rMn5GzCwHYJMuM3iIv7AoXRxYXY-FX9G7wEr1z14WtqBoMw-sYReGf-851yX4bP_qG4z-AD9LfIXQGlt-V_EUxLRK9B1lKRPXDmM_R6ZRbwE75JcmwZV9I9nQzq-c/s1600/Buku+Tamu+8.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">

<br />
<div class="hc-credit">

(masukkan code buku tamu anda disini)

</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 http://www.intipanponorogo.blogspot.com/ END -->

5. klik SIMPAN.

selesai deh .

ket.  

1. ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQgYCEaxz4wQX8V9rMn5GzCwHYJMuM3iIv7AoXRxYXY-FX9G7wEr1z14WtqBoMw-sYReGf-851yX4bP_qG4z-AD9LfIXQGlt-V_EUxLRK9B1lKRPXDmM_R6ZRbwE75JcmwZV9I9nQzq-c/s1600/Buku+Tamu+8.png') bisa anda ganti dengan gambar yang lain.