17 September 2011

cara membuat chatbox melayang di samping kanan blog

Nha ada temen saya yang request nih bagaimana cara membuat chatbox melayang di samping kanan blog...
Ok-ok saya britahu..
berikut cara-caranya..
V
V
V

  • kunjungi WEB INI
  • klik create shoutbox
  • isi format lengkap
  •  kalau udh masuk klik Style & Colors
  •  edit-edit sesukamu
  • kalau udh balik lagi ke home
  • ambil HTML yg tersedia 
  • masuk ke blogger
  • klik rancangan
  • tambah widget
  • pilih HTML/Java script
kopy HTML berikut 

<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://i683.photobucket.com/albums/vv193/vebyo/Guest3.gif') 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">



PASANG HTML ANDA





<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script></div></div>

NB : Ganti kata PASANG HTML ANDA dengan HTML kode shoutbox yg telah di kopy tadi.

  • SIMPAN
{}SEMOGA BERMANFAAT{}

7 komentar:

Mufid Islami mengatakan...

Mantap Gannn...... Tq Infonyaaa

Tips-Triks mengatakan...

@Mufid Islami Itu lakh indahnya Beragi..
beritahu temen2xnya ya...

Galer Vodgals mengatakan...

met siang sob, kalau kita sudh punya trus mau di edit seperti melayang kesmping gitu bisa ga? thx

Tips-Triks mengatakan...

@Galer Vodgals MELAYANG KESAMPING MAKSUDX MELAYANG GIMANA SOB...??

Int.Offscott mengatakan...

OMG..diatas page ada coding yang gak kebaca tuh!!!

Maen kesini yaa!!
www.int-offscott.co.cc

usaha sukses mengatakan...

chat box ane copot di blog, soalnya gak muat, templatenya sempit nih.. hee..

thanks sob udah berbagi..

Free Download Software Computer mengatakan...

Very Useful

Naxzapram Blog | Template by - Abdul Munir - 2008 - layout4all