Membuat Background Pada Cbox

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDYH-MBP_s4JaP_ZKxafro2hE94NFKBgUZFAFOqGJC2Af4YZpErN7G1VVmSNUWyEA8uWv3tPoXBYpzBQ68YJTcDS66uC4KkWlw6UYPq3X6oU9vWaOt16i58pMbvbwgnaWDo9IKcPRoU44S/) 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"

Related Posts by Categories

Posted in: Ilmu Blog