Cara membuat buku tamu / chatbox melayang di blog

Posting tengah malam saya Gan!! *hahaha
Kali ini saya mau share cara bikin buku tamu / chatbox melayang atau menempel di samping layar.
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="https://sites.google.com/site/rianbayuprakasa/home/energysaving/Rian%20Bayu%20Cbox.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 Template


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.., )

Semoga bisa membantu sob ! Jangan lupa ya untuk memberikan kesempatan bagi kami di  SINI

Baca selengkapnya »