Tuesday, May 3, 2011

Memasang Buku Tamu Tersembunyi di Sisi Blog

Untuk memudahkan pengunjung meninggalkan pesan singkat di blog, anda dapat menggunakan buku tamu. Banyak situs yang menyeiakan layanan pembuatan buku tamu, seperti di shoutmix, shoutcamp, dan oggix. Buku tamu merupakan salah satu sarana untuk berinteraksi antara pemilik blog dengan para pengunjung blog dalam rangka mempererat tali silahturrahim. Bila blog anda belum di pasang buku tamu, silanhkan baca Cara Membuat Buku Tamu (Shoutbox) Di Blog.

Masalah yang mungkin muncul adalah bahwa anda kesulitan memasang buku tamu di sidebar (biasanya buku tamu di pasang di sidebar) blog. Ini tergantung template yang anda gunakan. untuk mengatasinya atau menghemat tempat, anda dapat memasang buku tamu tersembunyi. Walaupun namanya buku tamu tersembunyi, bukan berarti form buku tamu tersebut tidak dapat dilihat, akan tetapi tetap terlihat namun hanya sebagian saja, yaitu berupa tombol yang terdapat di sisi halaman blog. Dengan cara mengklik tombol, kotak dialog buku tamu akan terbuka. Begitu juga untuk menutupnya dengan cara mengklik tombol tersebut. Jadi sistemnya mirip dengan tombol hide-show.

Untuk memasang buku tamu tersembunyi di blog, ikuti langkah-langkah berikut!

  • Silahkan Login di Blogger 
  • Masukkan ID dan Password anda.
  • Pada Dasbor klik Rancangan
  • Pada Elemen Laman klik Tambah Gadget
  • Pada Tambahkan Gadget Pilih HTML/JavaScript
  • Isi Judul yang anda suka atau di kosongkan saja
  • Pada Konten isi dengan kode HTML di bawah ini:
<style type="text/css">
#gb{
position:fixed;
top:100px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://lh5.googleusercontent.com/_A9Nk3CE9KcY/Tb-05vCbwUI/AAAAAAAAAUc/F2qssrYMjcs/s128/BT.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:2px;
}
</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">

(---Masukkan di sini script kode buku tamu anda---)

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

  • Klik tombol Simpan
  • Tarik Gadget tersebut di tempat yang anda inginkan
  • Klik tombol Simpan lagi untuk memastikan anda telah menambahkan Gadget baru di blog
  • Selesai, lihat hasilnya.

Keterangan:

  • Anda dapat menentukan posisi buku tamu ini (di sisi kiri atau kanan) laman blog dengan mengubah kode float:left;, dengan float:right;. Atau mengubah nilai atribut top-nya (top:100px; dengan).
  • Pada (---Masukkan di sini script kode buku tamu anda---) ganti dengan kode buku tamu anda. Jika blog anda belum memiliki buku tamu, silahkan buat dulu. Baca Cara Membuat Buku Tamu (Shoutbox) Di Blog.

Demikianlah cara Memasang Buku Tamu Tersembunyi di Sisi Blog. Selamat mencoba.
Ping your blog, website, or RSS feed for Free
Feedage Grade C rated
Preview on Feedage: nail-art-polish-2012 Add to My Yahoo! Add to Google! Add to AOL! Add to MSN
Subscribe in NewsGator Online Add to Netvibes Subscribe in Pakeflakes Subscribe in Bloglines Add to Alesti RSS Reader
Add to Feedage.com Groups Add to Windows Live iPing-it Add to Feedage RSS Alerts Add To Fwicki