Pages

Kamis, 02 September 2010

Cara Membuat CBox atau Buku Tamu di Samping

 Assalamu Alaikum wr.wb. sobat bloger jumpa lagi bersama saya tentunya di dunia para bloger ... kali ini saya ingin berbagi pengetahuan kepada sobat-sobat sekalian tentang gimana sich cara memasang CBox atau populernya disebut Buku Tamu tepatnya di posisi samping blog yang kita punya...soalnya kebanyakan blog yang kita jumpai umumnya CBoxnya berada di area widget....daripada penasaran lebih Kita langsung saja ke TKP ......

  1. Pertama sobat login dulu ke Akun Blogger sobat.
  2. Kemuadian ke Rancangan, tambah Gadget, HTML/Java Script dan copy paste kode di bawah ini:



<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivBtYRNGwoh0a5DCQRpBLSlgUHVlsiNAzBa-pa1GpryrxUqqsXXW-QemkwJlE7X2AdwHpUlJ_0Q9P-XR9b_FKxZhcJf5zv3-iwbOcT37MJs1uHExQUU6EfnhMedlqtHdS-OnuzYt_pN1Rm/') 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">
<!-- Ganti ini dengan kode buku tamu kamu --> br/>
<br/>
<a href="http://forantum.blogspot.com">.
</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>


Catatan :

  1. Ganti kode ini <!-- Ganti Kode ini dengan kode ChatBox sobat --> br/> dengan kode ChatBox sobat, yang sobat dapatkan dari situs terkait.
  2. Sobat juga bisa mengatur posisinya, tinggal mengganti Top-nya sesuai dengan keinginan sobat.

5 komentar:

  1. ok gan tapi ku mau ngasi masukan tolong dijelasin lagi secara rinci agar sobat2 yg lain bisa mengerti untung aq anak SMK jadi bisa ngerti ALHAMDULILLAH...

    BalasHapus

Terima Kasih telah meninggalkan komentar di blog ini...