Cari Artikel Blog Ini

Total Tayangan Halaman

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, misalnya : http://www.Photobucket.com
atau situs lainnya yang memiliki fungsi sama. Jika anda belum tahu cara upload file, lihat postingan Cara Membuat Slide Show.
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 :


https://lh4.googleusercontent.com/_1j80TgNqd_8/TZxbQ_moYjI/AAAAAAAACUo/HcbuzpZd_O0/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="https://lh4.googleusercontent.com/_1j80TgNqd_8/TZxbQ_moYjI/AAAAAAAACUo/HcbuzpZd_O0/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="https://lh4.googleusercontent.com/_1j80TgNqd_8/TZxbQ_moYjI/AAAAAAAACUo/HcbuzpZd_O0/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.
  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


Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
6 Comments

6 komentar :

kank ripay mengatakan...

wah.. sangat membantu ni.. makasih mas.. ouw ya.. makasih dah maen ke http://www.luragung.com

Kurniadi Bulhani mengatakan...

mas
'jugul" diubah ya..!!!menambah image pada judul postingan.makasih komentarnyaa...aku tunggu kunjungannya,,,,

Kurniadi Bulhani mengatakan...

makaih kunjungannya...katanya bblogku gak ada yang salah/lancar-lancar aja tuh...maaf ya aku gak bisa buat yg terbaik.....

Blog GABUS mengatakan...

Bagus nih... dicoba ah,....

FAuzan NR [ fhom.blogspot.com ]

vicode mengatakan...

makasi tipX,,,,

sangat membantu

vicodebryan mengatakan...

makasi tipX,,,,

sangat membantu

Posting Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!