Cara Membuat Buku Tamu / Chat Box Menembel di Sisi Pinggir Blog

Berikut ini saya akan memberikan Tutorial Cara Membuat Buku Tamu / Chat Box Menembel di Sisi Pinggir Blog. dengan membuat buku tamu menempel di sisi sebelah pinggir kanan atau kiri blog maka akan terlihat lebih dinamis dan elegan. Simak cara berikut ini:

1. Masuk ke Blogger pilih Tata Letak
2. Add Gadget/Tambahkan Gadget - HTML/JavaScript
3. Kemudian Copy Kode dibawah ini dan masukkan di HTML/JavaScipt - Simpan !

<style type="text/css">

#gb{

position:fixed;

top:23px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:100px;

width:30px;

float:right;

cursor:pointer;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGbdPWaDUXSMVRLNiGI6TezWEeja2iY1UYEULAxijDsoLXKKNSjSOLotqyCFhvLO72cHz8QzxpVMsfW8LkWVqK0jcW9c4GqfVmTpNQ3cZGy5XEHWsbBpxhxfx0aIoSRdc10IiwBXeDYTsd/') no-repeat;

}

.gbcontent{

float:right;

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.left = 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 Kode Script Chat Box / Shout Box Kamu Disini !

<div style="text-align:left">

<a href="javascript:showHideGB()">

[Close]

</a>

</div>

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.left = (30-gb.offsetWidth).toString() + "px";

</script>

Catatan : Kalau Sobat Mazinu belum punya Kode Script ChatBox kalian bisa buat/daftar cbox DISINI ! (klik)

Dan hasilnya seperti ini

Sekian Tutorial Cara Membuat Buku Tamu / Chat Box Menembel di Sisi Pinggir Blog dari Mazinu semoga bermanfaat!

Title : Cara Membuat Buku Tamu / Chat Box Menembel di Sisi Pinggir Blog
Description : Berikut ini saya akan memberikan Tutorial Cara Membuat Buku Tamu / Chat Box Menembel di Sisi Pinggir Blog. dengan membuat buku tamu mene...

Postingan Populer

Cara Membuat Buku Tamu / Chat Box Menembel di Sisi Pinggir Blog