Cara Membuat Buku Tamu Tersembunyi di Sisi Blog

Unknown

Tutorial Blogging, Widget

25 Mar 2013

13 Komentar

Cara Membuat Buku Tamu Tersembunyi di Sisi Blog - Cara Membuat Buku Tamu di Blog atau Cara Membuat Guestbook di Blog atau Cara Membuat Buku Tamu Melayang di Sisi Kanan Blog atau Cara Memasang Buku Tamu Melayang Di Sisi Kanan Blog.

Halo sobat Hilbram semua.. Pada kesempatan kali ini, saya akan share kembali tutorial Blogger yang banyak di minati, yaitu Memasang Buku Tamu/Guestbook di Blog. Buku tamu berfungsi sebagai cara lain untuk visitor berkomentar dalam suatu blog dalam cara yang instan dan mudah. Kita akan di mudahkan untuk berkomunikasi atau berintraksi dengan visitor dengan mudah melalui buku tamu ini. Bagi kamu yang berminat untuk mencoba widget buku tamu ini, yuk mari kita simak...

1. Kamu pergi dulu ke Cbox
2. Daftar disana atau bisa klik disini, setelah berhasil daftar, login ke Cbox dengan akun kamu tadi
3. Setelah itu, kamu isikan data-data yang di perlukan, dan copy kode HTML buku tamunya..
4. Langkah selanjutnya, masuk ke akun Blogger kamu
5. Pilih Tata Letak > Tambah Gadet > HTML/JavaScript.
6. Copy kode berikut, dan pastekan di box HTML/JavaScript.

<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/AVvXsEj6iWMrk8ZVR6u1Vr5teqE6cHKsqB_941iaauEN9HNV76S70DiFRKgr_7TEZySKWZfnGnSU1u4KaLF3l5E2sijl0yJGFIYu8JfBRldGsK8N1NO7kyS-g6MqiPVlCBVjsRrlEzuoUKk5VY4/s1600/bukutamu.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">
Kode Cbox kamu disini
<div style="text-align:right">
<a href="http://hilbramkurnia3.blogspot.com/2013/03/cara-membuat-buku-tamu-tersembunyi-di-sisi-blog.html">.:get this widget:.</a>><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></div></div>

*Keterangan: Ganti kode yang berwarna merah, dengan kode HTML Cbox yang sudah kamu dapat di langkah no. 3

7. Setelah selesai, klik Simpan....

Dalam kode script diatas kamu bisa ubah dengan sesuai selera kamu sendiri dan tunjukan kreasimu.. Sekian postingan kita pada hari ini, semoga bisa membantu dan jika ada kekurangan kami mohon maaf. Semoga Bermanfat.......