Cara membuat buku tamu / chatbox melayang di blog

13.02 Muktiadi A Januar

Image by : Rian Bayu Prakasa

setelah sekian lama tak update,, karena banyak kesalahan koneksi,, kali ini saya akan menshare gadget buku tamu/ chatting/ chatbox/ atau apalah anda menyebutnya,

yang harus dipersiapkan dahulu hanyalah code chatbox,,
apabila anda belum mempunyai code nya silahkan daftar dulu di penyedia chatbox,(tak tahu? tanya ke mbah google)

Untuk hasil, silahkan lihat hasilnya di kanan layar anda,,
 
Goodluck ;)
langsung caranya aja 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


script by : Rian Bayu Prakasa
 
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 !

Source