Kamis, 01 Desember 2011

Cara Membuat Buku tamu Melayang di blog

Meneruskan postingan yang sebelumnya yaitu tentang cara memasang shoutmix di blog, pada kesempatan kali ini saya akan share kepada temen-temen tentang Cara Membuat Buku tamu Melayang di blog.

Mungkin temen-temen pernah lihat pada sebuah blog/web ada buku tamu yang melayang, melayang disini maksudnya buku tamu berada di sisi kanan atau kiri blog dan bisa ditutup dibuka..
sebagai contoh pada blog saya ada buku tamu di sebelah kanan blog.

buku tamu temen-temen pun bisa dibuat seperti itu. Caranya seperti di bawah ini :

1. Temen-temen login ke blogger temen-temen

2. kemudian Pilih Rancangan > Elemen laman



3. Tambah gadget, Pilih HTML/Javascript

4. Copy kan kode dibawah

<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">

<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="m4n0" src="http://www6.shoutmix.com/?m4n0" width="160" height="400" frameborder="0" scrolling="auto">
<a href="http://www6.shoutmix.com/?m4n0">View shoutbox</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />
<!-- End ShoutMix -->
<br/>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

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

5. Paste kan di halaman gadget baru yang temen-temen baru tambahkan

6. simpan dan lihat hasilnya...



***
kode yang berwarna merah diganti dengan kode yang anda dapat dari pembuatan shoutmix tadi...

bagi yang belum tahu cara pembuatan shoutmix klik saja disini

baca juga artikel yang lain..

semoga bermanfaat...

Artikel Terkait:

3 komentar: