Menambahkan Image Pada Judul Postingan

Menambahkan Image Di Depan Judul Postingan. Mengotak-atik blog dalam rangka memperindah tampilan memang tidak ada habis-habisnya. Nah, pada postingan kali ini, kita akan mengotak-atik judul postingan yang tidak lain dalam rangka menambah estetika judul postingan tersebut. Jika menghendaki, kita dapat menambahkan image di depan judul postingan sehingga akan terlihat lebih menarik dan “hidup”. Simak tipsnya berikut ini.
Untuk menambahkan image di depan judul postingan, kita harus menyiapkan imagenya terlebih dahulu yang kemudian kita upload ke image hosting, seperti photobucket dan lain-lain baik yang gratis maupun yang berbayar.Jika sudah meng-upload-nya, maka untuk menampilkan image tersebut adalah dengan dengan format seperti di bawah ini.

<img src="URL_image_kita"/>

Sebagai contoh, katakanlah kita mempunyai alamat URL image di http://i269.photobucket.com/albums/jj46/irfankIlled/evil20dark20reaperlw4xs1.jpg maka untuk menampilkan image tersebut menjadi seperti di bawah ini.

<img src="http://i269.photobucket.com/albums/jj46/irfankIlled/evil20dark20reaperlw4xs1.jpg"/>

Oh, iya, bisa jadi ukuran image tersebut tidak sesuai dengan ukuran Judul Postingan, misalkan saja terlalu besar sehingga hasilnya kurang “matching”. Jika demikian kita dapat mengubahnya dengan menambahkan atribut width (untuk menetapkan lebar image dalam pixel) dan height (untuk menetapkan tinggi image dalam pixel). Selain itu, agar image tidak berborder, kita juga dapat menambahkan atribut border.

Berikut ini contoh untuk merubah ukuran image dan juga menghilangkan border di sekitar image tersebut.

Contoh gambar aslinya adalah seperti di bawah ini.

<img src="http://i269.photobucket.com/albums/jj46/irfankIlled/evil20dark20reaperlw4xs1.jpg" width="30" height="30" border="0"/>


Dan berikut ini hasilnya hasilnya menjadi lebih kecil sehingga lebih serasi dengan judul postingan, seperti di bawah ini



Langkah selanjutnya adalah sebagai berikut.

Pertama, login ke account blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML

Kedua, jangan lupa centangi “Expand Template Widget”

Ketiga, temukan kode berikut ini. Jika menggunakan Firefox, kita gunakan Ctrl + F untuk mempercepat pencarian kode tersebut.

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

Keempat, sisipkan kode html image (URL image) yang sudah kita siapkan sebelumnya pada kode di atas sehingga menjadi seperti di bawah ini.

<a expr:href='data:post.url'> <img src="http://i269.photobucket.com/albums/jj46/irfankIlled/evil20dark20reaperlw4xs1.jpg" width="30" height="30" border="0"/>
<data:post.title/></a>
<b:else/>

Kelima, simpan template

Keenam, refresh blog dan pastikan kita sudah mendapati image pada judul postingan.

Ketujuh, selesai