Cara Memasang Cbox dan Cara Membuat Cbox Tersembunyi Di Blogspot

Hai.. semuaa... hari ini dan tentunya kali ini juga. dalam postingan kali ini saya akan membahas cara memasang cbox di blogspot. sebelum membahasnya, saya akan kasih tau kalian semua para blogger, untuk mengetahui apa sih itu cbox.? Cbox adalah suatu aplikasi yang khusus dipasang di blog atau website anda. Sep
erti
 Buku Tamu yang sering anda temukan di blog lainnya. Oh ya, blog ini juga sudah punya Cbox loh.. coba anda lihat di samping kanan tengah. ada ShoutBox bukan.? coba kali klik. apa yang terjadi.? ya, benar sekali muncul Cbox. nah, untuk posting kali ini saya sediakan sekaligus Cara Memasang Cbox Tersembunyi Di Blogspot. dari pada nunggu lama, langsung nih ikutin cara - caranya :

Good Luck

Membuat Cbox Di Blogspot


Langkah Awal :


1. Klik http://www.cbox.ws
2. klik "Get your own free Cbox now!"
3. Lalu Isi Form yang disediakan diantaranya ada Cbox

Name: Isi dengan nama username
Email address: Email anda yang aktif
Password: Isi dengan Password anda
Confirm Password: Tulis Ulang kembali Password anda
Website: Isi dengan URL web/blog yang akan anda pasang Cbox
Language: Pilih Bahasanya
Style: Warna untuk Cbox anda di blog

4. Lalu, "CREATE MY CBOX"
5. Cek email yang anda daftarkan, lalu klik link Validnya, Lalu anda bisa Log In dengan menggunakan nama email dan password cbox anda.



Langkah Kedua :


1. Salin kode Sobat ke clipboard dengan mengklik tombol di atas.
2. Sign in di blogger.com
3. Di blog Sobat, pergi ke Tata Letak
4. Klik Tambah Gadget
5. Pilih HTML / JavaScript, klik kotak konten dan paste kode Anda di dalamnya dengan menekan Ctrl + V.
8. Simpan perubahan dan liat hasilnya.

Memasang Cbox Tersembunyi Di Blogspot

img by tutorialuntukblog.blogspot.com

Setelah Cara Membuat Cbox Di Blogspot di atas tadi Sekarang mencoba untuk Cara Memasang Cbox Tersembunyi Di Blogspot. Buat sahabat blogspot  yang juga ingin memasang Cboxnya seperti pada gambar diatas bisa mengikuti langkah - langkahnya. oh ya, hampir lupa. untuk membuka Cbox ini kalian harus mengklik tanda Shout Box yang gambarnya seperti gambar di atas ini. dari pada nunggu lama langsung yuk kita peraktekan.

 

Langkah - langkahnya :

 

Silah sobat login ke akun bloggernya terlebih dahulu

Pilih menu Layout atau Tata Letak

                                                     img by dapur-tutorial.blogspot.com

Klik Add a Gadged atau Tambah Gadget

                                                          img by dapur-tutorial.blogspot.com

Pilih HTML/JavaScript

                                                            img by dapur-tutorial.blogspot.com

Copy Code berikut dan letakan pada Box HTML/JavaScript yang sudah sobat pilih tadi

<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://2.bp.blogspot.com/-hp5hb7Z7Gvk/TmzEhhJZRmI/AAAAAAAAGgo/vmECDANflYw/s320/shoutbox.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
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">

KODE CBOXNYA DI SINI

<div style="text-align:right"><a href=http://sayalana.blogspot.com/target="_blank"><small>SAYA LANA BLOG</small></a>
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Keterangan :
Perhatikan Tulisan KODE CBOXNYA DI SINI silahkan sobat ganti Dengan kode chatbox atau kode buku tamu sobat

Klik Simpan

Selesai dan lihat hasilnya

 

Tweet