Home » » Cara Membuat Background Pada Cbox

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:

6 komentar:

  1. Keren.! Mas Oktri.!
    Kunjungi blogku yha., www.shichibukawa.blogspot.com.
    Makasih.

    BalasHapus
  2. @Shichibukawa
    terima kasih sudah berkomentar
    oke ditunggu kunjungan baliknya semoga terjalin silaturahmi antar blog

    BalasHapus
  3. thats great mas :)
    bisa dicoba :D
    itu chatbox berat gak ya mas kalo boleh tau?

    BalasHapus
  4. thanks for comment bro....
    ya sama az ma buku tamu laennya,ehhhe

    BalasHapus
  5. gx ngerty kk...
    code cbox nya ke manain /?/?????

    BalasHapus
  6. Kang oktri maksudnya gimana tuh? bingung saya kang -_-

    BalasHapus

Fivers

Selamat Datang Di OKTRI BLOG

Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...Selengkapnya tentang Tutorial Ini

Sekilas tentang penulis

Nama saya Oktri darmadi,saya seorang Mahasiswa S1 Teknik Informatika Di IBI DARMAJAYA Bandar Lampung.

Social Stuff

  • RSS
  • Twitter
  • Facebook
  • HOME
Oktri