Artikel Terbaru :
Home » » Cara Mengganti Background Postingan Dengan Gambar

Cara Mengganti Background Postingan Dengan Gambar

Friday, November 9, 2012 | 11komentar

Cara Mengganti Background Postingan Dengan Gambar
Background post dari sebuah blog tidak hanya berupa warna yang kadang membosankan. Sebagai alternatif lain, anda dapat mengganti background post dengan image yang tentu harus disesuaikan dengan warna huruf pada postingan agar kehadiran image sebagai background tidak mengganggu tampilan huruf.

LANGKAH-LANGKAHNYA

PERTAMA
  1. Siapkan sebuah gambar yang ukurannya telah disesuaikan dengan lebar postingan blog anda serta memiliki tinggi minimal 800 px lebar 1700px. Gunakan Adobe Photoshop atau aplikasi lainnya untuk me-resize image.
  2. Upload image tersebut ke hosting penyimpanan image seperti Photobucket, Imageshack, Web Picasa atau hosting yang selama ini anda gunakan.
  3. Copy Url/alamat gambar yang anda upload tadi. Simpan dulu pada note pad.

KEDUA
  1. Masuk ke Blogger
  2. Klik Tab Rancangan bagian Edit HTML
  3. Cari kode seperti dibawah ini pada template blog anda

    .post {
    margin:.5em 0 1.5em;
    border-bottom:1px dotted $bordercolor;
    padding-bottom:1.5em;
    }


  4. Tambahkan kode untuk background seperti ini :

    background: url(http://img268.imageshack.us/img268/6805/bodybgiq.jpg?imgmax=100%) repeat-x fixed top center;


  5. Gabungkan kedua kode diatas sehingga menjadi seperti ini :

    .post {
    background: url(http://img268.imageshack.us/img268/6805/bodybgiq.jpg?imgmax=100%) repeat-x fixed top center;
    margin:.5em 0 1.5em;
    border-bottom:1px dotted $bordercolor;
    padding-bottom:1.5em;
    }


  6. Kode yang berwarna kuning http://img268.imageshack.us/img268/6805/bodybgiq.jpg merupakan Url/alamat image yang akan tampil sebagai background postingan. Ganti alamat gambar tersebut dengan alamat gambar yang anda upload tadi (yang disimpan pada note pad)
  7. Klik tombol Simpan
  8. Lihat background postingan anda sekarang.


Selamat mencoba, semoga bermanfaat...

SUMBER: epg-studio.blogspot.com
Share this article :

ARTIKEL TERKAIT:

11 comments:

  1. kok saya gk punya kode seperti itu??

    ReplyDelete
  2. karena semua template brbeda-beda maka cari aja persama'annya dengan mengetikan kode .post {

    semoga membantu :)

    ReplyDelete
  3. sudah saya ketik kode .post {
    tapi tetap tidak ada..
    sudah saya centang expnad tempalte widget pun tetap tidak ada
    mohon penjelasannya...

    ReplyDelete
  4. kalo begitu berarti kamu pernah meng otak atik atau meng kompres kode CSS nya,karena sepengetahuanku kode .post { ada di semua template,letaknya ada di bagian kode CSS, kalo benar akan susah mencarinya saya pun prnah mengalaminya, kalo mau cari template lihat di
    --> http://blogzafar.blogspot.com/2012/10/15-situs-penyedia-template-blog-gratis.html

    ReplyDelete
  5. artikelnya sangat menarik. izin copas di blog saya. mohon pencerahan jika saya dalam masalah dalam mengaplikasikannya di bolg saya.

    ReplyDelete
  6. Coba dulu yah Mbak, ditunggu kunjungan balik ^_^

    ReplyDelete
  7. terimakasih Mbak atas infonya. :)

    ReplyDelete

Silahkan tinggalkan komentar sobat , tapi mohon jangan Nyepam ya..! Komentar dengan menyertakan LINK / ANCHOR TEXT atau promosi produk tertentu akan saya hapus karena blog ini bukan tempat untuk mempromosikan produk yang dijual di blog anda.

 
Support : Copyright © 2011. Tips Trik Blog | Dan Cara Buat Website - All Rights Reserved
Template Modify by Siti Saleha
Proudly powered by Blogger| Thanks For Visiting