cara membuat buku tamu

Assalamuallaikum Wr Wb

Setelah ngutak atik ampe mata perih akhirnya bisa juga tuh buku tamu. maklum ane gak paham script :)
Nah disini ane mau share nih cara bikinnya. Kali aja ada yang belum tau cara bikinnya.
Bikinnya pake http://cbox.ws/ (baca : cebok) :D .

Caranya :
1. masuk ke http://cbox.ws
2. Pilih Sign Up
3. Isi text box yang ada. Sayangnya gak ada bahasa Indonesia :( . pilihan Style bebas aja nanti bisa diganti. kalo udah centang terus klik Create My Cbox.
4. Masukkan Login name dan password yang tadi dibikin.
5. Masuk deh di Control Panel Home. Disini bisa deh mulai edit Cbox yang dipengen.

6.  Pilih Look & Feel. Terus edit deh Cbox sesuai keinginan.
7. Kalo udah, pilih Publish!.

8. Ikuti step step yang ada. 
     Step 1: Where are you installing your Cbox? (Pilih tempat dimana Cbox akan dipakai)
     Step 2: Choose a variation: (Pilih tampilan Cbox)
     Step 3: Get your code (Disini akan muncul script Cbox)
     Untuk cara pemasangannya udah ada distep selanjutnya :D
_________________________________________________?
Pertanyaan : Kok Cbox diblog agan beda?
Jawaban : Soalnya ane Edit gan. Dikasih sama agan Wisnu Prasetyo

Nih ane kasih cara Editnya.
1. Pada Step 2 , Pilih Deferred Load
2. Pada Step 3 , Edit Javascriptnya.

berikut ini cara Editnya :
1. Copy paste sebagian script ke Notepad
contoh yang dicopy :
function togglecbox () {
    var cbdiv = document.getElementById("cboxdiv");

    if (!cbvis) {
        if (!cbload) {
            cbdiv.innerHTML = '<iframe frameborder="0" width="200" height="305" src="http://www6.cbox.ws/box/?boxid=707602&amp;boxtag=qs1l5b&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain6-707602" style="border:#FFFFFF 1px solid;border-bottom:0px" id="cboxmain6-707602"></iframe><iframe frameborder="0" width="200" height="75" src="http://www6.cbox.ws/box/?boxid=707602&amp;boxtag=qs1l5b&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform6-707602" style="border:#FFFFFF 1px solid;border-top:0px" id="cboxform6-707602"></iframe>';
            cbload = true;
        }
        cbdiv.style.display = "block";
    }
    else {
        cbdiv.style.display = "none";
    }
    cbvis = !cbvis;
}
</script>
 2. Paste Script berikut diatas function togglecbox () {
<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('http://b.imagehost.org/0611/buku-tamu.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">
<div id="cboxdiv" style="width: 200px; height: 380px;"></div>

<script type="text/javascript">
var cbvis = false;
var cbload = false;
 3. Selanjutnya Paste script berikut dibawah </script>
<!-- move the next line to the bottom of your <body> to defer the loading of your Cbox -->
<script>togglecbox();</script></div></div>
<div style="text-align:right">
<a href="javascript:showHideGB()">
</a>
</div>


<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
 4. Kalo udah, Tinggal ditest aja ditempat yang mau dikasih Cbox.

Demikian dari ane semoga membantu :)


Jangan asal copas gan.
Baca dulu > peraturan copy paste post

Comments

Popular Posts