 |
| Cara Buku Tamu |
Guestbook atau buku tamu merupakan salah satu dari kumpulan widget terbaik untuk blog karena widget tersebut cukup populer dikalangan para bloggger. Pada kesempatan kali ini setelah beberapa waktu yang lalu saya telah memberikan cara menambahkan widget jam di blog dan cara memasang lagu di blog yang juga merupakan widget yang paling digemari pengguna blog, saya akan memberikan cara membuat atau memasang buku tamu di blog blogger atau blogspot anda dengan langkah yang mudah dan cepat untuk dilakukan.
Cara membuat buku tamu di blog
1. Kunjungi cbox.ws
2. Daftar dengan klik “Get your own free Cbox now!”
3. Isi form pendaftaran dan pilih model buku tamu yang diinginkan di “style”
4. Klik “create my cbox”
5. Verifikasi email anda dan login kembali di cbox
6. Klik “look & feel” dan atur buku tamu tersebut sesuai keinginan anda
7. Jika telah selesai mengatur klik “save” dan klik “apply”
Cara memasang buku tamu di blog sesuai keinginan
1. Di member area cbox klik “publish!” dan copy kode yang diberikan dengan klik “copy to myclipboard”
2. Login ke blogger anda, klik “tata letak” dan “tambah widget” pada posisi yang anda inginkan
3. Pilih “HTML/Javascript”
4. Paste kan kode tersebut dan klik simpan.
Cara memasang buku tamu melayang atau menggantung disisi kanan blog
1. Login ke blogger- tata letak – dan tambah widget
2. Pilih “html/javascript”
3. Pastekan kode dibawah ini di kolom yang disediakan
<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/AVvXsEg3WGeySfa0Mtvr3tNez2htGpoGVHERPwaXMXGF1IORu-du4qBpaoS_ss4h5bii2U-mAdem0I_6nZXQdwHRsQHfbBHe_ZpoSNODI_UWKlMBxSYrJjUM7SMJS8HE7jUMkhjPabnrRdzBhHo/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://anonymouslikepeace.blogspot.com">[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>
4. Ubah tulisan berwarna hijau dengan kode yang anda dapat dari cbox tadi#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/AVvXsEg3WGeySfa0Mtvr3tNez2htGpoGVHERPwaXMXGF1IORu-du4qBpaoS_ss4h5bii2U-mAdem0I_6nZXQdwHRsQHfbBHe_ZpoSNODI_UWKlMBxSYrJjUM7SMJS8HE7jUMkhjPabnrRdzBhHo/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://anonymouslikepeace.blogspot.com">[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>
5. Klik “simpan”
.
Sepertinya panjang juga kalau semua source codenya ditampilkan diartikel ini ( bilang aja males ngetik lagi Xixixi.. 
balik sini lagi ya sob..
, maksudnya sekalian saja gitu sob.. biar ndak usah cari referensinya ditempat lain 
) :
=> 
