Cara Membuat Buku Tamu (Chatbox) Hidden

Fungsi Buku Tamu di blog sebenarya hanyalah sebagai pelengkap untuk melayani pengunjug blog sobat agar sesama pengunjung tersebut bisa saling berkomunikasi atau juga bisa meninggalkan pesan.
Tips ini juga sebenarnya sudah banyak yang share, tapi tidak salah jika saya share kembali disini dengan tujuan sekedar untuk berbagi. Tips ini sendiri saya dapatkan dari AzisCs1, terima kasih atas tips yang sudah dibagi tersebut.
Tips ini sudah saya coba dan ternyata berhasil, dan sobat bisa melihatnya di blog ini dengan gambar seperti disamping. Gambar tersebut adalah hasil dari utak-atik saya sendiri, dan ini juga bisa sobat terapkan sendiri di blognya. Caranya tidak susah, cukup sobat memahami sedikit pengetahuan tentang HTML maka sobat bisa mengutak-atiknya sesuka hati.. hehe.

Berikut script untuk membuat buku tamu yang bisa di hiddenkan disamping blog :

<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR7cMdPxzKvDcj4gx6hjOMbBXyj4Ili8yxVhONHrq-wnUKxoJwRiWBHNQLtMOx9gd84Qn-q-jWQ5pYbWF_8XJXmqwMgi2h55utB7hON63uuBeHxgLWjQ0gHHP1pl26i3Xc2LtMNopVg1xw/s1600/Tombol+Buku+tamu+keren.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
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">

<!-- Ganti ini dengan kode buku tamu sobat -->

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>


Silahkan diganti tulisan yang saya tandai diatas sesuai keinginan sobat

Keterangan :
Merah : isikan berapa besar ukuran gambar tombol yang ingin sobat pasang.
Tebal : Alamat URL gambar Sobat, ukuran gambar disesuaikan dengan ukuran tulisan merah tadi.
Biru Tebal : Ganti/Replace tulisan tersebut dengan kode javascript buku tamu yang telah sobat buat.

Tahap Pemasangan
  1. Login Ke Akun Blogger Sobat
  2. Pilih Rancangan - Elemen Laman, atau jika dalam blog sobat dalam bahasa inggris Layout - Page Elements.
  3. Tambah Gadget / Add a Gatget
  4. Copy - Paste Script diatas tadi.
  5. Simpan.
Tips diatas hanyalah cara membuat Buku Tamu Kita Bisa di Hiddenkan, jika sobat masih belum memiliki Buku Tamu atau bingung bagaimana cara membuat Buku Tamunya, silahkan Ikuti langkah Cara Membuat Buku Tamu Di Blog

    Keywords :
    Cara Membuat Buku Tamu Tersembunyi, Cara Membuat Chatbox Tersembunyi, How to create Hidden Chatbox, Create Chatbox, Cara Membuat Buku Tamu

    3 komentar: