Tutorial Cara Menambahkan Gambar Pada Judul Postingan Pada Blog 2017

 

Tampilan belog yang indah, rapi, dan unik menjadi kewajiban seorang bloger untuk menciptakan reting pengunjung tinggi. Bagi anda yang suka menghiasi Blog dengan berbagai image, sekarang andapun dapat menampilkan image tersebut dalam judul postingan. Ada beberapa langkah yang harus anda lakukan, silahkan anda simak dan anda praktekan jika berminat dan kalau tidak, jadikanlah sebagai pengetahuan anda, siapa tahu kedepan pikiran anda berubah.

Langkah pertama

Siapkanlah sebuah image yang ingin anda tampilkan pada setiap judul postingan. Agar lebih menarik pilihah image dalam bentuk file gif, sehingga penampilannya akan lebih hidup.

Langkah kedua

Upload image tersebut pada situs yang melayani penyimpanan image, misalnya : http://www.Photobucket.com atau situs lainnya yang memiliki fungsi sama. 

Setelah proses upload selesai, copy alamat URL dari image tadi.

Langkah ketiga

Sekarang saya anggap anda telah memiliki image adress/URL dari sebuah image.

Contoh :

http://i708.photobucket.com/albums/ww86/andiskapati/tweetybird.gif"

Agar alamat gambar diatas bisa tampil pada blog, tambahkanlah kode dibawah ini :

<img src="URL image"></img>

Kode tersebut akan menjadi seperti ini :

<img src="http://i708.photobucket.com/albums/ww86/andiskapati/tweetybird.gif"></img>

Kode diatas akan terlihat seperti ini (dalam ukuran sebenarnya) :

Sesuaikan ukuran gambar tersebut dengan ukuran yang anda inginkan dengan menambah kode width="..." untuk lebar gambar, height="..."untuk tinggi gambar dan border="..." untuk lis (garis bingkai) gambar.

Kode-kode tadi jika dirangkaikan akan menjadi seperti ini :

<img border="0" widht="35" src="http://i708.photobucket.com/albums/ww86/andiskapati/tweetybird.gif" height="35"></img>

Gambar akan berubah seperti ini :

Langkah keempat

1. Login ke Blogger dengan ID anda.

2. Pilih Rancangan.

3. Pilih Edit HTML.

4. Back Up template terlebuh dahulu untuk menjaga jika terjadi kegagalan.

Cari kode ini:

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

pada template anda.
Pasang kode image tadi diantara kedua kode diatas, seperti ini :

<a expr:href='data:post.url'>pasang kode image disini<data:post.title/></a>

<b:else/>

Jika kita rangkaikan, kodenya akan menjadi seperti ini

<a expr:href='data:post.url'><img border="0" widht="35" src="http://i708.photobucket.com/albums/ww86/andiskapati/tweetybird.gif" height="35"></img><data:post.title/></a>

<b:else/>

5. Klik tombol Preview untuk melihat perubahan sebelum disimpan.

6. Klik tombol Simpan Template, jika telah dilihat hasilnya.

7. Selesai