Cara membuat buku tamu / chatbox melayang 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 -->



3. Save



Keterangan :
  • top:50px; /*jarak dari atas*/ (50px adalah jarak dari atas, jika kurang pas ditambahin atau dikurangin  aja sob)
  • CODE CHATBOX (SEPERTI SHOUTMIX) SOBAT (Ganti dengan code chatbox sobat)
  • https://lh4.googleusercontent.com/-zLl0PK2efX0/TgWyhYOla2I/AAAAAAAAARo/UQ80xw59L2M/CHATTING.png (Gambar bagian samping jika menurut sobat kurang bagus silahkan diganti ama url gambar sobat)
  • background:#000000; /*warna latar*/ (#000000 adalah warna di sekeliling chatbox, jika merasa tidak cocok sama blog sobat silahkan diganti contoh : #FFFFFF = warna putih)
  • solid red; (Warna border jika ingin diganti, tinggal ganti nisa pake warna (red/white/green..,) atau menggunakan code (#FFFFFF / #000000.., )



Download lagi yang laen :