Home » » Membuat Guest Book Sesuai Selera

Membuat Guest Book Sesuai Selera

Baca Juga

Show time... saatnya posting lagi,  mungkin kali ini postingan saya sedikit jadul kali ya ( tergantung yang baca sih..hahaha ). di sana-sini udah banyak bertebaran cara-cara membuat guest book alias buku tamu mulai dari berbagai bentuk cara tampilan buku tamu disajikan. eitsss... jangan kabur dulu lho ya sebelum membaca kelanjutannya :).
Yang ingin saya sampaikan disini adalah mulai cara membuat buku tamu sampai modifikasi tampilan di dalam kotak buku tamu itu sendiri. kadang ada sobat yang bingung untuk menambah tanda pengenal berupa banner ataupun background kotak guest-nya tersebut. umpamanya seperti punya saya yang di bagian kotak bawah guest ada banner-nya ruangsharing.com seperti tampak dalam gambar di bawah ini.
 Nah pada penampakan diatas mungkin sebagian sobat blogger ada yang bingung menempel atau mengedit kotak sesuai dengan selera sobat. sekarang mau saya tunjukkan sedikit trik semoga dapat memberi pencerahan pada sobat yang masih newbie seperti saya... praktek yuk !

Berikut tahapan mulai dari order widget buku tamu sampai opreknya :) :
  • 1. silahkan login ke akun blog sobat
  • 2. setelah itu masuk pada tab tata letak dan pilih widget baru
  • 3. pilih opsi new html
  • 4. copy paste script di bawah ini :

<style type="text/css">
#gb{
position:fixed;
top:25px;
z-index:+1000;
}* html #gb{position:relative;}
.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://i39.tinypic.com/2zog96d.png') no-repeat;
}
.gbcontent {
float:left;
border:1px solid #BB0000;
-moz-border-radius-bottomleft:10px;
-webkit-border-radius-bottomleft:10px;
-o-border-radius-bottomleft:10px;
-khtml-border-radius-bottomleft:10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
background: #000000 url(http://i39.tinypic.com/npguiq.gif) no-repeat bottom;

padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);

gb.opened = !gb.opened;

}function moveGB(x0, xf){

var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}

}</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<center>
GANTI DENGAN SCRIPT BUKU TAMU SOBAT
<br />
<div style="text-align:center">

<a onclick="showHideGB()" class="tips-fade" title="klik untuk tutup chattingbox">
</a>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>
  • 5. nah sekarang yang perlu di perbaharui adalah coba tengok tulisan yang berwarna merah, ganti dengan script buku tamu sobat.
  • 6. untuk tulisan yang berwarna biru adalah setelan letak dan penempatan di bilah kiri atau kanan, semakin kecil nilai px-nya maka semakin ke atas tempatnya, dan bila ingin di sebelah kanan/kiri maka ubah opsi left/ right-nya.
  • 7. untuk yang berwarna hijau itulah background buku tamu sobat yang bisa diubah-ubah sesuai selera. gunakan editing gambar bisa pothoshop atau apapun yang penting bisa untuk edit gambar. sobat bisa meletakkan banner atau apapun dalam background tersebut. simpanlah gambar di web server penyimpan gambar seperti Tinnypic.com atau terserah agan. kemudian tempelkan alamat url ke tulisan yang berwarna hijau.
  • 8. jangan lupa save pengaturan dan preview deh.....
  • 9. bila penempatan kurang cocok maka ulangi pengedit-an

Yang perlu diperhatikan adalah belajar sabar aja...hehehe... belajar dari kesalahan dalam utak-atik widget akan mengasah kemampuan sobat jadi lebih okey. sampai disini dulu ya sobat postingan yang pendek ini, semoga dapat mengobati sedikit rasa penasaran bagi yang belum bisa membuat buku tamu, dan bagi yang udah ahli jangan marah lo ya kalo postingan ini-ini melulu....hahayyyy