Menyisipkan Gambar di Sebelah Judul Postingan

Mempercantik template Blog kita adalah suatu kewajiban dari para Blogger. Bagaimana tidak, dalam menambah pernak-pernik untuk mempercantik haruslah didahului dengan berbagai pertimbangan yang banyak. Tentu saja, jangan sampai hal itu malah menambah kacau template kita atau menambah berat beban dari loading time Blog kita. Kali ini sobat akan saya coba kasih tips atau bisa dikatakan tutorial tentang cara menyisipkan sebuah gambar kecil otomatis di sebelah judul postingan sobat. Tidak usah banyak basa-basi kita langsung saja ke TKP. Saya akan mencoba membantu sobat semampu saya.

Langkah pertama :

1. Carilah gambar yang sobat inginkan, sobat bisa mencarinya melalui search engine seperti google atau lainnya.
2. Gambar yang akan sobat pakai minimal memiliki ukuran sebesar 40 x 40 px. Jadi carilah/buatlah gambar dengan ukuran seperti yang saya jelaskan. Hal ini dikarenakan supaya gambar tersebut Fit atau sesuai dengan Judul posting sobat sekalian.
3. Upload gambar tersebut ke photobucket, Imgaeshack atau lainnya. Tapi saya rekomendasikan buat sobat supaya lebih baik upload gambar ke piccasa. Alasannya agar dibawah hosting yang sama yaitu google.
4. Setelah upload selesai kalian ambil direct url gambar tersebut (ambil alamat url gambar tersebut), biasanya code nya seperti dibawah ini :

http://i1182.photobucket.com/albums/x444/Dime01one/Coba2/result340x40px.jpg

Kemudian buat kode seperti di bawah ini:

<img align='left' height='50' width='50' src="http://i1182.photobucket.com/albums/x444/Dime01one/Coba2/result340x40px.jpg" ></img><br/>

Teks yang berwarna merah diganti dengan url photo sobat. Simpan dulu di notepad.

Kemudian seperti biasa masuk ke blog sobat.
Pilih Rancangan >> pilih Edit HTML
Beri tanda centang pada Expand Template Widget
Cari Kode seperti di bawah ini (untuk mempermudah pencarian tekan ctrl+f) :

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<img align='left' height='50' width='50' src="http://i1182.photobucket.com/albums/x444/Dime01one/Coba2/result340x40px.jpg" ></img><br/>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>

Sisipkan code yang tadi dibuat di antara kode di atas posisinya seperti yang terlihat pada teks yang berwarna merah tersebut.
Perhatikan juga spasinya , karena ini sangat berpengaruh.
Klik pratinjau untuk melihat tinjauan terlebih dahulu.
Setelah itu klik SIMPAN TEMPLATE.
Lihat hasilnya.