AH-SHARED

Creative Is Knowledge

  • Home
  • Tutorial
  • Sitemap
  • About
  • Exchange
  • Search
skip to main | skip to sidebar
Home » Blogger » Tricks » Tutorial » Cara Membuat ChatBox

Cara Membuat ChatBox

Posted by Unknown
Blogger,Tricks,Tutorial
Wednesday, May 29, 2013
3 Comments
carabuatchatbox

H
aloo sobat AHS, kali ini saya akan membahas tutorial tentang cara membuat chatbox.
ituloh sobat yang biasanya ada di sisi sebelah kanan blog,ya memang cara itu sudah banyak sekali beredar di internet, benar kan? tetapi hanya beberapa orang saja yang tau/bisa membuat script sama seperti yang saya buat untuk tutorial ini (Chatbox Versi 2 : Edited AHS)


sebetulnya sih,cara membuat chatbox itu sudah sangat banyak sekali sobat, mulai dari memakai css + javascript biasa sampai memakai css + jquery + javascript.
tetapi,di sini yang mau saya kasih kepada sobat itu cara yang standar sama cara yang saya pakai dalam membuat chatbox(dibaca memakai jquery).

oke, tidak usah berlama-lama yuk simak cara memasang chat box ini.

Cara memasang chatbox melayang(Versi Standart)


Demo
yang penasaran dengan chatbox ini,harap segera melihat demonya xD (ngga suka ndak usah dipasang -_-)

Live Demo

  • Pertama anda login ke blogger anda dahulu
  • Setelah itu,ke menu layout/ tata letak.
  • Lalu klik add element > HTML/Javascript
  • Nah,setelah itu copy kode dibawah ini kedalam kotak HTML/Javascript tadi(bukan pada judul,tetapi kotak yg besar dibawahnya)
<style type="text/css">
.gb_fixed{position:fixed;
top:60px;
right:-4px;
z-index:+10;
-moz-border-radius:3px;
border-radius:3px
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {display:none;
border:1.5px solid #cccccc;
-border-radius:5px;
background:#000000;
padding:10px;
padding-top:0px;
-moz-border-radius:5px;
border-radius:5px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div>
<a href="javascript:void(0)" onclick="gb_showHideGB()"><img src="http://lh4.ggpht.com/_oFXd4wU3lK8/TSQrWfZqfnI/AAAAAAAAADQ/OzM7TygiCdM/Close.png" title="Click to Close"/></a></div>
<!-- BEGIN CBOX - www.cbox.ws - v001 --><div id="cboxdiv" style="text-align: center; line-height: 0"><div><iframe frameborder="0" width="245" height="333" src="http://www7.cbox.ws/box/?boxid=631314&amp;boxtag=t978zk&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-631314" style="border:#ababab 1px solid;" id="cboxmain7-631314"></iframe></div><div><iframe frameborder="0" width="245" height="117" src="http://www7.cbox.ws/box/?boxid=631314&amp;boxtag=t978zk&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-631314" style="border:#ababab 1px solid;border-top:0px" id="cboxform7-631314"></iframe></div></div><!-- END CBOX --><div>
<center><blink><a href='http://ah-shared.blogspot.com' target='_blank'>Get This Widget</a></blink>
</center></div>
<center>
</center></td></tr>
</table>
</div>
<script src="http://ahshare-project.googlecode.com/files/cbox.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhol0CXoIk3HIGU01cBUrKCdPgCMkN4BQtdSMn_jKcQXERWy_kyG_XpUXFM5YDL8Z9Zv4C06ivPu-5it0toKO9LfkbLTP6a5BlKa1Ia8c1uMc4OtQPLUqfbMuzgqHytnf5afkQ9hVfXf_g/s1600/bukutamu.png" alt="Ah-Shared.com"/>
</a></div>


Cara Membuat Chatbox Versi AHS


Demo
yang penasaran dengan chatbox ini,harap segera melihat demonya xD (ngga suka ndak usah dipasang -_-)

Live Demo


  • caranya sama seperti diatas,tetapi hanya berbeda pada kodenya
  • copy kodenya ini
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".gbbtn").click(function(){
        $("#gbcontent").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });
});
</script>
<style>
/* ---------------
Edited by : Angwyn
Powered by : http://ah-shared.blogspot.com
---------------------------------- */
.gb {
position:fixed;
top: 0px; right:450px;
z-index:+1000;
}
#gbcontent {
    height: auto;
    background: #898787;
    width: auto;
    display: none;
    padding: 10px;
    border:4px solid  silver;
background:url(http://i51.tinypic.com/rcq4b7.gif) #000000 repeat-y center;
   -webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
    padding:10px;
}
.gbbtn {
    position:fixed;_position:relative;top:50px; right:0px;
    clip:inherit;
    _top:expression(document.documentElement.scrollTop+
    document.documentElement.clientHeight-this.clientHeight)
}
.active {
    background-position: right 12px;
}
</style>
<div class="gb">
<div id="gbcontent">
KODE CHATBOX KAMU</div>
<br />
<div id="gbbtn"><a href="#" class="gbbtn" title="Buku Tamu"><img alt="Buku Tamu" heigth="125" src="http://i1042.photobucket.com/albums/b429/Farix_2010/Chatting.png" border="0"style="cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)&amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50"/></a></div></div>

Versi 1(standart) :
Kode Merah Merupakan Kode Chatbox,kode itu ganti menjadi milik anda sendiri,
Tambahan: Cara ini bisa digunakan untuk membuat follow blog melayang,dll
Versi 2(Edited by AHS) :
Kode merah yang paling atas itu kode jquery.min.js, hilangkan itu jika template kalian sudah memasangnya
kode biru merupakan kode dari chatbox anda.

Ingat sobat, jangan pernah sekalipun mengganti credit,jadilah blogger yang menghargai karya orang lain.
Maka demikianlah artikel Membuat Chatbox.
Tweet

3 Responses to "Cara Membuat ChatBox "

ahs-avatar
Balas
Ajie Wicaksono Author ahs-delete May 29, 2013 at 8:09 PM

backk ah~~~ www.progralicious.blogspot.com

ahs-avatar
Balas
Unknown Author ahs-delete June 9, 2013 at 3:03 PM

boleh dicoba ni gan,,,
www.dedy-pkp.blogspot.com

ahs-avatar
Balas
Unknown Author ahs-delete June 9, 2013 at 3:15 PM

@dedy gokil Monggo ^^

:)
:(
=(
^_^
:D
=D
|o|
@@,
;)
:-bd
:-d
:p
Thanks for comments
← Newer PostOlder Post →Home

AH-SHARED On Facebook

Advertise

banner andabanner anda1banner anda2banner anda3
 
AHS2

Labels

AHS OriginalAwardBeritaBloggerC++CheatCSSDewasa(18+)EmoticonEvent AHSFacebookFull PatchGamesGaya HidupHackingInfoInfo JutsuIT InfoKesehatanNarutoNewsPengetahuanProgrammingRemajaSEOSoftwareTemplateTipsToolsTricksTukar linkTutorialUnik

Little About AHS

AH-SHARED didirikan sekitar bulan Agustus 2012 tetapi baru diluncurkan sekitar bulan Mei 2013. Mau tau kenapa?? silahkan simak di... Readmore »

New Update

  • Kumpulan Dork Untuk Deface Website
  • Cara Membuat Comment Form Keren & Tombol Konvert
  • Cara Membuat Comment Blogger dan G+ Berdampingan
  • Cara Membuat Post Di Bagi Menjadi 2 Bagian
Back to top!
Copyright © 2012-2013 AH-SHARED - All Rights Reserved
Design by Angwyn Benvenuto - Powered by Blogger