Senin, 24 Oktober 2011

Cara bikin Guest Book Melayang...

                    na... na... na... hari ini temen gue ada yang tanya gimana cara bikin buku tamu ato guest book ato shoutmix ato apalah yang kalian sebut itu melayang (kayak gambar dibawah ini).





soooo... to the point ajahhh....

 This is the steps :

1. Sign Up ke www.shoutmix.com atao www.shoutbox.widget.com ato cari di SE dengan kata kunci shoutbox. nanti bakal muncul sederet layanan shout box. Tapi dalam contoh kali ini aku pake shoutmix.





2. Setelah sign up trus login. di halaman utama akan ada kotak yang menyediakan embed codes dari kotak chat kamu. kemudian copy aja data yang ada di kotak embed kode itu.  tapi sebelum di kopi kan, kalian bisa experimen dengan ukuran dan juga warna kotak chat yang akan kalian tampilkan.





3. Buka blog kalian. kemudian klik di bagian design. Secara otomatis page itu akan langsung menuju ke bagian page element. klik atau pilih Add gadget atau dalam indo jadi tambah elemen.


4. Copas kode di bawah ini ke dalam kotak Content


<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://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.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">


Copas embed codes shoutmix kalian disini...


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


</div>


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




5. Klik Save...


Jadi deh Shoutbox melayang-nya... :D
Selamat mencoba...
Kalo ada kritik, saran atu komplain silahkan komeng di bawah postingan ini atau tingalin pesan di kotak chat aku.... 

SALAM BLOGGER.... !!!!!

Tidak ada komentar:

Poskan Komentar