Cara Membuat Buku Tamu Tersembunyi Di Samping Blog

Pada artikel sebelumnya saya pernah membuat tutorial membuat widget chatbox menggunakan cbox, nah disini saya ingin berbagi cara untuk mempercantik tampilan blogger/web Anda dengan memanfaatkan widget chatbox, yang membedakan tutorial ini dengan artikel sebelumnya adalah, cbox yang akan kita pasang pada blog terlihat tersembunyi di bagian samping kanan blog.

Mungkin diantara kalian ada yang pernah mengunjungi blogger tetangga yang memasang widget tersembunyi dibagian samping blog, entah itu disamping kanan maupun di samping kiri, tergantung mereka menempatkannya. Baca Juga: Cara Mudah Membuat Fans Page Show/Hiden Di Blog

Ok kita langsung ke topik, sebelum saya memulai membuat langkah-langkah membuat Buku tamu tersembunyi dibagian samping, sebaiknya Anda sudah mempersiapkan script cbox terlebih dahulu, jika Anda belum mempunyai script cbox sebaiknya buat terlebih dahulu di halaman cbox, jika belum tahu caranya bisa baca di artikel sebelumnya disini.

1. Login ke akun blogger Anda

2. Pada dasebor pilih Tata Letak

3. Kemudian Tambah gadget

4. Pilih HTML/JavaScript

5. Copy kode dibawah ini dan paste kedalam kota HTML/JavaScript

Klik untuk membuka
<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(‘http://2.bp.blogspot.com/-mrsZX_-WDkk/Te5tiGXpqNI/AAAAAAAAAZg/hDLjMWDN6_U/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”>
Silakan Pasang Kode Buku Tamu yang sudah di copy tadi Di Sini

<div style=”text-align:right”>
<a href=”http://giribig.com/2014/11/cara-membuat-buku-tamu-tersembunyi-di-samping-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: Kode yang diberi wara merah adalah kode cbox yang telah Anda buat, silahkan ganti kode tersebut dengan kode Cbox Anda.

Ok saya kira langkah diatas cukup mudah, namun jika masih ada pertanyaa, silahkan isi kotak komentar dibawah untuk mengajukan pertanyaan. Semoga artikel kali ini dapat bermanfaat. Baca juga: cara mengganti tampilan kursor mouse pada blog

Baca Juga Cara Membuat toko online dengan mudah | CARA DAN KUMPULAN KERAJINAN UNIK DAN KEREN

3 thoughts on “Cara Membuat Buku Tamu Tersembunyi Di Samping Blog

  1. halo mas…maaf ya…saya blm paham banget maksud kalimat ini. bisa kasih contoh ya?
    Kode yang diberi wara merah adalah kode cbox yang telah Anda buat, silahkan ganti kode tersebut dengan kode Cbox Anda.

Leave a Reply

Your email address will not be published. Required fields are marked *

Read previous post:
CARA MEMBUAT APLIKASI ANDROID UNTUK BLOG/WEBSITE

CARA MEMBUAT APLIKASI ANDROID UNTUK BLOG/WEBSITE-Android adalah sistem operasi berbasis linux...

Close