Cara Membuat ChatBox Melayang di Blog A Z K A V E I R O: Cara Membuat ChatBox Melayang di Blog
13

Cara Membuat ChatBox Melayang di Blog

Share on :

Hallo sobat Blogger hari ini saya akan membahas tentang cara membuat Cbox atau lebih dikenal sebagai buku tamu merupakan hal yang tidak asing lagi di dunia blogger, sudah banyak tutorial-tutorial yang membahas tentang cara pemasangan Cbox, baik dengan cara standar maupun dengan cara pengubahan kode CSS.

Ok langsung saja ke Cara Membuat Chat Box di bawah, atas, kanan, kiri Blog : 

Login terlebih dahulu ke blog sobat 

Klick Design -> Pilih tata letak -> Tambah Gadget -> Pilih HTML/Java Script. 

Copy Code di bawah ini setelah itu paste di HTML/Java Script .

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://1.bp.blogspot.com/-Fu1GTJiqjAs/Tk9GPChUlhI/AAAAAAAAAJo/Rc01LxQqJZQ/s1600/2131wkl.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">

<embed src="http://www.xatech.com/web_gear/chat/chat.swf" quality="high" width="540" height="405" name="chat" flashvars="id=187289954" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.shtml" /><br /><small><a target="_BLANK" href="http://xat.com/web_gear/?cb">Get your own Chat Box!</a> <a target="_BLANK" href="http://xat.com/web_gear/chat/go_large.php?id=187289954">Go Large!</a></small><br />

<br/>
Anda ingin membuat buat Buku Tamu seperti ini?<br/>
Klik  <a href="http://1sfgate.blogspot.com/2012/12/cara-membuat-chat-box-melayang.html">
disini </a>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</embed></div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>



Bagi sobat yang ingin mengganti tombol Cbox bisa lihat kode nya Dibawah sini! :


http://1.bp.blogspot.com/-h1DI2Vvt4y0/Tk9GTOFmFDI/AAAAAAAAAKE/6j4-eg8bfVw/s1600/Chatbox.png



http://2.bp.blogspot.com/-N8RQFYloE8U/Tk9GQiznVRI/AAAAAAAAAJ0/w0zESnm6QBI/s1600/Bukutamu3.png



http://3.bp.blogspot.com/-R-qijeJYiRc/Tk9GQdoO_sI/AAAAAAAAAJw/-gz0KZf_fzc/s1600/bukutamu2.gif



http://2.bp.blogspot.com/-QIvW70iUtw0/Tk9GSDXDH7I/AAAAAAAAAJ8/W__GrhmvUao/s1600/bukutamu5.png



http://1.bp.blogspot.com/-Fu1GTJiqjAs/Tk9GPChUlhI/AAAAAAAAAJo/Rc01LxQqJZQ/s1600/2131wkl.png



http://1.bp.blogspot.com/-bbW-SQuPxjA/Tk9GRVOM53I/AAAAAAAAAJ4/3O-QoudrWOA/s1600/bukutamu4.png



http://4.bp.blogspot.com/-kId5EVOdKjY/Tk9GPgw2uCI/AAAAAAAAAJs/5M95sfmpUa8/s1600/BukuTamu1.png




http://4.bp.blogspot.com/-bj4eeCVV6hM/Tk9GSbUTreI/AAAAAAAAAKA/ZCtLxHeV5uY/s1600/Bukutamu6.gif

Klik Simpan / Save dan lihat hasilnya.

PPC Iklan Blogger Indonesia

Ditulis Oleh : Azka Latif Noor ~ Tips dan Trik Blogspot

Azka Latif Noor Sobat sedang membaca artikel tentang Cara Membuat ChatBox Melayang di Blog. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya

:: Get this widget ! ::

13 komentar:

Aan Shared mengatakan...
Reply

wuih, keren-keren chat box nya gan..

Anonim mengatakan...
Reply

Hi there! This is kind of off topic but I need some help from an established blog.
Is it difficult to set up your own blog? I'm not very techincal but I can figure things out pretty fast. I'm thinking about making my own but I'm not sure where to begin. Do you have any tips or suggestions? Cheers

Feel free to surf to my web site ... garbage disposal disposer insinkerator installation

Anonim mengatakan...
Reply

Your way of explaining the whole thing in this post is genuinely nice,
every one be capable of simply be aware of it, Thanks a lot.



Take a look at my site: her explanation

Anonim mengatakan...
Reply

My coder is trying to persuade me to move to .net from PHP.
I have always disliked the idea because of the expenses. But he's tryiong none the less. I've been
using Movable-type on various websites for about a year
and am worried about switching to another platform.
I have heard fantastic things about blogengine.net. Is there a
way I can transfer all my wordpress content into it?
Any help would be really appreciated!

my blog :: premature ejaculation condoms

Anonim mengatakan...
Reply

Hey! I know this is kinda off topic but I'd figured I'd ask.
Would you be interested in trading links or maybe guest writing a blog article or vice-versa?
My website goes over a lot of the same subjects as yours and
I believe we could greatly benefit from each other.
If you're interested feel free to send me an e-mail. I look forward to hearing from you! Wonderful blog by the way!

Here is my webpage :: weight loss tips bodybuilding

Anonim mengatakan...
Reply

Now then guys lеtѕ јust calm down, have a nice
wаrm bath and a сup of tea.

My ωebsite :: easy fast loans

Anonim mengatakan...
Reply

Hey! Do you know if they make any plugins to help
with SEO? I'm trying to get my blog to rank for some targeted keywords but I'm not seeing very good results.
If you know of any please share. Thank you!

my blog post :: best erectile dysfunction devices

manz mengatakan...
Reply

mantap boos terimakasi infonya

kunjungan balik blog saya juga

Hatake F Seiei mengatakan...
Reply

thanks, visit us http://tutorial-updates.blogspot.com/

Rina mengatakan...
Reply

bagus kalau ditaruk di blog, bisa mempermudah kita berhubungan dengan pengunjung blog kita
trims

Anonim mengatakan...
Reply

Reminisce how Grandma continually said to your workout to understate
protein equipment failure that passes off after educating.
6 Pack Abs, as fought to genial workout, assists prevent path to an downright
admiration in the simplest, but to build as in effect as possible.
Exempt #4 - Too busy with demand is the proper
venereal disease of self-discipline, consistence and conclusion to win.
This is too honorable advice 6 Pack AbsUse milk or else of pick in your coffee berry.


Feel free to surf to my blog post - truth about abs - http://truthaboutabsdon.
com []

Aslam Muhammad mengatakan...
Reply

kok tulisan guest box.y tdk ada?

Jual Jersey 2014 mengatakan...
Reply

Thanks untuk info backlinknya.

Jual Jersey 2014

Posting Komentar

BLOG INI DOFOLLOW .
Silahkan tinggalkan komentar dan kritik sobat, tapi mohon jangan SPAM ya..!
Komentar SPAM akan di HAPUS oleh admin.
Komentar yang membangun sangat dibutuhkan oleh blog ini.
Terima Kasih.

Back to Top