CBOX dengan Background Gambar Kamu

Home » blogging » cbox » CBOX dengan Background Gambar Kamu

CBOX dengan Background Gambar Kamu

Dulu pernah posting membahas tentang bagaimana membuat smiley gue bangetzz di cbox kamu. Kita bisa memasukkan icon-icon smiley yang kita suka ke dalam setting cbox-nya.

Sekarang ada satu trik lagi yang bisa membuat cbox kamu tampak lebih semarak dan beda dengan yang lain. Lebih georgeous deh!!. Triknya yaitu dengan menambah gambar pada background standar cbox kamu.

Seperti yang dapat dilihat pada perbandingan kedua gambar di bawah ini :

gambar cbox standar

Dalam default setting cbox, background yang ditampilkan tidak memiliki gambar, hanya memunculkan warna pilihan kamu saja. Kini background tersebut bisa ditambah dengan gambar yang kamu suka. Seperti yang terlihat pada gambar di atas sebelah kanan atau di bagian sidebar blog ini, background-nya sudah diganti dengan gambar kupu-kupu.

Jadi unik kan? ;) CBOX kamu 'ga akan ada yang nyamain deh, dijamin :D. Ingin cbox-nya kayak gitu juga? Gampang, ikuti az langkah-langkahnya seperti berikut ini :

Pertama tentukan gambar yang ingin ditambahkan ke dalam cbox kamu. Kemudian sesuaikan lebar gambar dengan lebar kode cbox yang disimpan di blog kamu (biasanya seh di bagian sidebar). Untuk tingginya, itu terserah maunya seberapa panjang cboxnya (kode cboxnya bisa disesuaikan nanti). Setelah itu, save dan upload di server sendiri (misal: photobucket atau imageshack).

Kemudian login ke akun Blogger kamu. Klik LAYOUT/TAMPILAN blog yang ingin diubah kode sidebarnya. Lalu klik EDIT HTML. Sisipkan kode ini :
#cbox {<br />background: url(URL_GAMBAR_KAMU) no-repeat center;<br />}
di antara <b:skin><![CDATA[ dan ]]></b:skin>. URL_GAMBAR_KAMU-nya diganti dengan url gambar yang sudah di-upload pada langkah sebelumnya tadi, copy dan paste-kan. Klik SAVE TEMPLATE.

Sekarang login ke akun CBOX kamu. Klik tab Look&Feel pada bagian atas, pilih Edit Style, kemudian kosongkan bagian Main BG, Alt. BG, Field BGs, Button BG dan Form BG.

Balik lagi ke blogger kamu, masuk ke bagian PAGE ELEMENTS, lalu tambahkan kode :
<div id="cbox"> KODE CBOX KAMU </div>
di sebelum dan sesudah kode cbox kamu.