tips & trik blog #24: cara membuat hidden chat box mirip facebook

tips & trik blog #24: cara membuat hidden chat box mirip facebook
--------------------------------------------------------------------

Anda mungkin berniat memasang chat box di blog anda. tetapi bagaimana caranya agar chat box tersebut diisi oleh banyak pengunjung. salah satunya adalah dengan memberikan posting yang bagus dan mengundang pertanyaan.

tetapi saya mempunyai cara lain, yaitu dengan membuat chat box tersebut mirip dengan layanan chat yang ada pada facebook. caranya adalah dengan membuat hidden chatbox di bagian kanan bawah. hidden chat box tersebut saya beri sebuah tombol bertuliskan chat, yang apabila di klik, akan memunculkan kotak chat box. silakan anda coba sendiri di blog saya ini.

apabila anda tertarik dengan hidden chat box seperti yang ada pada blog saya, silakan copy paste kode html berikut kedalam html blog anda :


<!--hidden chatbox by http://www.trik-ngeblog.co.cc START -->
<style>
#hcr {
position:fixed;
bottom:-438px;
right:90px;
z-index:+1;
}
* html #hcr {position:relative;}
.hcrtab {

height:32px;
width:210px;
float:top;
cursor:pointer;
background:url
(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz5c-w6XExpE9ItRanAkz2VtWWTGYK8q9MX6wY4aTYwmRW_88IeccCVkBUJbtLOc9n2-zu9-B3ER-ZDINmy5ACG__jIOVoLEuVc6BQA_l8z6FnK7uQ82_om7vaRvq0e_tx8oMP7IL0AMYz/s1600/chat.png&quot;) no-repeat;
}
.hcrcontent {
float:bottom;

background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type='text/javascript'>
function showHidehcr(){
var hcr = document.getElementById(&quot;hcr&quot;);
var w = hcr.offsetHeight;
hcr.opened ? movehcr(0, 32-w) : movehcr(20-w, 0);
hcr.opened = !hcr.opened;
}
function movehcr(x0, xf){
var hcr = document.getElementById(&quot;hcr&quot;);
var dx = Math.abs(x0-xf) &gt; 10 ? 5 : 1;
var dir = xf&gt;x0 ? 1 : -1;
var x = x0 + dx * dir;
hcr.style.bottom = x.toString() + &quot;px&quot;;
if(x0!=xf){setTimeout(&quot;movehcr(&quot;+x+&quot;, &quot;+xf+&quot;)&quot;, 10);}
}
</script>
<div id='hcr'>
<div class='hcrtab' onclick='showHidehcr()'>
<img height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhUFtMvvgo8qLZSQ9p9gmwHJ2h68muVpQ2lQkQHnptO47xow1u7M3G7qO9spxcuk4_FNYmi4IzblK7KRNcAVzVn5lu8kMtjDghBeh5rVEGVpM_RpGRJprB0LVnVdkpj5EJHhzs-hRZf6er/s1600/chat.png' width='212'/>
</div>
<div class='hcrcontent'>

<!-- KODE CHATBOX -->

<br/></div></div>





<style type='text/css'>
#gb{
position:fixed;
bottom:-4px;
z-index:+0;
}
* html #gb{position:relative;}


.gbcontent{
float:right;
}
</style>

<script type='text/javascript'>
function showHideGB(){
var gb = document.getElementById(&quot;gb&quot;);
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(&quot;gb&quot;);
var dx = Math.abs(x0-xf) &gt; 10 ? 5 : 1;
var dir = xf&gt;x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + &quot;px&quot;;
if(x0!=xf){setTimeout(&quot;moveGB(&quot;+x+&quot;, &quot;+xf+&quot;)&quot;, 10);}
}
</script>

<div id='gb'>

<div class='gbtab' onclick='showHideGB()'> </div>

<div class='gbcontent'>


<center>


<a href='http://www.trik-ngeblog.co.cc'><img height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5eRjL5aLGDCGJjiYMzmX4yQ7HrfTRsLiEB70oaNt-qE1ISj9EVXi9tug9An4gmBR8QvZz9ygweuBColW8C_BTM-Iy9BTryv0h-q1LbZq3oEK1VlniVDS9x185fzO6IgzODwfeiHTFve7Z/s1600/Untitled.png' width='10000'/></a>



</center>
<script type='text/javascript'>
var gb = document.getElementById(&quot;gb&quot;);
gb.style.center = (30-gb.offsetWidth).toString() + &quot;px&quot;;
</script></div></div>
<!--  hidden chatbox by http://www.trik-ngeblog.co.cc END -->

Ukuran chatbox harus 180x400 (height="400" width="180")

--------------------------------------------------------------------

tips & trik blog #24: cara membuat hidden chat box mirip facebook