Cara membuat buku tamu / chatbox melayang dan transparant di blog

Hari ini gw mau share cara bikin bukutamu / chatbox melayang atau menempel di samping layar. Tutorial blog post pertama gw, ok pantengin sob !
Kalo pengen liat hasilnya liat aja punya gw di samping kanan sob.







Langsung aja caranya sob :


1. Masuk pada menu Tata Letak / Edit Layout
2. Klik Tambah Gadget / Add a Gadget
3. Pilih HTML/Javascript
4. Copy kode berikut dan paste pada HTML/Javascript tersebut

<!-- Mulai Hidden Widget -->
<style type="text/css">
.rifaldhi_fixed{
position:fixed;
top:50px; /*jarak dari atas*/
right:0px;
z-index:+1000;
}
* html .rifaldhi_fixed {position:relative;}
#hidden_rifaldhi {
display:none;
border:2px solid red; /*ketebalan dan warna kotak*/
-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
background:#000000; /*warna latar*/
padding:5px 10px 0px 10px;
}
</style>
<div class="rifaldhi_fixed">
<table id="hidden_rifaldhi" cellpadding="0" cellspacing="0">
<tr><td>
<!-- Gambar Atas -->
<div style="text-align:center;"><a href="javascript:void(0)" onclick="rifaldhi_showHiderifaldhi()" title="Close/Tutup"><img style="border:0px; width:100px; height:auto;" alt="Guestbook" src="https://lh6.googleusercontent.com/_GaKwmMcf4N4/TZF_q9zp34I/AAAAAAAAEs4/sdn4x40jLsQ/DADclose.png" /></a></div>

CODE CHATBOX (SEPERTI SHOUTMIX) SOBAT

<br/>
<script type="text/javascript" src="http://rifaldhi-blog.googlecode.com/files/bukutamu_rifaldhi.co.cc.js"></script>
</td></tr></table></div>
<!-- Gambar Samping -->
<div style="z-index:+5" class="rifaldhi_fixed">
<a href="javascript:void(0)" onclick="rifaldhi_showHiderifaldhi()">
<img style="border:0px;" src="https://lh4.googleusercontent.com/-zLl0PK2efX0/TgWyhYOla2I/AAAAAAAAARo/UQ80xw59L2M/CHATTING.png" /></a>
</div>
<!-- Selesai Hidden Widget -->

jika code chat box / cbox anda belum ada, sobat bisa mendaftar dulu

daftar

selesai deh boss hahhahaha jangan lupa komentar dan isi buku tamu nya ea :D