Home » , » Membuat Chatbox Floating / Melayang di Blogspot

Membuat Chatbox Floating / Melayang di Blogspot

Written By Emye Yahya on Minggu, Juni 02, 2013 | 21.38

Posting kali ini adalah bagaimana Cara Membuat Chatbox Floathing, berikut adalah tutorialnya :

Langkah Pertama yang kamu perlukan adalah membuka alamat website chatbox di www.cbox.ws. Setelah masuk ke halaman utama, Klik Sign Up. Kemudian isi data tersebut seperti alamat email, alamat blog dll. Jika sudah mengisi data tersebut dengan lengkap, klik Create my Cbox!

Setelah itu kamu akan masuk di Control Panel Home, Klik Look & Feel – Colours & Fonts

Lalu kamu akan masuk pada halaman untuk mengedit chatboxmu. Edit warna dan style chatboxmu sesuaikan dengan skin blogmu. Jika sudah selesai klik Apply. Setelah itu Klik Publish 

Jika sudah, maka anda akan masuk pada halaman CODE GENERATOR. Isikan alamat blog mu pada Your Website. Beri tanda centang pada Enable Quick Link. Isikan Security Tag sesuai kode yang tertera..

Pada Step 1 Where are you installing your chatbox? klik tanda panah ke bawah pilih Blogger / Blogspot.
Pada Step 2 Choose a variation : Klik tanda panah ke bawah pilih Inline (default).
Pada Step 3 Get your code. Blog semua dan copy script tersebut.

Sekarang kamu log in pada bloggermu. Setelah masuk, Klik Rancangan, kemudian Elemen Laman. Klik Tambah Gadget. Setelah muncul jendela baru, pilih HTML/Javascript klik tanda tambah. Kemudian Isikan Kode ini :

<!-- left hidden chatbox by http://goo-dude.blogspot.com/ START -->
<style>
#hcl {
position:fixed;
top:50px;
left:0px;
z-index:+1000;
}
* html #hcl {position:relative;}
.hcltab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://3.bp.blogspot.com/_Z_KyM3IvEFQ/S2Evq5hIpUI/AAAAAAAABAM/3qo6ScKImhw/s400/cbred-LEFT.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">

KODE SCRIPT CHATBOX ANDA

<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<a href="http://goo-dude.blogspot.com/2011/07/membuat-chatbox-floating.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://goo-dude.blogspot.com/ END -->

Silahkan Ganti Tulisan  KODE SCRIPT CHATBOX ANDA dengan Script Chatbox yang kamu dapatkan dari www.chatbox.ws

Selesai

Selamat mencoba .....


Share this article :

0 comments :

Posting Komentar

Kami sangat menghargai komentar pembaca sekalian, baik saran, kritik, bantahan dan lain sebagainya.
Bagi pembaca yang ingin berkomentar silahkan untuk login.

Peraturan komentar:
-komentar pendek atau panjang tidak masalah, baik lebih dari satu kolom juga tidak apa-apa.
-komentar menggunakan bahasa yang baik dan benar tidak berbelit-belit.
-langsung pada topik permasalahan. Terimakasih

Blog Archive

 
Support : Dzul Kifayatain_Tis'ah | kanahayakoe | Coretane Emye
Copyright © 2013. emye Blogger - Kertahayu Boy - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger