Wednesday, 29 February 2012

Cara Membuat Widget Buku Tamu Melayang di Sisi Kanan

Baiklah kawan... Pada tutorial kali ini, saya akan memberikan cara tentang membuat widget buku tamu yang melayang di sisi kanan blog. Kelebihan utama dari widget ini adalah bisa disembunyikan (sistem buka-tutup) dan bisa diletakkan dibagian tepi kiri, kanan atau bawah, sehingga bisa menghemat tempat pada sidebar. Dan berikut ini caranya :
Cara membuat buku tamu (guest book) / chatbox melayang :
1.    Daftar dulu di Shoutmix atau Cbox, pilih salah satu saja.
2.  Isikan data yang diminta dengan lengkap, jika sudah selesai ambil kode shoutmix yang diberikan dan simpan dulu di notepad.
3.    Selanjutnya login ke dashboard blogger anda.
4.    Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).
5.  Copy kode script dibawah ini dan paste pada gadget, kemudian masukkan kode shoutmix anda pada bagian yang saya tandai dengan tulisan warna merah.
<!-- Mulai Hidden Widget -->
<style type="text/css">
.rifaldhi_fixed{
position:fixed;
top:180px; /*jarak dari atas*/
right:0px;
z-index:+1000;
}
* html .rifaldhi_fixed {position:relative;}
#hidden_rifaldhi {
display:none;
border:2px solid #616258; /*ketebalan dan warna kotak*/
-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
background:#f1f1ea; /*warna latar*/
padding:3px 10px 0px 10px;
}
</style>
<div class="rifaldhi_fixed">
<table id="hidden_rifaldhi" cellpadding="0" cellspacing="0">
<tr><td>
<!-- Gambar Atas -->
<div style="text-float:right"><a href="javascript:void(0)" onclick="rifaldhi_showHiderifaldhi()" title="Close/Tutup"><img style="border:0px; width:auto; height:auto;" alt="Guestbook" src="http://blog.akakom.ac.id/marcell/files/close.png" /></a></div>

LETAKKAN KODE GUESTBOOK/SHOUTMIX/CBOX/SHOUTCAMP ANDA DISINI

<br/>
<script type="text/javascript" src="http://bukutamu-zies-name.googlecode.com/files/bukutamu-zies-name.js"></script>
</td></tr></table></div>
<!-- Gambar Samping -->
<div style="z-index:+5" class="rifaldhi_fixed">
<a href="javascript:void(0)" onmouseover="rifaldhi_showHiderifaldhi()">
<img style="border:0px;" src="http://img221.imageshack.us/img221/4097/bukutamu3c.png" /></a>
</div>
<!-- Selesai Hidden Widget --> 

6.    Preview dulu untuk  melihat hasilnya.
7.  Edit kode shoutmix pada bagian width dan height untuk mengatur lebar dan tinggi kotak widget sesuai keinginan. Sobat juga dapat melakukan editing pada bagian CSS untuk mengganti kode warna background atau mengganti URL gambar button dengan URL gambar anda sendiri. Silahkan bereksplorasi sendiri saja ya. Saran saya buatlah blog khusus untuk tempat uji coba sobat.
8.  Jika sudah beres Simpan/Save gadgetnya.
Dengan adanya widget guest book/buku tamu melayang seperti ini jadi memudahkan kita berinteraksi dengan pengunjung blog. Karena banyak juga pengunjung blog yang kadang malas menulis di kotak komentar namun hanya ingin sekedar menyapa melalui widget buku tamu shoutmix/cbox ini.


3 comments:

Edi Samsul said...

Info menarik dan bisa diterapkan. Oh, ya. Terima kasih ya sobat...

Education - Download said...

@Edi Samsulsama-sama gan... Semoga bermanfaat ! :)

Darmawan Saputra said...

Terima kasih atas artikelnya.
o iya selama saya jelajah mencari ilmu dengan blogwalking, menurut saya anda memiliki kelebihan tersendiri dari situs-situs lain dan jujur potensi anda juga sangat bagus, banyak juga ilmu yang saya pelajari disini jika ada waktu saya akan berkunjung lagi.

ditunggu kunjungan baliknya :D

u follow me, i follow u

#Semoga sehat selalu :D

Post a Comment