Membuat Cbox dan Memasangkannya

Chatbox merupakan suatu website yang menyediakan forum diskusi/chat secara gratis. Dengan ini sobat bisa membuat forum diskusi sediri atau sobat bisa chating dengan pengunjung sobat, dengan aplikasi ini sobat bisa menjalin hubungan dekat dengan para pengnjung.

Kali ini saya akan mengajarkan tutorial berupa Membuat Cbox + Memasangkannya
Mohon dinikmati secara seksama ya??

Membuat akun Chatbox atau Cbox
1. Kunjungi website  Chatbox atau ini
2. Setelah itu pilih menu Sign Up
3. Setelah itu isi formulir tersebut, contohnya seperti ini

4. Centang I have read and do agree to the Cbox terms and conditions of service dan klik Create my Cbox!!
5. Setelah behasil mendaftar, silakan log in (letaknya ada di kanan atas)

Memasang Chatbox atau Cbox pada blog
1. Log in Chabox atau Cbox sobat
2. Setelah itu klik menu publish!

3. Copy kode HTML nya
4. Masuklah ke Dasboard sobat, lalu klik salah satu blog sobat
5. Pilih Tata Letak (1), lalu Tambah Gadget (2)

Tata Letak (1)

Tambah Gadget (2)

6. Setelah itu akan muncul tab baru, pilih gadget bergambar

7. Klik Icon +

8. Lalu muncul halaman baru lagi

9. Kosongkan Judul, dan isikan kode berikut pada kontennya

Tampilan Kiri:

<!-- Left hidden chatbox by http://tutorialseo-blog.blogspot.com START -->
<style>
#hcl {
position:fixed;
top:100px;
left:0px;
z-index:+1000;
}

* html #hcl {position:relative;}
.hcltab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://img202.imageshack.us/img202/8018/copyofcbblue.png') no-repeat;
}

.hclcontent {
float:left;
border:2px solid #790909;
background:#f3f6f7;
padding:10px;
}

.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">

function showHidehcl(){
var hcl = document.getElementById("hcl");
var w = hcl.offsetWidth;
hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);
hcl.opened = !hcl.opened;
}

function movehcl(x0, xf){
var hcl = document.getElementById("hcl");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcl.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}
}
</script>

<div id="hcl">
<div class="hclcontent">

< Html Disini >

<br />

<div class="hc-credit">
<span style="float:left">

<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->

<a href="http://tutorialseo-blog.blogspot.com/2012/02/membuat-cbox-memasangkannya.html" target="_blank"> Get this widget! </a>

</span>
<span style="float:right">
<a href="javascript:showHidehcl()">

[close]
</a></span>
</div>
</div>

<div class="hcltab" onclick="showHidehcl()"> </div>
</div>
<script type="text/javascript">

var hcl = document.getElementById("hcl");
hcl.style.left = (30-hcl.offsetWidth).toString() + "px";
</script>

<!-- left hidden chatbox by http://tutorialseo-blog.blogspot.com END -->

Tampilan Kanan:

<!-- right hidden chatbox by http://tutorialseo-blog.blogspot.com START -->
<style>
#hcr {
position:fixed;
top:100px;
z-index:+1000;
}

* html #hcr {position:relative;}
.hcrtab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://img202.imageshack.us/img202/8018/copyofcbblue.png') no-repeat;
}

.hcrcontent {
float:left;
border:2px solid #003e82;
background:#f3f6f7;
padding:10px;
}

.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>

<script type="text/javascript">
function showHidehcr(){
var hcr = document.getElementById("hcr");
var w = hcr.offsetWidth;
hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
hcr.opened = !hcr.opened;
}

function movehcr(x0, xf){
var hcr = document.getElementById("hcr");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcr.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}
}
</script>

<div id="hcr">
<div class="hcrtab" onclick="showHidehcr()"> </div>
<div class="hcrcontent">

< Html Disini >

<br />

<div class="hc-credit">
<span style="float:left">

<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->

<a href="http://tutorialseo-blog.blogspot.com/2012/02/membuat-cbox-memasangkannya.html" target="_blank"> Get this widget! </a>

</span>

<span style="float:right">
<a href="javascript:showHidehcr()">

[close]

</a></span>
</div>
</div>
</div>

<script type="text/javascript">
var hcr = document.getElementById("hcr");
hcr.style.right = (30-hcr.offsetWidth).toString() + "px";
</script>

<!--right hidden chatbox by http://tutorialseo-blog.blogspot.com END -->

Catatan:

• Ganti kode < Html Disini > dengan html sobat yang tadi
• Ganti kode http://img202.imageshack.us/img202/8018/copyofcbblue.png dengan kode gambar yang lain

Code:

http://img714.imageshack.us/img714/6969/cbblue.png

Code:

http://img571.imageshack.us/img571/2107/copy2ofcbblue.png

Code:

http://img43.imageshack.us/img43/7977/copy3ofcbblue.png

Code:jk

http://img202.imageshack.us/img202/8018/copyofcbblue.png

10. Setelah itu pilih simpan

Bagaimana menarik gak tutorial saya tentang Membuat Cbox + Memasangkannya??

Anda baru saja membaca artikel yang berkategori gadget dengan judul Membuat Cbox dan Memasangkannya. Jika kamu suka, janganlike dan bagikan keteman-temanmu ya... By : Tutorial Blogger

Ditulis oleh: Andreano Calvin - Sabtu, 11 Februari 2012