Minggu, 08 Juli 2012

Cara Membuat Buku Tamu Melayang Di Sisi Kanan Blog


Panduan Blogspot kali ini akan membahas cara membuat buku tamu melayang di sisi kanan blog.Kemarin teman kita andreas kwan menanyakan kepada saya,mas buat buku tamu seperti blog mas caranya bagaimana?.Caranya cukup mudah,sobat hanya memerlukan sedikit tambahan script untuk buku tamu sobat.Bagi sobat sekalian yang belum mempunyai buku tamu,silahkan baca terlebih dahulu DISINI.Ayo kita mulai saja bahasan kita tentang cara membuat buku tamu melayang di sisi kanan blog.



SCREEN SHOOT 
 

cara pasangNYA 

1.Login ke akun blogger sobat
2.Klik menu RANCANGAN
3.Klik Tambah Gadget
4.Klik/pilh HTML/Javascript
5.Masukan kode berikut di kolom yang telah disediakan
 
<!-- right hidden chatbox by http://www.andreykusanagi.com/ START -->
<style>
#hcr {
position:fixed;
top:100px;
z-index:+1000;
}
* html #hcr {position:relative;}
.hcrtab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://b.imagehost.org/0611/buku-tamu.png') no-repeat;
}
.hcrcontent {
float:left;
border:2px solid #003e82;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcr(){
var hcr = document.getElementById("hcr");
var w = hcr.offsetWidth;
hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
hcr.opened = !hcr.opened;
}
function movehcr(x0, xf){
var hcr = document.getElementById("hcr");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcr.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}
}
</script>
<div id="hcr">
<div class="hcrtab" onclick="showHidehcr()"> </div>
<div class="hcrcontent">
masukan kode shoutbox/buku tamu sobat di sini
<br />
<div class="hc-credit">
<span style="float:left">

</span>
</div>
</div>
</div>
<script type="text/javascript">
var hcr = document.getElementById("hcr");
hcr.style.right = (30-hcr.offsetWidth).toString() + "px";
</script>
<!-- right hidden chatbox by http://www.andreykusanagi.com/ END -->

dan yang berwarna merah bisa diganti gambar apa yang kamu inginkan
 
 6.Klik SIMPAN


Tidak ada komentar:

Poskan Komentar