BACKGROUND GAMBAR PADA JUDUL POSTING

Kemarin sempat ada yang nanya ke saya lewat yahoo messenger, pertanyaannya begini, "mas, cara supaya di setiap judul postingan-nya ada background gambar bagaimana?". Sebenar-nya cara-nya sama saja dengan cara mengganti warna latar belakang templates atau dengan cara memasang gambar pada background templates, hanya saja peletakkan pada script CSS-nya yang berbeda. Kalau mau tau cara-nya, ikuti langkah-langkah sederhana ini:

1. Siapkan gambar background kira-kira 200pixel X 100pixel.

2. Upload gambar-nya ke hosting. Contoh-nya upload ke web photobucket.

3. Ambil link kode image-nya.

4. Dan taruh di script CSS.

5. Atur penempatan agar terlihat center atau pas/matching.

6. Simpan dan lihat hasil-nya.



Untuk langkah nomor 1-3 bila Anda belum bisa membuat gambar atau malas membuat-nya.. Coba pakai link di bawah ini sebagai pembelajaran:

http://illiweb.com/fa/subsilver/back_title_black.gif

Sekarang login ke blogger.com --> Layout --> Edit Html dan pasang link di atas, di script CSS seperti contoh di bawah ini:

/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em
padding-left:20px
}

.post {
margin:.5em 0 1.5em;

background:url('http://illiweb.com/fa/subsilver/back_title_black.gif?imgmax=200')repeat-x top left

border-bottom:1px dotted $bordercolor
padding-bottom:1.5em
padding-left:10px
padding-right:20px
}
.post h3 {
margin:.25em 0 0
padding:0 0 4px
padding-left:10px
font-size:140%
font-weight:normal
line-height:1.4em
color:$titlecolor
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block
text-decoration:none
color:$titlecolor
font-weight:normal
}

Pada script di atas, tulisan yang saya beri warna merah itu-lah penempatan lokasi link-nya. Sedangkan yang warna biru itu-lah pengaturan-nya. (Imgmax=200) berarti maksimal image itu sampai pada lebar 200pixel, repeat x top left (gambar diulang pada setiap postingan dengan ukuran yang sama yaitu 200pixel dan berada di atas sebelah kiri). Kalau gambar background-nya kurang pas, coba ubah-ubah saja ukuran imgmax=200 tadi (trial).


Semoga bermanfaat.

Related Posts by Categories