Cara Membuat Cbox Transparan

Pada postingan kali ini saya akan share bagaimana cara membuat background pada cbox seperti yang terlihat pada Cbox saya / lihat screenshot disamping. 

Awalnya saya mengira itu adalah fasilitas dari cbox, ternyata pada cbox kita hanya perlu settingan warna (dijadiin transparan). Dan Hasilnya Bisa Liat Di Cbox saya

Jika Anda Tertarik Silahkan Ikuti Langka Langka Berikut  :

1. login pada Cbox
2. Pilih >>Look & Fell >>Colours & fonts

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

Klik disini untuk melihat gambar

4. Setelah diatur warnanya klik "Apply"








5. 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
6. Setelah Gambar dipersiapkan silahkan upload pada tempat hosting image seperti Picasa atau Photobucket dll.

7. Login Blogger pilih >>Rancangan >>Elemen Laman, dan tambahkan gadget HTML/Java Script

8. Copas kode berikut :

<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirmDpQBMZum0oq6e_keS5klBCwWNZO6TjLwrPcwZ4SHxcBOF-OUr1_zyEASNj4k_sQvJcby_KukHFMWB3pTO_Qr9CyqgKCHcetC1FSt95bcSvV915wAQzDSiOAW5qEMw4wneE3clueL5vg/s1600/Zacky+Bee7+-Sambaran+Petir.gif) no-repeat center;">

Kode Cbox Sobat Disini

</div>

Warna biru ganti dengan URL image sobat yang telah diupload

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

Tolong dibaca nih gan !

Kamu sedang membaca artikel tentang Cara Membuat Cbox Transparan dan kamu bisa menemukan artikel Cara Membuat Cbox Transparan ini dengan url http://zackybee7.blogspot.com/2012/05/cara-membuat-cbox-transparan.html, kamu boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Cbox Transparan ini sangat bermanfaat bagi banyak orang, namun jangan lupa untuk meletakkan link Cara Membuat Cbox Transparan sebagai sumbernya.

Artikel terkait :