Monday, 9 April 2012

Cara Menambah image pada judul postingan

MENAMBAH IMAGE PADA JUDUL POSTINGAN

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 gift, sehingga penampilannya akan lebih hidup.


Langkah kedua


Uploadlah image tersebut pada situs yang melayani penyimpanan image dan kemudian upload
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 :





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


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



Kode tersebut akan menjadi seperti ini :





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 :





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.
  5. Cari kode ini:
    <a expr:href='data:post.url'><data:post.title/></a>
    <b:else/>

    pada template anda.
  6. 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/>
  7. Jika kita rangkaikan, kodenya akan menjadi seperti ini


    <a expr:href='data:post.url'><img border="0" widht="35" src="https://lh4.googleusercontent.com/_1j80TgNqd_8/TZxbQ_moYjI/AAAAAAAACUo/HcbuzpZd_O0/tweetybird.gif" height="35"></img><data:post.title/></a>
    <b:else/>
  8. Klik tombol Preview untuk melihat perubahan sebelum disimpan.
  9. Klik tombol Simpan Template, jika telah dilihat hasilnya.
  10. Selesai