News Update :

Cara Membuat Widget Buku Tamu/Chatbox Melayang Di Blog Keren | Tutorial Blog

Tuesday, April 24, 2012

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
9.Simpan Gadget sobat 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 ;)

Share this Article on :
Comments
0 Comments

0 komentar:

Post a Comment

Silahkan Berkomentar dengan bahasa yang sopan.

 

© Copyright GAMERSAKUT.net - Informasi Untuk Kalian 2012-2013 | Design by Herdiansyah Hamzah | Edited by GamersAkut.net | Powered by Google Website.