Cara Membuat Buku Tamu Melayang Di Blog

Kali ini saya akan post cara membuat buku tamu di blog...Langsung Ke TKP





Buku tamu pasti sudah banyak orang yang makai di blog,karena banyak fungsinya,.. salah satunya adalah untuk memudahkan pengunjung chat sama yang punya blog atau pengunjung yang lain...bukan hanya itu dengan buku tamu melayang ini kalian juga bisa menghemat tempat di blog..ya udh langsung aja deh ke cara-caranya.

Langkah-Langkah:

1. Yang pertama kalian harus punya kode chat boxnya,kalo belum punya klik chat box atau bisa juga ke sini ChatWing.Kalian bisa milih mau yang mana...
2. Kalo udh dapat kode chat boxnya,kalian harus login ke blogger kalian ->Pilih Tata Letak-> Pilih Tambah gadget->Pilih HTML/Javascript
3. Copas kode di bawah ini:

<style type="text/css"> #gb{ position:fixed; top:50px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:150px; width:30px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH68DKbdM_KNxdMCvgA_82V8Tja5aZ_-X3lFAB2dDkkr7mw295O2qWP7eGl0AwYDM_mCl3R0hcdDgGNkjyiaC1v1P8UWP053yG2SYdEbKKZhS8cq9ltEaPm4H4qV2_0vlsaz7SIbAN5Dce/s1600/buku+tamu.png') no-repeat; } .gbcontent{ float:left; border:1px solid #B3B3B3; background:#E6E6E6; padding:5px; } </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">  

Paste kode kalian disini 

<br/>Mau buat buku tamu ini ?<br/>Klik <a href="http://multiindoblog.blogspot.com/2013/01/cara-membuat-buku-tamu-melayang-di-blog.html"target="_blank"> di sini </a> <div style="text-align:right"> <a href="javascript:showHideGB()"> [hide] </a> </div> </div> </div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script>

   4.Ganti kode yang warna merah dengan kode chat kalian

   5.Save..

Kalian juga bisa mengganti kode yang warna biru dengan kode berikut ini:

1. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7I0RCp9-9EbXRFMtbrzTCmy4zFXeGihyphenhyphen8EgZM24xSJ4y5-L8A4FO4m3hMeyPd8-JMpWPACCYNWyHwBCwHsecUSni6n9nWQcWD-dwFA_S_NmJQuuME-DAYC3PgYWpAofCH1TSK_hsH7WRL/s1600/chat+merah.png 
2. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCYlBXsK5hhastTSkJvYvJmQ6OL4NqstRbdKebUNZE3qoJZ6HEZeL5xvVzZ9ahvBGqHDwKfbWK_Ng-GWdzBtschXJ0RSz-BM0VGKlugJ5L56F2c-x1DEcgcAU-U8s42WWiQ5TCG3k1E2q3/s1600/chat+kuning.png  
3. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMbuMycdgTkZeZZ9gLLB7CUSgrza_JHvq6sgtGRg-ECLz3wpOzRMFpbM03HNtnaRxbyhfJmoA0kPr9vct9Cket9gzNVVJ18MDtm_KqInIqTVMUZzQkzes4C4_9vm2pGHFi1XAvMXJjy1B0/s1600/chat+merah+muda.png 
4. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVV3XaRVVEUGQtM-0D4NSOaPHCA0MwyitczxTBVSUm2pJXyaYwJ9SC2VLv161RHkCmnbii9r9zhexQp2ZDbpFDEbVs9msPUI2Mr3BXLnklS2pC4UzeGom_ceZnupxOdSwYgBXH7UKnls6R/s1600/chat+orange.png 
5. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIAXBH8k8EQtEKpQeUMNdbWS4nX6P1amiB2OwlQsEcuK8RPk8yS9WU39YAM0WR5_DcD-PfMoXCyu-_7Lw4BJx_RUXrYCHd4bMfUgSukPCM-Zg1Oz9m8-b8zuh0T_Ztu7gnskjfgBPWaV_E/s1600/chat+pink.png 
6. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXeX6n2dZ6N5JXZPdIZHH44Ok5ySIp5zE1uZ_oWW32eY8CR_b4z8y86mnpuhSgaMT9P1wWY_fhDDRRwNQ9wQOA5NPAcGH0glChHFCWhGrm6Oy4orD0Lz85A1NauX6CpbBeQOs6bweF-t2M/s1600/chat+ungu.png  
7. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibbPqlfAa14VK48JrXSwxuWfCEzyN6Zm364y6p-kJRnBGYlUWTKrwnB5SYFHutbW22xu4dAFHAwz_r1hKyzs9BaSHGExyNCvj1e_zNdAbsPVpjkkfdk2kiP5_JiRNMeTGn5VXTmcqB-vJ9/s1600/chat+biru.png

1. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidA4dg8omyuFSh2ZUNrexg7Las9FhHSC44Cg11w-nkTdTQrs3NFUia4O7hrq0cmv2KhUOi3Ppb5S0VILUmdi4V6302wB-u2NAyG4JeV0Wzot4h-NDcK7lQni89dv1NlCjRZG-D7Ubf2a6d/s1600/buku+tamu+orange.png
2. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifu1JV_MeTivFh-5031Osu9TiI1zg5RArCPeU1fuuK4D1dYX2BVlTSgAAaZ2dsFQeDkce58SV8dnWjHDc7L6dilbngnq7fMGUwHpB2vIRB0W0AT3KnEc4O8czlABiSMOGiXVmb-hZ2EH2M/s1600/buku+tamu+kuning.png
3. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigWsjOae27UN59q_tNpAvRtUXNSosGZlsluILlecUnStswq3j_brM38kQeLlIjkkk1ZafLSaMFBGg3V5WhqEPVA_wh_XDH6Wt7SDAfxlXMwskv_3ITQhIJJaOVwe4ND2fJK0sIt5Bm_3Vb/s1600/buku+tamu+merah+muda.png  
4. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcwN4CaN9iTqJ7gzDvkeAL7TswyTuiWOcFT0wpKiGTPt84NE7rMzcoT9U5hQ2Y6smKaFwuMAlzVqGPHR15HcvrVCm8x99c7YFpU6-viqnOgEXJta6P3tsDBUBs8v2ioNOZb840e7UYxprt/s1600/buku+tamu+merah.png 
5. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEmIe2FBWNvObIqjiLBbJcsyQ0L6_EpS3Qd18f_9uLuEgY8rsf4xazZ885FxiLcwc4qtSXkQEPTge_Ht5hKUfyWeQHZXDbHzPuQFIptimBflisBycMVvksxh4Y3LbAhczfUFTi_uktafSB/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/AVvXsEgcx2Je62Brf5iqFhApXfXZ3dyJJJQYlbLAB6PBZfu_TqL018RBeSmGYBpDOyFARTq5Dcyv15KYr007bNk6YBOV5tQFc1K7dC0Vc9VcQYv0Nns3kpfGwTlUzHJXHJnPBbQ-5fqhPTMcDoPd/s1600/buku+tamu+biru.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSF2W2K8jtFodEPqAP45UzgB6BBcJj3JSK-UHzKkIBXhjx8O_GPEng0QgpttECZL0G0bNHe-T5DQ8jvWNHORvbqvb_kn2k9hFSpRUme80hjhEjlnn9mc760U-7GkQfjbJWzJ0qqxlK-oI/s1600/cbred-LEFT+copyasasd.png