gravatar

Cara Membuat Buku Tamu pada 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,Ayo kita mulai saja bahasan kita tentang cara pembuatan buku tamu pada blog.Silahkan sobat ikuti langkah-langkah berikut ini :

 Kita akan membuat buku tamu dengan gratis,mau?" ayo kita mulai
<>  Buka alamat http://www.shoutmix.com

<>  Setelah masuk ke halaman utama shoutmix,Klik Create Shoutbox

<>   setelah itu,Isi form yang telah disediakan.Lalu klik Continue

<>   Jika sobat sudah terdaftar,silahkan sobat login dengan id sobat.

<>   Setelah masuk ke akun sobat,klik style&colors.Pada menu style&colors sobat bisa mengganti warna dan style shoutbox sesuai keinginan sobat.

<>   Setelah selesai,klik back to settings 

<>   Copy kode html shoutbox sobat
<>  Silahkan sobat login ke akun blogger sobat

<>   Klik RANCANGAN

<>   Lalu klik Tambah Gadget
<>   Lalu pilih/klik Html/Javascript
 
<>   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 -->

          <>   Klik SIMPAN

<>  Selesai


Artikel Terkait by Categories



Widget by Uda3's Blog
Bagikan

**Create Link Effect**
Free Inuyasha ani Cursors at www.totallyfreecursors.com


JoSuä Fernändo (VÎrus-DètectÎońs)