Ehm, sesuai janji saya beberapa hari yang lalu. Ini saya postingkan cara Membuat Buku Tamu/ Chat Box di Blog . Ini saya juga sekalian share tentang cara mendesainnya , jadi silakan dibaca lebih lanjut.
Sebelum anda membuat buku tamu/ chat box anda harus membuat akun buku tamu di beberapa site yang menyediakan jasa buku tamu gratis seperti di
cbox ,
fibox ,
shoutchamp , atau penyedia chat box gratisan lainnya. Karena saya pakainya chabox, maka saya hanya contohin yang chatbox aja ya gan.
Pertama : Silakan pergi ke situs
cbox , lalu tekan sign up.
Kedua : Silakan isi data anda sesuai dengan keinginan anda, ini datanya boleh tidak valid (sebenarnya) . Soalnya ini hanya sarana aja gan, gak harus serius - serius amat . Untuk bagian website masukin alamat blog anda dan untuk style terserah aja, mau pilih apa aja bisa. Lalu tekan create my cbox !
Ketiga : Setelah itu anda akan disuruh mengkonfirmasi email anda terlebih dahulu baru bisa login kembali ke cbox.
Keempat : Setelah mengkonfirmasi email pilih kategori cbox yang anda ingin kan ( mau yang mana pun sama, cuma beda cara pop up nya aja). Lalu copy kan coding yang telah disediakan.
Kelima : Silakan login ke blogger anda , dan segera masuk ke laman blogging anda. Pilih tata letak , lalu tambahkan gadget.
Keenam : Setelah menambahkan gadget, akan muncul pop up dan pilihlah Html/Java script .
Ketujuh : Pastekan coding yang anda copy tadi ke dalam konten dikotak pop up yang disediakan seperti pada gambar. Judul bisa bisa dikosongkan
Sekarang sudah jadi Buku Tamu / Chat Box sederhana.
Ehm, kalau kalian mau membuat buku tamu/chat box menjadi lebih menarik.
silakan isikan koding - koding yang ada dibawah ini :
Pilihan pertama :
<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}* html #gb{position:relative;}
.gbtab{
height:150px;
width:50px;
float:left;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_ZCJtbQ2WwbQgJl-K339Zxp42ftDGk65TuuazYVR3QAdukZrDNJY4Bq7-xN5OkBQS7XQfDI1ZJa58TqLZIpYjPYjy7c7Ubp1mnJr2lc7mI0981VfW8h03HhQHesWXACdd-3VwRDTAtYI/s1600/bukutamu.gif')
no-repeat;
}
.gbcontent {
float:left;
border:1px solid #000000;
-moz-border-radius-bottomleft:5px;
-webkit-border-radius-bottomleft:5px;
-o-border-radius-bottomleft:5px;
-khtml-border-radius-bottomleft:5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
background: #F2F2F2; url() no-repeat bottom;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")",
5);}
}</script>
<div id="gb">
<div class="gbtab" onmouseover="showHideGB()">
</div>
<div class="gbcontent">
<center>
<!-- BEGIN CBOX -
www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height:
0">
<div><iframe frameborder="0" width="280"
height="268"
src="http://www5.cbox.ws/box/?boxid=772205&boxtag=cecpjf&sec=main"
marginheight="2" marginwidth="2" scrolling="auto"
allowtransparency="yes" name="cboxmain5-772205"
style="border:#000000 1px solid;"
id="cboxmain5-772205"></iframe></div>
<div><iframe frameborder="0" width="280"
height="85"
src="http://www5.cbox.ws/box/?boxid=772205&boxtag=cecpjf&sec=form"
marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes"
name="cboxform5-772205" style="border:#000000 1px
solid;border-top:0px"
id="cboxform5-772205"></iframe></div>
</div>
<!-- END CBOX -->
<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Widget by<a target="_blank"
href="http://karaokebatak.blogspot.com/2012/04/cara-membuat-buku-tamu-guestbook.html">
KaraokeBatak </a></span>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>
</div>
Lalu gantilah coding yang berwarna merah dengan coding yang anda copy kan dari cbox tadi .
Pilihan Kedua (Sama seperti punya saya ) :
<style type="text/css"> #at{ position:fixed; right:450px; z-index:+1000; } * html #at{position:relative;} .attab{ height:100px; width:30px; float:left; cursor:pointer; background:url(); } .atcontent{ float:left; border:4px solid #CC0000; background: #00f; -moz-border-radius-topleft:30px; -moz-border-radius-topright:0px; -moz-border-radius-bottomleft:0px; -moz-border-radius-bottomright:30px; padding:10px; -moz-box-shadow: 0px 4px 5px 0px #0dc3ff; } </style> <script type="text/javascript"> function showHideAT(){ var at = document.getElementById("at"); var w = at.offsetWidth; at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0); at.opened = !at.opened; } function moveAT(x0, xf){ var at = document.getElementById("at"); var dx = Math.abs(x0-xf) > 25 ? 35 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; at.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);} } </script> <div id="at"> <div class="attab" onclick="showHideAT()"> </div> <div class="atcontent"> <div align="center"> <div style="background:#0000CC;">
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www7.cbox.ws/box/?boxid=712377&boxtag=tel535&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-712377" style="border:#ababab 1px solid;" id="cboxmain7-712377"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=712377&boxtag=tel535&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-712377" style="border:#ababab 1px solid;border-top:0px" id="cboxform7-712377"></iframe></div>
</div>
<!-- END CBOX -->
</div> </div> <br /> <div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv9J7lVLIc2qGUdERtwHhVWoFFB8wC9GlTtWXjjGyEJsUFwhzXLjv-7-t5O_jsCygFxoBeLU-mYLU_GtidhA6M7sYoXuE4SdH5jBpEqExHvUPV_JQuY7VttkDXzmsagsla9dMuaHRWQPC6/s1600/close.png" alt="close" title="Click here to Close Cbox" /></a></div> </div></div> <script type="text/javascript"> var at = document.getElementById("at"); at.style.top = (-200-at.offsetWidth).toString() + "px"; </script> <div style='display:scroll; position:fixed; top:20px; right:0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src=" http://i48.tinypic.com/x35udw.gif " /></a> </div>
Sama kyk tadi gan, gantilah coding yang berwarna merah dengan coding yang anda copy kan dari cbox tadi .
Selamat mencoba . Semoga postingan saya yang
berjudul Membuat Buku Tamu/Chat Box di Blog ini bermanfaat bagi kalian. Terima kasih telah meluangkan waktu anda untuk
membaca blog saya.
NB: Jika terjadi eror atau codingnya tidak jalan silakan comment atau tinggalkan pesan di buku tamu saya. Siapa tau ada pengetikan koding ( copy coding sih sebenernya ) ada yang ketinggalan.
