Membuat Background Pada Cbox

Written By Enda Fivers on 20 September 2010 | Monday, September 20, 2010

Pada postingan kali ini saya akan share bagaimana cara membuat background pada cbox seperti yang terlihat pada Cbox saya / lihat screenshot disamping. Awal ketertarikan saya membuat background pada cbox ini adalah saat saya berkunjung pada blog sobat "Lintas Suara" dan melihat cboxnya, sejak dari kunjungan itulah saya mulai berfikir bagaimana cara membuat background pada cbox (cie..ciee...berfikir) tapi memang benar-benar saya pikirkan lho...hehehe...

Awalnya saya mengira itu adalah fasilitas dari cbox, ternyata eh ternyata "Te I De A Ka", pada cbox kita hanya perlu settingan warna (dijadiin transparan).
Ya sudah,,saya emang orangnya ga banyak basa-basi... Berikut caranya :
1. بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْم
2. login pada Cbox

3. Pilih >>Look & Fell >>Colours & fonts


4. Pada menu Colours & Fonts silahkan sobat atur warna cbox (hapus kode warna untuk membuatnya transparan)

Klik disini untuk melihat gambar
5. Setelah diatur warnanya klik "Apply"






6. Lihat pada kode cbox sobat untuk mempersiapkan ukuran gambar (berikut contoh kode cbox saya)

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="380" height="180" src="http://www5.cbox.ws/box/?boxid=537363&amp;boxtag=x15zpv&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#DBE2ED 1px solid;" id="cboxmain"></iframe></div>
<div><iframe frameborder="0" width="380" height="75" src="http://www5.cbox.ws/box/?boxid=537363&amp;boxtag=x15zpv&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#DBE2ED 1px solid;border-top:0px" id="cboxform"></iframe></div>
</div>
<!-- END CBOX -->
height= 180
height=   75
-------------+
Total=  255  << tinggi gambar yang harus dipersiapkan (ini contoh pada blog saya)
Sedangkan lebar gambar tidak perlu dijumlahkan seperti diatas >> width=380

7. Setelah Gambar dipersiapkan silahkan upload pada tempat hosting image seperti Picasa atau Photobucket dll.
8. Login Blogger pilih >>Rancangan >>Elemen Laman, dan tambahkan gadget HTML/Java Script
9. Copas kode berikut :

<div style="background:url(http://lh6.ggpht.com/_yF0--u7KSSI/TJaw3GkjR9I/AAAAAAAAAjA/ekAacPGfhtQ/cloud-spam.png) no-repeat center;">
Kode Cbox Sobat Disini
</div>
Warna biru ganti dengan URL image sobat yang telah diupload

10.Save

Note : "Jika gambar tidak tepat pada tengah cbox silahkan cari gambar/buat gambar sesuai dengan ukuran lebar dan tinggi widget sidebar blog sobat, gambar juga bisa berupa icon animasi dll"
           no-repeat center dapat diganti dengan :
repeat
no-repeat center [Posisi gambar ditengah]

no-repeat center bottom [Posisi Gambar ditengah>>bawah]
no-repeat center left [Posisi Gambar ditengah>>kiri]
no-repeat center top [Posisi Gambar ditengah>>atas]
no-repeat bottom center [Posisi Gambar ditengah>>bawah]
Sekian dulu tips dan trik dari saya. Silahkan sobat kembangkan lagi dengan mencoba-coba pasti bisa..hihi..
"mohon maaf jika ada kesalahan dan jangan lupa beri tau saya"



"Selamat menikmati hidangan cbox barunya...hehehe"





29 comments:

drop2death said...

keren artikelnya sob, informatif hehe

Bang NgangaN said...

terimaasih infonya,segera pratek..

penghuni60 said...

MKSH SOB, KEREN BGT, LNGSUNG DICOBA DEH...
aku mau rancang gambar dulu...

chikarei said...

owhh kayak gitu yah^^
ntaran che" coba deh

Bintang said...

perlu di coba neh hehehe

IMAN said...

waah mantaf tutorialnya
akan saya coba ah....
makasih sob....

salam dari blogger jambi

omzen said...

mampir lagi kang, hehe requestnya dijawab.... thanks :) jangan lupa mampir buat baca artikel saya agar meningkat hehe

CahNdeso said...

Alhamdulillah...ilmu ane tambah lagi, Gan... terima kasih banget iyaaa..

vini vidi vucinic said...

Oh begitu caranya ya Sob. TQ 4 sharing. Ntar kapan2 dicoba....

soccer = sepak bola news said...

wah keren sob, boleh juga nih dicoba.... , tks sharing-nya sob

IF info said...

cakep sob postingannya... , thanks sgaringnya Gan

John Terro said...

eum ... gtu yah
saya baru tahu :D

M Faroz Turun Gunung said...

Boleh dicoba nih, mantab tenan infonya..tks sob

M Faroz Turun Gunung said...

Ada yang salah sob, step ke-1 sudah salah, seharusnya Bismillaah..

oh iya, tks bro..nanti kalau sudah turun gunung guwe mampir yah..

Ivan Axel said...

o'kew o'keww ntar di ujicoba .... ane pipiz dulu....


thx infonya..... srrrrrr......

cipto said...

Coba praktek n ijin copas ya..!!!

dimas said...

mas,ko gambar nya gak bisa jdi back ground???malah letaknya ada di atas buku tamu...mohon pencerahan

dimas said...

udah dicoba,tetep,mas bisa lihat hasilnya di blog saya..apa itu karena ukuran gambar terlalu besar??padahal udah saya perkecil

Dimas Anarky said...

udah diganti no repeat center tetep aja..
eh ni blog buku tamunya dimana?

Dimas Anarky said...

apa mungkin ada yang salah pas di langkah ke 6 ya...perlu di coba lagi

Raharjo Ismail said...

menarik juga artikelnya ini gan. ntar aku coba di blog aku. Trims ya..

Try 'Flick' said...

klo ganti backgroundnya, semua chat orang hilang gak sob??
pengen nyoba, tapi takut data-data cbox ane hilang... :D

Sharing Ilmu Pengetahuan said...

Keren sob tutorialnya

Eko said...

Wah ini nie yg aq cari2 beberapa minggu nie.... akhirnya dpt jg... thanks ya sob ijin ngopas..

gussalim said...

terima kasih infonya , semoga sukses selalu.

gussalim said...

mantap infonya, belajar berbagi kebaikan walau hanya setitik.

crowjagarichu said...

Tks gan..

WICAK REZPECTOR said...

walaopun artikel lama tapi boleh juga untuk dicoba

Blog lepas said...

MANGTAB BOSS ;P