Gambar di judul postingan

Mungkin buat temen2 yang udah sering berkunjung di blog ini, pasrti ngeliat ada sesuatu yang beda dengan tampilan judul posting blog ini. Kalo dulu, judul postingan blog ini terlihat biasa - biasa saja. Tapi kali ini ada sebuah gambar buku kecil disamping judul postingan blog ini.

Hal ini, sengaja saya lakukan supaya judul postingan blog ini keliatan enak dilihat (Menurut saya...ga tau kalo menurut kalian. Hehehe...).

Masih belum jelas juga...?? berikut screenshootnya


Nah....buat temen yang ingin nyelipin gambar juga di judul postingannya, dan kebetulan ga tau caranya, silahkan ikuti langkah2nya seperti berikut :

1. Silahkan cari sebuah gambar, yang menurut kalian cocok untuk diselipin di judul postingan blog kalian, dan ukuran gambarnya ga boleh terlalu besar. ya...kalo saya pake yang 45px * 59px

2. Kalo udah ketemu, silahkan simpan gambar tersebut di tempat hostingan gambar yang biasa kalian pake.

3. Langkah selanjutnya, login di blogger lalu langsung saja masuk ke menu edit Html. Ga usah ngasih tanda centang pada kolom expand template widget

4. Cari kode dibawah ini :

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}


5. Hapus kode tersebut, lalu ganti dengan kode dibawah ini :

.post h3 {
margin:.25em 0 .5em;
padding:15px 0 15px 50px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
background:url(url gambar anda) no-repeat left center;
}


Jangan lupa untuk mengganti kata yang berwarna merah dengan url gambar kalian.

6. Kalo udah, klik dulu pratinjau. Kalo misalnya masih belum pas posisinya silahkan rubah ukuran paddingnya (disesuaikan).

7. Kalo udah pas silahkan save template kalian.

Comments :

0 komentar to “Gambar di judul postingan”

Posting Komentar