Buku tamu ato kalo gw bilang lebih tepatnya chat box banyak di pake di blog. Fungsinya tentu buat ngemudahin pengunjung chat sama pengunjung laennya ato sama yang punya blog. Juga bisa buat absen pengunjung setia blog loe gan. Kalo buku tamu di pasang di sidebar bakal ngabisin tempat gan, jadi bagusnya loe pasang buku tamu melayang di blog.
Buku tamu melayang yang keliatan cuma tabnya doank jadi kalo di klik baru muncul chat boxnya gan. Loe ada niat pasang buku tamu melayang di blog gan? Kalo ada gw bakal share cara membuat buku tamu melayang di blog buat loe gan.
Silahkan langsung disimak gan, gak pake edit HTML tinggal nambahin widget di blog aja gampang banget.
Cara Membuat Buku Tamu Melayang Di Blog
- Yang pertama loe harus punya kode chat box gan, cara dapetinya gampang loe tinggal registrasi di situs yang nyediain chat box gratisan. Loe bisa daftar di chatWING ato CBOX gan. Kalo mau di situs laen juga boleh sesuai selera loe aja gan. Tapi gw rekomen di chatWING karena tampilannya keren, bisa login pake FB ato Twitter dan loadingnya super cepet gan.
- Kalo udah dapet kode chat boxnya, sekarang loe masuk Blogger terus pilih Layout dan klik Add a Gadget lalu tambahin HTML/Javascript. Lalu tinggal di copy kode di bawah ini gan dan pastein di kotak kosong HTML/Javascript tadi tapi jangan di save dulu gan.
<style
type="text/css">
#scgb{
position:fixed;
top:100px;
z-index:+1000;
}
* html
#scgb{position:relative;}
.scgbtab{
height:100px;
width:10px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUdp7gRtzop_KHiiRl1taLQg98nQWiVXqCV9AhJ1L5UnahxhcZBFA1hICGMbU7u9T11HGfOVaoW5JUOkNTti8ThAVMC2UToJuYKPugRa78KwW9yzlRxrKc_-hP0MbF9H5d_CYIzagC0YDF/s1600/chat+pink.png') no-repeat;
}
.scgbcontent{
float:left;
border:2px solid
#FF00CC;
background:#ffffff;
padding:10px;
}
</style>
<script
type="text/javascript">
function showHideGB(){
var scgb =
document.getElementById("scgb");
var w =
scgb.offsetWidth;
scgb.opened ? moveGB(0,
30-w) : moveGB(20-w, 0);
scgb.opened =
!scgb.opened;
}
function moveGB(x0, xf){
var scgb =
document.getElementById("scgb");
var dx = Math.abs(x0-xf)
> 10 ? 5 : 1;
var dir = xf>x0 ? 1 :
-1;
var x = x0 + dx * dir;
scgb.style.right =
x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+",
"+xf+")", 10);}
}
</script>
<div
id="scgb">
<div
class="scgbtab" onclick="showHideGB()"> </div>
<div
class="scgbcontent">
Paste Kode Chat Boxnya
Disini Gan
<div
style="text-align:right">
<a
href="http://seociyus.blogspot.com/2013/01/cara-membuat-buku-tamu-melayang-di-blog.html"
target="_blank">[get this widget]</a> <a
href="javascript:showHideGB()">
[Tutup]
</a>
</div>
</div>
</div>
<script
type="text/javascript">
var scgb =
document.getElementById("scgb");
scgb.style.right =
(30-scgb.offsetWidth).toString() + "px";
</script>
- Sekarang tinggal ngedit gan. Pertama pastein kode chat box loe di tempat yang udah ditentuin gan. Terus buat top:100px; itu buat ngatur posisinya, semakin gede nialinya semakin kebawah chat boxnya gan.
- Lalu buat background:url itu buat ganti tabnya gan silahkan diganti mau pake warna apa. Ni gw sediain banyak pilihan biar loe puas soalnya kebanyakan tutorial di blog laen pake tab warna hijau bosen ya gak gan.
2. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRwMq7kKs04OIGAPdbGMV2QzzKi8Nq_-3IhFANXhCx6pm_g7l7QKe9Ql7piU1ZE1sC1PxDGVnXUkoA8RE5vfiOzsQSajBDEA4WUaJ5ESk8mjRVLSJXwJMrrzpJ_DZEBy3e62rNN7XXVZKv/s1600/chat+kuning.png
3. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEikPubyT_pFVZjkp9rh9nk5p_R0sMY0Sdjh2HGwQC1GpkeEmYf05Ud-HEn7P_BykgCyYR4-HvBIFRZqgGEwCXITuxibUs-pdYx9z7udUm4NfU8cTECmxaIsAt-9h5Y96-yaf4ON61pSfq/s1600/chat+merah+muda.png
4. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib9BBfHa1mYIZrTfdt7n3EPq-4J3fnM4P-rKcFlMA2UiGuVV6dvtb_phBIWjb1wfwNIket1nwzem4Ce6vvUb0xo-LYVLX9OZbdNkJ26As1FgEjoklIFdZaF7lz5tD25oVTmGms2qyHzR6h/s1600/chat+orange.png
5. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUdp7gRtzop_KHiiRl1taLQg98nQWiVXqCV9AhJ1L5UnahxhcZBFA1hICGMbU7u9T11HGfOVaoW5JUOkNTti8ThAVMC2UToJuYKPugRa78KwW9yzlRxrKc_-hP0MbF9H5d_CYIzagC0YDF/s1600/chat+pink.png
6. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiCN6FdTPtiGCmZACQ0lRQjrOQ68eGHvZvu4CUpySnIoIi1y3jaWFo8Xf6p-iBU6CnNEz663xDzOBa2WUEJM0f_RxTyhinICt82PKnOt6cpQp9yEBFUDlqSh1ZmhH3BBQb3krT6Xx6ZmwR/s1600/chat+ungu.png
7. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqI00urhnuXjcuGHLeBKRy_PlFDGXlxr6Uv_lsGGVXl9bOobjAp5HM_vZfrz8E3F3OQcT4-LGI6Cal52-i8uqT-06ayE7aQD8L0lAUXSwTfo9JSi60hnEh5rAf3kPgMSRhx-ydMzpP4zCJ/s1600/chat+biru.png
Sekian dulu yang bisa gw share semoga bermanfaat buat loe yang mau pasang buku tamu melayang di blog. Jangan lupa juga absen dengan ninggalin komentar dibawah gan.
1. http://4.bp.blogspot.com/-8gN9mYWBNmc/UOuyweC6Z2I/AAAAAAAABYI/
TygRZ3SafbY/
s1600/buku+tamu+orange.png
2. http://1.bp.blogspot.com/-2pPjCWg1wJY/UOuyvT7XrBI/AAAAAAAABX8/
lbPHt2JK5fA/s1600/buku+tamu+kuning.png
3. http://2.bp.blogspot.com/-AehfZePXAE8/UOuyvelZw-I/AAAAAAAABYA/
b6TFxcLuS8A/s1600/buku+tamu+merah+muda.png
4. http://1.bp.blogspot.com/-lk2Pns5rHTw/UOuywIvEotI/AAAAAAAABYE/
shf75sfGdmo/s1600/buku+tamu+merah.png
5. http://1.bp.blogspot.com/-CzYp5uQeGkk/UOuywx1lAHI/AAAAAAAABYc/
o-rVl_bM9Sw/s1600/buku+tamu+ungu.png
6. http://3.bp.blogspot.com/-lFHx2PahMA0/UOuywSoVxWI/AAAAAAAABYM/
cYQ5S3qwRhk/s1600/buku+tamu+pink.png
7. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju_xX3ze2A_6aoHdTqwYwRp7rJRlgX8MaTvmWHMaCXuNdnJEcra1PJdQZoGNVwFrhbNtSHmIQNiS5MaDJJRHkyn3LYlvi_iVOXc8ZRGwxYIF0Iqk1Y3GWOFw0fMy3FKvL95CbWpg_Bo5t9/s1600/buku+tamu+biru.png
0 Response to "Cara membuat bukutamu melayang di blog"
Posting Komentar