Cari Artikel Blog Ini

Total Tayangan Laman

MENGGANTI BACKGROUND POSTINGAN DENGAN IMAGE

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.
Sebagai contoh, Coba perhatikan background postingan yang digunakan Tutorial Blogger EPG Studio (Mudah-mudahan ketika anda membaca artikel ini background postingan berupa image belum diganti)


LANGKAH-LANGKAHNYA

PERTAMA
  1. Siapkan sebuah image 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...

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
20 Comments

20 komentar :

demansour212 mengatakan...

thanks it's really helped me!

FRANCISCO P GUSMAO mengatakan...

waooo...u my best friend!!!! tank's

Aan blog mengatakan...

terimakasih insya Allah akan saya coba

Anang mengatakan...

yang di maksud disimpan pada notepat gmn ya, kok kurang faham, trim

Joddy Primadani mengatakan...

gimana cara edit gambarnya?

Fajrii_suckit mengatakan...

kalo pake gambar [http://i39.photobucket.com/albums/e159/normanski/players/ewualizer.gif]
koq gg jadi yah??

Riekha mengatakan...

terimakasih

melq mengatakan...

gan kalo bkin sdikit transtaran gmna ???
tx

Dimas yudha pratama mengatakan...

GAN PUNYA SAYA SETELAH SYA COBA KOK GAK BERHASIL
SUPER RIBET

Naufal mengatakan...

kalo untuk blogger modern gimana??

anak ganteng mengatakan...

bagaimana untuk membuat yang full background...bls ya mas bro ke blog ane...tanks ane tunggu

Sutopo mengatakan...

Terima kasih mamen...!
mantab postingnya..
langsung jadi nih...
Visit
http://operatingsystem1.blogspot.com

ibnoe.info mengatakan...

waduh ge mana ne sob...???, di blog saya ga ada code ini:

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


yang ada cuma kode ini:

.post {
background: #FFF;
float: left;
width: 590px;
margin: 0;
padding: 10px;

Ades Sambas mengatakan...

@ibnoe.infoItu dia kodenya, jadikan seperti ini :
.post {
background: #FFF url(http://img268.imageshack.us/img268/6805/bodybgiq.jpg?imgmax=100%) repeat-x fixed top center;
float: left;
width: 590px;
margin: 0;
padding: 10px;

Little Star mengatakan...

blognya keren :) aku uda nyoba, tp ga berhasil, gmn caranya sieh? ngek ngok bener ni aku

Jordan Vengeance mengatakan...

blog nya keren banget ^^ tolong koreksi juga dong blog saya ^^
jordanvengeance.blogspot.com
makasih ^^

Rian Akbary mengatakan...

mantap ,dicoba dulu nih sob

siapa-lo mengatakan...

Thanks Sob, coment back yah

pendidikanpusat mengatakan...

Bagus banget infonya yah...Makasih banyak bantuannya

Kayla S mengatakan...

saya sgt tertarik dengan template blog ini
sangat indah

cara mengganti background postingan

Poskan Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!