Menambahkan Gambar Pada Judul Artikel

Kalau kalian berkunjung ke blog pak guru yang ini atau gambar di bawah ini, kalian lihat judul artikelnya ada gambar pulpen kan ( ya iya lah Pak Guru, semua orang juga tahu itu pulpen).

Sekarang lihat gambar dibawah ini. Judul artikelnya Polos tanpa gambar.

Dari kedua gambar diatas, mana yang cantik menurut kalian? pasti judul artikel yang ada image atau gambarnya nya kan, berarti selera kalian sama dengan saya.

Kalau mau pasang gambar di judul artikel seperti di gambar pertama, silakan baca caranya..ocreeeeeee.

Untuk tentang menambahkan gambar/image di judul artikel, Pak Guru membagi dalam 2 tahap;

A. Mengupload Image.

1. Hal pertama yang harus disiapkan adalah gambar yang akan digunakan. Kalian bisa cari ratusan gambar di internet dan tinggal goggling atau klik disini untuk melihat beberapa sample.
   
2. Setelah punya gambarnya, upload gambar tersebut ke tempat penyimpanan gambar seperti; photobucket untuk mendapatkan image link code dari gambar tersebut.
3. Setelah kita upload ke photobucket, ambil kode URL address nya atau image link codenya, misal kodenya adalah

http://i285.photobucket.com/albums/ll80/edisamsuri22/pen.jpg

4. Selanjutnya rubah kode di atas menjadi seperti di bawah ini

<img src="http://i285.photobucket.com/albums/ll80/edisamsuri22/pen.jpg"></img>

5.Ingat bahwa image link code itu adalah untuk gambar yang masih asli, maksudnya kalau kita langsung pasang di blog kita, maka gambar akan kebesaran dan tidak seusai dengan ukuran judul artikel. Makanya kita harus menyesuaikan ukuran gambar dengan judul artikel; seperti di blog pak guru ini, dimana ukuran gambar pas dengan ukuran artikel. Caranya, kita harus menambahkan kode width, hight dan border pada kode diatas. seperti dibawah ini;

<img src="http://i285.photobucket.com/albums/ll80/edisamsuri22/pen.jpg" width="40" hight="40" border="0"> </img>

Sehingga gambar yang awalnya seperti ini:

Menjadi kecil seperti ini:

B. Menambahkan image link code diatas (Step A No. 5) ke template blogspot kita.
1. Log in ke blogger
2. Klik Layouts di Menu Dashboard
3. Klik Edit HTML
4. Beri tanda pada expand widget Template dan Back up template kalian buat jaga-jaga kalau error.
5. Cari kode di bawah ini. (gunakan CTRL + F untuk memudahkan)

<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>

6. Letakan image link code diantara <a expr:href='data:post.url'> dan <data:post.title/></a>
Sehingga kodenya jadi seperti dibawah ini:

<a expr:href='data:post.url'> <img src="http://i285.photobucket.com/albums/ll80/edisamsuri22/pen.jpg" width="40" hight="40" border="0"> </img> &nbsp;&nbsp;<data:post.title/></a>
<b:else/>

Penambahan kode    untuk memberi jarak antara gambar dan judul postingan.

7. Selanjutnya Klik Save Template

8. Silakan lihat hasilnya

Thanks Kang Rohman atas ilmunya.