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 | 58comments
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
58 Komentar Sahabat

58 comments:

Gede Suropati mengatakan...

Yaaaahhhhh,,,,,
Mantap dah!!!

den zuaz mengatakan...

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

Made Budi mengatakan...

mantab mas bro :) atas sharing tutorialnya

den zuaz mengatakan...

@_Made Budi: Terimakasi sob.. ^_^

Ricco Verial Malvadi mengatakan...

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

den zuaz mengatakan...

@_Ricco VM: Silakan sob.. ^_^

Asry Tesa Lonika 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. ^_^

Nur Aiydha mengatakan...

lengkap ni tutor,nya hehe
thanks ya dah berbagi

den zuaz mengatakan...

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

Hafiz Irwandi 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,, ^_^

-"JOGJA Cyber"- mengatakan...

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

den zuaz mengatakan...

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

-"JOGJA Cyber"- 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,, ^_^

M Yanhar 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

Johannez Albert 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,,

wisnu samudra mengatakan...

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

den zuaz mengatakan...

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

Faishal Amri mengatakan...

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

Alwan Fauzy mengatakan...

wow pak juaj hebat

Ade Purnama mengatakan...

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

ian foldism mengatakan...

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

bu punsu mengatakan...

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

yoshua fernandes mengatakan...

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

indra muhhidayat mengatakan...

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

store-online999 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

VanillaVanka mengatakan...

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

Majalah Dinding Galasta mengatakan...

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

Satria Edwin Wicaksana mengatakan...

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

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

Akang Budi mengatakan...

gan, mohon penjelasannya, untuk menulisnya bagaimana?
thanks.

english.sambudy.com

iizh-sweetheart mengatakan...

waah keren juga

Biray Hacker Cyber mengatakan...

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

Admin The Indonesia! mengatakan...

Thank You Sangat Bermanfaat gan...

dins sam mengatakan...

thank's info nya gan :D

Agel Ahmad 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/

Anya Anjani 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

Jek Brom mengatakan...

manthap
http://duniagame7.blogspot.com/

alexa beccyber mengatakan...

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

Pandoo Atmadja mengatakan...

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

Listy T-Shirt mengatakan...

trimakasih bro, ijin praktek

Muji Utomo mengatakan...

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

Muji Utomo mengatakan...

cara mengobati kanker
obat kanker denature
denature penipu
obat herbal kanker
obat tradisional kanker

Muji Utomo mengatakan...

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

Muji Utomo mengatakan...

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

Muji Utomo mengatakan...

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

Muji Utomo mengatakan...

cara mengobati kanker
obat kanker denature
denature penipu
obat herbal kanker
obat tradisional kanker

Muji Utomo mengatakan...

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

Muji Utomo mengatakan...


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

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 :::..