Setelah postingan yg kemarin Cara Membuat Widget "FLAG COUNTER" Pada Sidebar Blog | Tutorial Blogger .Kali ini mau share soal cara membuat Buku tamu atau Chatbox keren,contohnya ke yg di blog ane ini gan ,yang ini :
Okee gimana,cakep ga?haha kalo sobat tertarik ingin pake widget buku tamu atau chatbox ini langsung aja masbor kita ke TKP :
1.Pertama-tama kamu harus Register Akun dulu disini
2.Isi Semua formulir kebutuhan untuk register,ini tutornya :
klik sob untuk lebih jelasnya
3.Jika sudah selesai semua,lalu klik Create my Cbox!
4.maka akan dikirim sebuah kode html Cbox mu ke email yg sudah kamu isi tadi,lalu login ke email kamu dan liat di Inbox email kamu lalu klik link yang paling pertama dikirim oleh dia,lalu klik
5.Kelima kamu sudah dapat kode HTML Chatbox kamu ,tapi jangan diapa2kan dulu,lanjut ke step berikutnya
6.Pilih Rancang pada Blog
7.Add Gadget lalu pilih HTML/Java Script
8.Copy Paste Kede ini :
<style type="text/css">
#gb{
position:fixed;
top:50px;
right:0px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:130px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i763.photobucket.com/albums/xx277/gberandal/celoteh%20galang/CHATBOX.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 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+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
[ISI DENGAN KODE HTML CBOX KAMU TADI SOB]
<div style="text-align:right"><a href="http://gamers-akut.blogspot.com/2012/04/cara-membuat-widget-buku-tamuchatbox.html">[Pasang Ini Juga]</a>><a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>
NOTE :
- Link berwarna merah bisa kamu ganti dengan gambar2 buku tamu yang lainnya sesuai keinginan sobat
- Kata yg diberi efek Bold dan warna merah itu ganti dengan kode html cbox yg sobat dapat tadi
Maka hasilnya akan seperti diatas tadi,horeeeeeeeee
SELAMAT MENCOBA SOBAT GAMERS AKUT
INFO : Ikuti terus update - update terbaru dari Gamers-Akut
karena masih banyak posting2 yang tertunda dan akan di post di waktu
yang akan datang nanti pokoknya kalo berkunjung ke Blog saya jangan lupa
tekan CTRL + D dulu gan ;)
0 Comments
