Jumat, 06 April 2012

Membuat Bukutamu Cbox

Pada kesempatan kali ini saya akan share Cara Membuat Bukutamu Cbox, Bukutamu dimaksudkan   agar pengunjung bisa meninggalkan pesan maupun kritik dan saran, bila sobat berniat menggunakan bukutamu ini,
Langsung saja


Caranya :
  • Masuk ke website layanan Cbox di  http://cbox.ws/
  • Sign Up terlebih dahulu atau klik pada Get Your Own Cbox
  • Akan ada formulir, isikan semua
  • Jika sudah, centang pada I have read and do agree kemudian Klik tombol Create my Cbox
  • Login dengan username dan masukan password yang baru dibuat
  • Masuk ke Menu Look & Feel untuk mengatur warna dan size bukutamu
  • Jika ingin menggunakan Avatar silahkan masuk ke Menu Options » Posting Options dan pada Allow Avatar di centang kemudian Save
  • Selanjutnya masuk ke Menu Publish dan klik pada Copy to clipboard untuk mengambil kodenya
  • Langkah berikutnya masuk ke Blogger » Tata Letak
  • Tambah / Add Gadget
  • Pilih yang HTML/JavaScript
  • dan pastekan kode yang di copy dari Cbox
  • Save
Namun jika ingin Bukutamu nya menempel di dinding dapat di buka/tutup kodenya perlu di modifikasi, tambahkan kode berikut :

<style type="text/css">
#gb{
position:fixed;
top:50px;
right:0px;
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/AVvXsEhJlIZbY1hqB1Y0irlJPPciADu8iLQ5RVCIWl5bqz3oyINf8MNAmTAeycRrBOZgTMuMX9MsTAkdPtEXeRBFSiKuMDt5kZJxOUOr-P0Rm6_fJTd-bR2rLxfV9LjqX3TerqCUArsw_AhgS0tr/s1600/BUKUTAMU-999.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">

Masukan Kode Cbox Disini

<div style="text-align:right">
<a href="javascript:showHideGB()">
[Close]
</a>
</div>
</div>
</div>
var gb = document.getElementById("gb");
if (window.opera) {
gb.style.right = (30-gb.offsetWidth).toString() + "px";
}else {
gb.style.right = (-gb.offsetWidth).toString() + "px";
}

Masukan kode yang di copy dari Cbox pada tulisan Berwarna Pink
dan untuk gambar dapat diganti pada yang diberi warna Orange

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)