SEBAIKNYA KUNJUNGI BLOG SAYA :

BLOGBEGO CREATION




Tampilan CBox sesuai selera Blogger

Kawan masih ingat dengan postingan saya yang berjudul CBox Kotak Chatting Alternatif dan karena ada beberapa pertanyaan kawan Blogger di CBox yang menanyakan cara membuat tampilan CBox seperti ini, termasuk juga di Blog saya yang lain yang isinya seperti berikut :r 

gan, buat cbox kaya gini gmn sih gan ? ak cari - cari di postingan agan kq gk ada?
memang sudah ada yang saya kasi tahu, tapi tak ada salahnya saya posting disini.
Sebenarnya itu CBox memberikan kita sebagai pengguna kemudahan-kemudahan maupun fasilitas yang cukup baik dibandingkan dengan Kotak Chatting lainnya dari mengganti background CBox, mengganti Emoticon tanpa batas sampai model tampilan yang Blogger inginkan. 
Caranya :
  1. Login ke CBox dengan Account kawan  
  2. Pilih Publish!
  3. Lihat kebawah Step2: Choose a variation : disana ada 4 pilihan yang bisa kawan pakai
  • Inline [Default] 
  • Popup Link
  • Floating Button 
  • Deferred Load 
Sedangkan CBox di Blog ini saya pakai Floating Button yang tampilannya hampir sama dengan Popup Link, bedanya hanya pada Button dengan Link. :D 
Script Floating Button seperti berikut :

<div id="cboxbutton" style="position: fixed; bottom: 8px; right: 16px; width: 300px; padding: 3px; text-align: center; cursor: pointer; background-color: #EDF3F7; border:#C3D7E5 1px solid;border-radius: 3px; font-family: Tahoma, sans-serif; font-size: 14px;" onclick="togglecbox()"><b>Open Cbox</b></div>
<div id="cboxdiv" style="display: none; position: fixed; bottom: 48px; right: 16px; width: 300px; background: #EDF3F7; padding: 3px; line-height: 0;border:#C3D7E5 1px solid;border-radius: 3px;"></div>
<script type="text/javascript">
var cbvis = false;
var cbload = false;
var cbcookie = "cboxvis=";
function togglecbox () {
var cbdiv = document.getElementById("cboxdiv");
var cbbut = document.getElementById("cboxbutton");
if (!cbvis) {
if (!cbload) {
cbdiv.innerHTML = '<iframe frameborder="0" width="300" height="362" src="http://www2.cbox.ws/box/?boxid=yyyyyyy&amp;boxtag=xxxxxx&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain2-yyyyyyy" style="border:#0041A8 1px solid;border-bottom:0px" id="cboxmain2-yyyyyyy"></iframe><iframe frameborder="0" width="300" height="78" src="http://www2.cbox.ws/box/?boxid=yyyyyyy&amp;boxtag=xxxxxx&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform2-yyyyyyy" style="border:#0041A8 1px solid;border-top:0px" id="cboxform2-yyyyyyy"></iframe>';
cbload = true;
}
cbdiv.style.display = "block";
cbbut.innerHTML = "Close Cbox";
}
else {
cbdiv.style.display = "none";
cbbut.innerHTML = "Open Cbox";
}
cbvis = !cbvis;
document.cookie = cbcookie+((cbvis)?1:0);
}
// Toggle Cbox open if it was previously
var cbcookiei = document.cookie.indexOf(cbcookie);
if (cbcookiei >= 0) {
if (document.cookie.substring(cbcookiei+cbcookie.length, cbcookiei+cbcookie.length+1) === "1") {
togglecbox();
}
}
</script>
Teks berwarna merah yyyyyyy dan xxxxxx adalah kode CBox saya, yang sudah tentu kode CBox kawan berbeda
Teks yang saya beri warna hijau untuk button dan coklat muda adalah body CBox, yang perlu di edit kalau kawan menginginkan tampilan CBox seperti saya punya, sebagai contoh setelah saya edit :

<div id="cboxbutton" style="position: fixed; bottom: 10px; right: 4px; width: 85px; height:20px; padding: 10px 1px 5px 1px; text-align: center; cursor: pointer; background-color: #000; border:#FFF 2px solid;border-radius: 5px;  font-family: Tahoma, sans-serif;font-size: 16px; color:#FF0;" onclick="togglecbox()"><blink>Open Cbox</blink></div>

<div id="cboxdiv" style="display: none; position: fixed; bottom: 48px; right: 206px; width: 300px; background: #95CAFF; padding: 3px; line-height: 0;border:#000 2px solid;border-radius: 3px;"></div>

Oh ya hampir lupa, script CBox tersebut bisa disimpan dimana saja [bisa digabung] pada gadget.
Simpan gadget dan Selamat berkreasi  :z 



19 komentar pada “Tampilan CBox sesuai selera Blogger”

  1. info yang menarik gan.simpan dulu ya filenya.?

    BalasHapus
  2. baguz nih bli kapan2 saya coba

    BalasHapus
  3. mampir lagi gan
    http://michaellandresteven96.blogspot.com

    BalasHapus
  4. wahhh keren banget gan tipsnya :) tetapi kan bisa langsung dari cbox.ws nya sendiri gan "Look & Feel" kan bisa gan di ubah lewat situ :)

    BalasHapus
  5. @Zh!nTho wah-wah jangan merendah kawan, ini kan asli dari CBox Free :r

    BalasHapus
  6. @Michaell Andre Steven trims kawan sudah berkunjung lagi dan tunggu kehadiran saya :r

    BalasHapus
  7. @Farixsantips benar kawan, tapi disini saya kreasikan dikit biar kelihatan sesuai selera saya tentunya :z

    BalasHapus
  8. Wah gini ya caranya agar cbox sesuai selera..........thanks gan :)

    BalasHapus
  9. @Resolusi Juara 2012-IT Soft Center thank kembali dan selamat berjuang, moga berhasil :O

    BalasHapus
  10. wah keren nih CBox , gantinya Shoutmix karena udah ga gratis , hmm keren saya coba dulu :D SALAM KENAL

    BalasHapus
  11. Sepertinya banyak juga peminat cbox.., karna shoutmix freenya mo tutup...hehehehe

    BalasHapus
  12. @ToPu saya pakai CBox Free tanpa batas Edit, Artikel saya : CBox kotak Chatting Alternatif

    BalasHapus
  13. Bagus jg neh info sobat, tp saya lebih suka pasang cbox dlm halaman, karna klu munculan gini sering ngadat :-d

    BalasHapus
  14. @Irwan Efendi Webblog ini program CBox bawaan bukan saya modif total :z

    BalasHapus

BERIKAN KOMENTAR SESUAI TOPIK DAN SANTUN
BUKAN SPAM - PORNOGRAFI MAUPUN MASALAH ETHNIS / SARA

TAMBAHKAN KOMENTAR DENGAN EMOTICON :
DENGAN KODE ALFABET < :a s/d :z >

 

Copyright  ©  TIPS BLOGBEGO

site meter

Template by Blogger templates
Powered by Blogger