Mengganti Background Post Blog

Halo Bloger Mania! Dulu sekali Zokufo Tutorial pernah menemukan dan mengeshare cara Mengganti Background Blog dan baru saja Zokufo Tutorial menemukan cara Mengganti Background Post Blog dari teman satu kelas Zokufo Tutorial (ownernya). 

Sama halnya dengan Mengganti Background Blog, dalam Mengganti Background Post Blog bisa dilakukan dengan mengganti warnanya atau juga dengan menggantinya dengan gambar. Tentunya bukan sembarang warna dan bukan sembarang gambar. Background pengganti harus disesuaikan dengan skin lainnya seperti background sidebar, warna font, dsb. Jadi pilihlah warna/gambar background pengganti dengan bijak. Jangan hanya mementingkan bagusnya menurut anda. Pikirkan apakah nanti bisa cepat dimuat. Atau bagaimana baiknya anda juga bisa menanyakan kepada teman anda. But! Kali ini Zokufo Tutorial akan memberitahukan kepada anda cara menggantinya dengan Gambar.

Lalu Bagaimana Caranya? Okay mari kita mulai!

Persiapan

• Siapkan Gambar yang Lebarnya sudah disesuaikan dengan lebar halaman posting anda serta yang memiliki Tinggi minimal 800 px. (Gunakan Software seperti Adobe Potoshop, dsb untuk melakukan ReSize)
• Upload image ke Photobucket, imageshack, webpicasa, atau tempat lain (facebook juga bisa).
• Copy dan Paste Url gambar anda ke NotePad.

Langkah Utama

• Login Ke Akun Blogger Anda.
• Klik Template dan Klik Edit HTML
• Cari kode yang mirip dengan kode berikut menggukanan F3

.post {

margin:.5em 0 1.5em;

border-bottom:1px dotted $bordercolor;

padding-bottom:1.5em;

}

• Tambahkan Kode Background tepat dibawah kode .post { 

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirnHyavxOA4NA2bFaa6z989sKcBMJbBK_lYuFRJCxKDw3kZr2dEtT9I-i7yYX3AAy7catERrG3dQpzyEJ4HhQqD8gKW5dkzo6EaxuH6vuUPpc1dZVQQxJA5klfjWQNzk_M4OlKtMBY9fQ/s320/Untitled.png) repeat-x fixed top center;

• Dan nantinya akan menjadi seperti ini.

.post {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirnHyavxOA4NA2bFaa6z989sKcBMJbBK_lYuFRJCxKDw3kZr2dEtT9I-i7yYX3AAy7catERrG3dQpzyEJ4HhQqD8gKW5dkzo6EaxuH6vuUPpc1dZVQQxJA5klfjWQNzk_M4OlKtMBY9fQ/s320/Untitled.png) repeat-x fixed top center;

margin:.5em 0 1.5em;

border-bottom:1px dotted $bordercolor;

padding-bottom:1.5em;

}

• Kode yang berwarna merah ini -->  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirnHyavxOA4NA2bFaa6z989sKcBMJbBK_lYuFRJCxKDw3kZr2dEtT9I-i7yYX3AAy7catERrG3dQpzyEJ4HhQqD8gKW5dkzo6EaxuH6vuUPpc1dZVQQxJA5klfjWQNzk_M4OlKtMBY9fQ/s320/Untitled.png, adalah Url Gambar yang anda letakkan di Notepad pada langkah awal.
• Selesai. Klik Save (ada baiknya jika di preview terlebih dahulu)

Selamat Mencoba! ^_^

 Sumber Kode