Membuat Guest Book Sesuai Selera

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

Previous
Next Post »

30 comments

  1. blog saya gak tau kenapa gak bisa lagi ditempelin html bang..gak mau dia :) jadinya saya ngumpul dulu tips trik dari sobat blogger :)
    ijin copas ya, ntar masuk ke folder trik blog di laptop saya :)
    makasih sudah berbagi

    ReplyDelete
  2. Apa dulu udah pernah di save belum bang templatenya... kalo udah ya di upload aja bang... hehehe... copas aja bang. blog seharusnya bebas copas biar pada pinter sama2... :)

    ReplyDelete
  3. Ketigax sob.. hahai :D
    Mantab nhe tutorialnya :)
    Absen malam sob dan izin praktek

    ReplyDelete
  4. wah mantap sob, dengan buku tamu di hias dengan tampilan yang menawan semoga bisa merangsang pengunjung tuk sering2 nulis di buku tamu, ahahhahhayyyy

    ReplyDelete
  5. hmmm... bang Black en bang Pattah kan jagonya tuh... hehehe

    ReplyDelete
  6. waahhh bagus nih buat di gunakan di blog kita,, mudah di sesuaikan dengan kemauan kita sendiri... nice Post :)

    ReplyDelete
  7. BangCyberbanua@ iya bang...contoh diatas bisa dimodif macem2 tinggal utak dan atik aja...hehehe...kalo punya ane yg simple aja deh... :)

    ReplyDelete
  8. asek tutornya nih, saya sih make yang langsung di sidebar aja kang farhan hehe skalian absen pagi

    ReplyDelete
  9. wah mantep ni om sharenya,
    lain waktu bisa juga ni di coba, happy blogging yach

    ReplyDelete
  10. tenkyuuu bang imam en bang sahidu... ntar tak mampir ya...hahayyy

    ReplyDelete
  11. Terima kasih sobat..perlu dicoba nih tipsnya.
    Salam kenal sobat

    ReplyDelete
  12. Pena hadir dan absen sore sambil menyimak tips serta turorialnya ini..
    Thanks sharenya sob

    ReplyDelete
  13. MAMPIR DI SINI KANG HEHE NUGGU POSTINGAN BARU NIH

    ReplyDelete
  14. Kunjungan silaturahmi saudaraku dan mendapatkan ilmu baru di sini

    ReplyDelete
  15. terima kasih bang abu atas kunjungan silaturrahim-nya...semoga tambah berkah

    ReplyDelete
  16. Guest book yang menarik bikin pengunjung selalu ingin datang ke blog dan mengisi guest book nya ...hehehe

    ReplyDelete
  17. makasih banyak ning sweethy.... q jg suka gaya guest book-nya ning sweet... keren jarang ada lo yg gtu...hmmmm

    ReplyDelete
  18. Tadinya punya saya pakai yg model sliding begini, tapi gak tahu di template saya ikutan ngeloading saat buka halaman baru, jadinya saya taruh di subpage aja. sekalian bisa nempelin macem² nanti hehehe :D

    ReplyDelete
  19. mantep ne...tanks ilmu nya kang...

    ReplyDelete
  20. This comment has been removed by the author.

    ReplyDelete
  21. pertamaX agan, thx sudah di share ilmunya.

    ReplyDelete
  22. Daripada gak ada yg dikomen, saya nampang disini aja ah...
    Ini khusus utk chatbox melayang ya kang? Bisakah dimasukkan di page guestbook? Karena kalau melayang, takutnya membebani loading

    ReplyDelete
    Replies
    1. hehehe...emang membebeni mas... script diatas tak pake dulu pas masih di home page...sekarang gak tak pake lagi...hehehe...
      bisa aja lho mas di page static, scriptnya bukan yg diatas mas ... belom nyoba ki piye...ehehehe

      Delete
  23. sangat bermanfaat master, ijin save ya, suces sejahtera untukmu

    ReplyDelete
  24. mantep kang Buku Tamunya, tetep ngeberatin ga loadnya?

    ReplyDelete

Partner Site