cbox

close
chat YM
Home » » Cara Lengkap Memasang Buku Tamu / CBOX Di Blog: Kiri, Kanan, Bawah, Atas

Cara Lengkap Memasang Buku Tamu / CBOX Di Blog: Kiri, Kanan, Bawah, Atas

den zuaz | 01.29 | 53comments
Cbox atau lebih dikenal sebagai buku tamu merupakan hal yang tidak asing lagi di dunia blogger, sudah banyak tutorial-tutorial yang membahas tentang cara pemasangan Cbox, baik dengan cara standar maupun dengan cara pengubahan kode CSS.

Kali ini saya akan memposting cara memasang Cbox  auto hiden dari segala arah, segala arah maksudnya yaitu Cbox dapat ditempatkan atau muncul dari bagian sebelah kiri blog, kanan blog, bawah blog, dan atas blog, dan disertakan juga animasi gambar gif sebagai background.

Saya kira cukup sekian bla bla bla penerangan saya, dan mari kita menuju kepokok pembahasan.

Berikut ini adalah Cara Lengkap Memasang Buku Tamu / CBOX Di Blog: Kiri, Kanan, Bawah, Atas:
  1. Seperti biasa sobat harus Login dulu di akun blog sobat
  2. Pilih Tata Letak
  3. Tambah Gadget HTML/Java Script
  4. Selanjutnya copy paste kode script di bawah ini dan masukan ke dalam Gadget HTML/Java Script.

Klik show untuk melihat
<style type="text/css">
#at{
position:fixed;
right:35%;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:0px;
width:0px;
float:top;
cursor:pointer;
background:url(url);
}
.atcontent{
float:left;
border:2px solid #fff;
background:url(http://lh5.ggpht.com/_yF0--u7KSSI/TKgzluISmnI/AAAAAAAAAxE/PC55GBEXvig/kembangApi.gif)#000000 repeat-x bottom center scroll;
-moz-border-radius:10px;
padding:10px;
}
.atcontent:hover{
border:2px solid #fff;
background:url(http://petir-project.googlecode.com/files/zuaz-petir.gif)#000000 repeat-x bottom center scroll;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url(http://i53.tinypic.com/oiu4n9.gif) no-repeat;">

Strip kode cbox sobat

</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Tutup Cbox" /></a></div>
</div></div>

<script type="text/javascript">
var at = document.getElementById("at");
at.style.bottom = (-200-at.offsetWidth).toString() + "px";
</script>

Klik save / simpan.

Keterangan:
  1. Kode warna merah adalah warna gambar, silakan sobat sesuaikan sendiri sesuai selera bila ingin mengganti gambarnya
  2. Kode warna kuning adalah penepatan dimana cbox akan muncul, bila sobat ingin cbox muncul dari atas ganti kode tersebut menjadi TOP, dari sebelah kiri LEFT, dari sebelah kanan RIGHT .
  3. Kode warna putih adalah jarak cbox dari sebelah kanan. Silakan sobat sesuaikan sendiri.
  4. Texts berwarna hijau adala tempat untuk menaruh strip kode cbox sobat (atur cbox sobat agar backgroudnya transparant untuk hasil yang lebih sempurna).
Selanjutnya adalah cara membuat tombol cbox (tombol untuk menampilkan cbox)

  1. Tetap login di akun blog sobat
  2. Masukan script berikut bersamaan dengan script di atas dalam gadget HTML / Java Script
<div style="position: fixed; top: 55px; right: 5px;width:30px;height:100px;"><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://lh4.ggpht.com/_1j80TgNqd_8/TS3MlHxaygI/AAAAAAAABVo/P36anu_ToeA/s128/guestbook.png" alt="cbox" title="Buka Chat Book"/></a></div>

Keterangan: 
  • Kode berwarna merah adalah gambar tombol, bisa sobat ubah sesuai selera.
  • Kode warna kuning adalah dimana tombol akan ditempatkan, TOP untuk menempatkan tombol di atas, BOTTOM untuk menempatkan tombol di bawah, LEFT untuk menempatkan tombol di sebelah kanan.
  • Kode warna biru anda sesuaikan jarak tombol TOP dari atas blog, BOTOM dari bawah blog.
Demikianlah Cara Lengkap Memasang Buku Tamu / CBOX Di Blog: Kiri, Kanan, Bawah, Atas. Semoga bermanfaat bagi sobat semua.

Sumber Script: http://iydhapoex.blogspot.com

Posted by : den zuaz - Author Zuaz'Z Creator™

Artikel Cara Lengkap Memasang Buku Tamu / CBOX Di Blog: Kiri, Kanan, Bawah, Atas ini diposting oleh den zuaz. Terimakasih atas kunjungan Sobat serta kesediaan Sobat membaca artikel ini. Kritik dan saran dapat Sobat sampaikan melalui kotak komentar. Apabila Sobat berminat silakan copy paste artikel ini dan mohon untuk mencantumkan sumbernya dengan menyertakan script di bawah ini:

Hormat saya: den zuaz

Bagikan artikel ini sobat :
Pemberitahuan:
Mohon maaf apabila komentar Sobat dari Facebook tidak bisa saya jawab semua, dikarenakan sulit untuk memoderasi komentar dari Facebook, bila sobat ada pertanyaan yang ingin lansung saya jawab, silakan Sobat berkomentar dari id Blogger.
Komentar Sahabat
53 Komentar Sahabat

53 comments:

Gede Suropati mengatakan...

Yaaaahhhhh,,,,,
Mantap dah!!!

den zuaz mengatakan...

@_Gede Suropati: Terima kasih sob,, ^_^

Mad Buddy mengatakan...

mantab mas bro :) atas sharing tutorialnya

den zuaz mengatakan...

@_Made Budi: Terimakasi sob.. ^_^

ricco mengatakan...

keren kawand tutorialnya..
memohon untuk di ccontek dikit nich.. hehe..

den zuaz mengatakan...

@_Ricco VM: Silakan sob.. ^_^

Tesa mengatakan...

maksudnya strip kode cbox itu apa ya gan? maaf saya pemula jadi masih bingung

den zuaz mengatakan...

@_Asry Tesa Lonika: Maksudnya scrip kode yang didapat saat mendaftar di cbox sob,,

sebelum sobat menggunaka cara diatas sobat harus mendaftar dulu di www.cbox.ws.
atur dulu supaya tampilan cbox transparan.
baru selanjutnya ikuti langkah-langkah di atas. ^_^

iydha mengatakan...

lengkap ni tutor,nya hehe
thanks ya dah berbagi

den zuaz mengatakan...

@_Nur Aiydha: Sama-sama sobat..
hanya sedikit pengembangan saja.. ^_^

Unknown mengatakan...

gan follow ya..
:D

mntab x blog nya..
kagum gw
hafiz.blogspot.com

den zuaz mengatakan...

@_Hafiz Irwandi: Silakan sob,,

terimakasih sob,,
hanya belajar dan terus belajar dalam dunia blogging,, itu membuat kita lebih mengerti.. ^_^

Bagas Rangga S. Putra mengatakan...

trims gan sukses...,tapi gimana caranya biar tampilan cbox tranparan.? ,maklum masih pemula saya hehe

den zuaz mengatakan...

@_Bagas Rangga S. Putra: sama-sama sob,,

pengaturan background di cboxnya sob,, sudah banyak kok tutornya,, cari aja di mbah google,,

saya belum sempat posting,, ^_^

Nur Prasetiyo (Zutonx Blog) mengatakan...

Keren Gan....Two Thumbs Up for U....

den zuaz mengatakan...

@_Nur Prasetiyo: Terimakasih sob,, ^_^

kisah dan pengharapan mengatakan...

like

den zuaz mengatakan...

@_kisah dan pengharapan: Trima kasih sobat,, ^_^

Arbian Kuncoro Jati mengatakan...

Saya Bangga sekali dengan anda
Informasi yang anda berikan sangat bermanfaat
Tetap terus berkarya sobat.

den zuaz mengatakan...

@_-"JOGJA Cyber"-: Terima kasih Sob,, ^_^

Arbian Kuncoro Jati mengatakan...

Sob, mau tanya. Klau buat YM Pingbox di samping kya blog sobat, gimana?

den zuaz mengatakan...

@_-"JOGJA Cyber"-: Sudah ada tutorialnya pada blog saya Sob,,

Silakan dicoba,, ^_^

Unknown mengatakan...

gan saya sudah makai buku tamu yang transparan,saya ingin memodifikasinya,,
tapi saya bingung yang mana kode cbox nya..
tolong di bantu ya gan..

den zuaz mengatakan...

@_M Yanhar: Kode cbox biasanya di awali dengan dan di akhiri dengan

Johannes Nababan mengatakan...

agan zuazz...
cmana y klo kt mau ganti bacground dari cboxnya...
agar animasi yg agan ksih itu keliatan..

den zuaz mengatakan...

@_Johannez Albert: Atur ulang tampilan cboxnya agar transparan Sob,, setelah selesai set ulang, masukkan kode baru cboxnya,,

Unknown mengatakan...

Cara Masang Chat Ym Melayang Kayak Blog Agan Ni Cara.ny Gmn ?

den zuaz mengatakan...

@_wisnu samudra: Sama dengan cara di atas sob,,

Unknown mengatakan...

Artikelnya membantu gan, minta share link buat templatenya juga dong. :-D

Anonim mengatakan...

wow pak juaj hebat

Unknown mengatakan...

Terima kasih tutorial yang sangat indah ini,, ini akan saya coba terapkan pada blog Masih Ingin Belajar

Ciku mengatakan...

keren bossss .... sangat bembantu ane yang newbie
artikelnya ijin copas . dtunggu kunjungan baliknya ^_^

Unknown mengatakan...

mantaaaap !! ada gambar naga Terbangnya .. thanks SOBAT :)..

Yoshua mengatakan...

Makasi gan ...!
ak suka ...!
sukses selalu...!!!!!

Unknown mengatakan...

visit and open my blog http://indramhidayat.blogspot.com

Anonim mengatakan...

Your blog posts and articles are very interesting and make me become more scientific, keep your blog so I can visit again to see your blog posts and articles later .. thanks for the info

Unknown mengatakan...

Nice info gan...
udah berhasil diterapkan...
ditunggu kunjungan baliknya yaaa...

Unknown mengatakan...

Thanks infonya..
nih, buat tambahan, untuk " right:35% " bisa diganti, untuk merubah posisi dimana munculnya chat box nya

Unknown mengatakan...

gan, udh bisa tp koq gelap?
kotak yg buat ngisi ga keliatan ...

maaf saya masih pemula, mohon di jawab gan ...

akang sam mengatakan...

gan, mohon penjelasannya, untuk menulisnya bagaimana?
thanks.

english.sambudy.com

Anonim mengatakan...

waah keren juga

Biray Hacker Cyber mengatakan...

mampir ksni ya ganz >>>> http://biray-hacker.blogspot.com

Unknown mengatakan...

Thank You Sangat Bermanfaat gan...

Unknown mengatakan...

thank's info nya gan :D

Unknown mengatakan...

blog yg bagus serta postingan yg bermanfaat, keep writing gan! :)
btw numpang nuimpen link gan ya dan semoga bermanfaat jg bagi kawan" yg lain :)
http://masternetmasterpulsa.blogspot.com/

Anonim mengatakan...

Gabung Broo bersama Agen Judi Online Terpercaya Totalbet188 untuk mencoba kenyamanan dalam bermain Judi Online dengan proses yang cepat mulai dari registrasi, Deposito dan Widhrawal. Hubungi langsung Customer Service kami untuk mewujudkan keinginan Anda untuk mencoba keberuntungan Anda dalam bermain Judi Online bersama kami.

http://totalbet188.com/home/artikel-umum/agen-judi-terpercaya-totalbet188

cakro mengatakan...

mampir gan...sangat menarik ijin bawa pulang...

pandu mengatakan...

Thanks gan,
http://p4ndoo.blogspot.com

Unknown mengatakan...

trimakasih bro, ijin praktek

Unknown mengatakan...

obat kanker payudara asli
obat denature kanker
obat kanker asli
penipuan obat kanker
obat kanker hati

Unknown mengatakan...

cara mengobati kanker
denature indonesia penipuan
denature indonesia
obat herbal kanker
obat penyakit gula

Unknown mengatakan...


obat kanker mata
penyakit kanker apa
obat herbal kanker payudara
denature indonesia asli
obat kanker alami

proladies mengatakan...


jual obat aborsi di malaysia
jual obat aborsi di hongkong
jual obat aborsi di singapura
jual obat aborsi di medan
jual obat aborsi di banda aceh
jual obat aborsi di lampung
jual obat aborsi di pekanbaru
jual obat aborsi di padang
jual obat aborsi di palembang
jual obat aborsi di jambi
jual obat aborsi di samarinda
jual obat aborsi di balikpapan
jual obat aborsi di pontianak
jual obat aborsi di banjarmasin
jual obat aborsi di bontang
jual obat aborsi di tarakan
jual obat aborsi di palangkaraya
jual obat aborsi di banjarbaru
jual obat aborsi di singkawang
jual obat aborsi di makassar
jual obat aborsi di manado
jual obat aborsi di palu
jual obat aborsi di kendari
jual obat aborsi di palopo
jual obat aborsi di tomohon
jual obat aborsi di gorontalo
jual obat aborsi di toli-toli
jual obat aborsi di denpasar
jual obat aborsi di ubud
jual obat aborsi di kutai
jual obat aborsi di bedugul
jual obat aborsi di singaraja
jual obat aborsi di kupang
jual obat aborsi di lombok
jual obat aborsi di mataram
jual obat aborsi di sumbawa
jual obat aborsi di jayapura
jual obat aborsi di sorong

Luangkanlah Sedikit Waktu Sobat Untuk Memperindah Blog Ini Dengan Berkomentar,, (^_^)

PERINGATAN,,!!!
Bagi Sobat Yang ingin berkomentar, mohon sesuaikan dengan tema pada postingan, dan saya mohon untuk tidak mencantumkan link (URL) pada komentar karena akan saya anggap spam dan mohon maaf apabila saya hapus komentar Sobat,,!!!

Pilih Bahasa Sobat

English French German Spain Italian Dutch

Russian Portuguese Japanese Korean Arabic Chinese Simplified
Designed By: den zuaz

Baca Juga Artikel Lainya Ya

Tuker Link Banner Yook

Bagi Sahabat Blogger Yang Bersedia Untuk Bertukar Banner Dengan Blog Zuaz'Z Creator Silakan Copy Code Di Bawah Ini Untuk Dipasang Di Blog Sobat
Email: dideardana@gmail.com
Banner Zuaz'z
..::: Like this yoo :::..
..::: Award Dari Sahabat :::..

Friendship Award
Dwi Semakin Sukses

banner coa-coba
den zuaz

^_^ iklan kosong ^_^

 
Copyright © 2012. Zuaz'Z Creator™ - All Rights Reserved
..::: Template designed by den zuaz | Powered by Blogger | Thanks for visiting :::..