Translate this page from Indonesian to the following language!
English French German Spain Italian Dutch Russian Portuguese Japanese Korean Chinese Simplified Arabic

Sunday, December 27, 2009

Membuat Buku Tamu di Blogger

Ada teman sekelas saya yang bernama Fier menanyakan kepada saya mengenai Buku Tamu yang terdapat di blog saya ini. Maka dari itu, saya mencoba untuk membuat artikel mengenai pembuatan buku tamu ini. Sebenarnya saya mendapat inspirasi untuk membuat buku tamu ini dari blog milik kang Eri. Di blog milik kang Eri ini terdapat sebuah bacaan buku tamu yang letaknya di pojok kanan atas blognya. Jika kita klik tulisan buku tamu tersebut, dengan otomatis akan keluar kotak ShoutMix untuk memberikan komentar-komentar pada blog tersebut. Jika di blog anda belum terdapat ShoutMix, silahkan daftar terlebih dahulu. Silahkan anda klik disini untuk mendaftar dan mendapatkan kode HTML ShoutMix untuk blog anda. Untuk lebih jelasnya, lihat gambar di bawah ini.


 

Setelah anda membuat ShoutMix sendiri untuk blog anda, silahkan anda copy kode di bawah ini untuk membuat tampilan Buku Tamu seperti gambar diatas.

<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://img22.imageshack.us/img22/8941/tabs2.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid
#9d0a0f;
background:
#9d0a0f;
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 scrolling="auto" width="210" frameborder="0" src="
http://www4.shoutmix.com/?aew_toy" height="450" title="aew_toy">
<a href="
http://www4.shoutmix.com/?aew_toy">View shoutbox</a>
</iframe>
<br/>

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


Catatan :
- Kode yang diberi warna
Kuning merupakan letak Buku Tamu.
- Kode yang diberi warna
Merah bisa diganti sesuai keinginan anda.
- Kode yang diberi warna
Hijau anda ganti dengan ID ShoutMix Anda.

Jika ada kesalahan dalam memasukkan / mengganti kode HTML, silahkan anda memberi komentar untuk artikel ini.

Selamat mencoba.
=)