Cara Membuat Background Pada Cbox

Hello Pengunjung oktri Blog 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 tidak, pada cbox kita hanya perlu settingan warna (dijadiin transparan).
Ya sudah,,saya emang orangnya ga banyak basa-basi... Berikut caranya:
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="200" height="180" src="http://www4.cbox.ws/box/?boxid=3774938&amp;boxtag=7yvqhh&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#21E000 1px solid;" id="cboxmain"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www4.cbox.ws/box/?boxid=3774938&amp;boxtag=7yvqhh&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#21E000 1px solid;border-top:0px" id="cboxform"></iframe></div>
</div>
<!-- END CBOX -->

height= 180
height= 75
-------------+
Total= 255
Sedangkan lebar gambar tidak perlu dijumlahkan seperti diatas >> width=200

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://lh3.googleusercontent.com/-OA7Lq3E5Hnk/TenMyOZV4hI/AAAAAAAAAOY/yr5PvtgcHpU/s640/dragon_black.jpg) 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]

SEmoga bermanfaat!

Artikel Terkait: