Cara Membuat Buku Tamu Melayang Tersembunyi Di Sisi Blog

Cara Membuat Buku Tamu Melayang Tersembunyi Di Sisi Blog - Sobat... Tutorial kali ini sangat menarik sekali. Karena banyak sekali para Blogger yang memasang buku tamu melayang di sisi blog. Kemungkinan besar, sobat yang belum memasang buku tamu melayang terembunyi di blog akan tertarik untuk memasang buku tamu nya. Apa bener? Saya sangat yakin sobat baca tutorial ini karna sobat ingin masang buku tamu di sisi kanan blog kan?

Sebelum saya akan jelasin tutorial Cara Membuat Buku Tamu Melayang Keren Di Sisi Kanan Blog saya akan jelasin dulu. Mungkin sobat yang baca tutorial ini masih banyak yang gak tau. Buku Tamu sering dipasang oleh kebanyakan Blogger. Tujuan memasang buku tamu melayang di blog adalah agar si pengujung dapat berkomunikasi dengan sobat yang sudah membuat buku tamu melayang di sisi kanan blog.

Ketika sobat memasang widget buku tamu melayang tersembunyi di blog, pengunjung akan diberi kemudahan untuk berkomunikasi dengan sobat. Mungkin, pengunjung sobat ingin promo, atau tanya. Bisa langsung berkomunikasi di buku tamu yang sudah sobat pasang.

Buku Tamu ini, tanpa mengharuskan pengunjung untuk log in Blogger, fb, atau jejaring sosial yang lain. Jika pengunjung ingin berkomunikasi dengan sobat, pengunjung cukup masukkan nama, email/url, dan juga pesan. Masukkan nama, bertujuan agar sobat mudah mengetahui nama pengunjung sobat yang mengirim pesan. Email/url bertujuan agar sobat dapat membalas pesan tersbut di blog pengunjung sobat yang mengirim pesan ataupun di email pengunjung sobat yang mengirim pesan. Pesan bertujuan untuk mengirim pesan ke sobat.

Sekarang, saya anggap sobat sudah ngerti maksud dari tutorial ini. Sekarang saya akan bei tutorial nya.

1. Silahkan klik http://www.cbox.ws/

2. Masuk ke akun Cbox. Jika sobat belum punya akun tersbut, sobat bisa klik sign up.

3. Disini, saya anggap sobat sudah punya akun Cbox dan sudah login / masuk ke akun Cbox

4. Klik Look & Feel --> Colours & Fonts

5. Disini, sobat bisa mengkreasikan widget buku tamu melayang dengan keinginan sobat.

6. Setelah warna buku tamu nya sudah di atur warna nya sesuai dengan keinginan sobat, klik Apply

7. Klik Pusblish

8. Copy kode buku tamu tersebut dengan cara klik Copy to clipboard

Cara menaruh kode buku tamu tersebut dengan cara:

1. Login Blogger

2. Klik Tata letak/layout

3. Add gadget/tambahkan gadget

4. HTML/JavaScript

5. Copy kode dibawah ini kemudian paste kan kode dibawah ini pada kolom 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/AVvXsEiIv7pWTMGUbc0YKdMnfJMVNictvJsMLZgSzlIHZPJ1uzJyKUx1YJ18qheoqmcBcMmJC_GbrNNoBF25FQ_no37AWQdZq2N4-l1inZ8OElh8kIXjWg4pydwilwWkKd3MrSswxNbbD_XdrqI/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">

PASANG KODE BUKU TAMU YANG SUDAH DI COPY TADI

<div style="text-align:right">
<a href="http://abelavriyanno.blogspot.com/2012/04/cara-membuat-buku-tamu-melayang-di-sisi.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>

6. Simpan perubahan

*Paste kan kode buku tamu di Cbox yang sudah di copy tadi pada tulisan PASANG KODE BUKU TAMU YANG SUDAH DI COPY TADI

Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆ⌣ˆ

Tutorial Blogger