Kali ini saya akan share cara Membuat Buku tamu yang ada di samping kanan blog..Menggunakan chat Box yang bisa muncul dan menghilang (wah...ribet bilangnya...^_^ yang jelas kayak yg ada di blog saya ini..)
Banyak situs yang menyediakan layanan Chat Box Misalnya Shoutmix, chatbox, cbox, oggix, shoutcamp dan masih banyak lagi yang lainnya..tinggal pilh sesuai selera..
langkah-langkahnya :
#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/AVvXsEgaKH6TU0dMeMdWl1xPaDG9XKKgeJoUBLHHtQJk1or61oC3f8h-zhpVA4yYw1ZJ0RAlic9EoafYurEG3vFMK4-tB6brML_N8CVog5s0s9QXnJRZSz3n4JlPTX7y5XqPXiXRxZYzxUdPVZE9/') 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 CHAT BOX SOBAT -->
<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>
<!-- GANTI INI DENGAN KODE CHAT BOX SOBAT -->
gantilah dengan kode script ShoutMix atau ChatBox milik Sobat.
Banyak situs yang menyediakan layanan Chat Box Misalnya Shoutmix, chatbox, cbox, oggix, shoutcamp dan masih banyak lagi yang lainnya..tinggal pilh sesuai selera..
langkah-langkahnya :
- Login ke blog sobat
- Pilih Tata letak
- Tambah Widget (Pilih Widget HTML/JAVASCRIPT)
- Copy code di bawah ini ke dalam Widget :
#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/AVvXsEgaKH6TU0dMeMdWl1xPaDG9XKKgeJoUBLHHtQJk1or61oC3f8h-zhpVA4yYw1ZJ0RAlic9EoafYurEG3vFMK4-tB6brML_N8CVog5s0s9QXnJRZSz3n4JlPTX7y5XqPXiXRxZYzxUdPVZE9/') 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 CHAT BOX SOBAT -->
<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>
<!-- GANTI INI DENGAN KODE CHAT BOX SOBAT -->
gantilah dengan kode script ShoutMix atau ChatBox milik Sobat.

Baca juga yang di bawah ini ya,,
Sahabat Bloger
- code Membuat Link berupa tombol/ atau form button
- Cara Bikin Radio Onlaine Di Blog
- Cara Membuat Link Otomatis Saat Artikel Kita Di Copy Paste Orang Lain
- Cara Pasang Banner di Blog
- Pasang Iklan Murah Meriah
- foto banner iklan
- cara pasang iklan di blog
- Cara membuat jam online di blog
- Cara bikin meteor di blog
- Efek Cursor Diikuti Bintang Warna-Warni
- cara masang musik di blog
- cara bikin mp3 sendiri di blog dengan otomatis
Tidak ada komentar :
"Silahkan Berkomentar"
Setelah membaca jangan lupa berkomentar untuk mnghargai penulis..