Cara membuat dan Menampilkan Gambar/Image di Judul Posting

Contoh bentuk Tampilan gambar/image yang menyertai judul posting dipadukan dengan marquee effects :

Judul Posting

Mungkinkah menampilkan gambar pada judul posting dan bisa terlihat setiap posting dilakukan ? Mungkin saja ! kenapa tidak ?! Yang kamu perlukan adalah : Cari atau buat dulu sebuah gambar dalam ukuran kecil (kira-kira ukuran tingginya berkisar 14pixel atau height=14px). Gambar ini bisa berupa gambar yang menampilkan identitas blog atau yang berisi hal yang menarik pembaca blog. Atau bisa juga berupa gambar animasi gif.

Bentuk judul posting nantinya akan seperti gambar di atas !

Langkah membuat Efek Bounce pada Judul Posting :

1. Login ke Blogger.
2. Lakukan pengamanan template. Caranya lihat di sini !
3. Tetap di Edit HTML.
4. KLIK Expand Template Widget.
5. Cari KODE :

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'><a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

6. Ganti KODE di atas dengan KODE di bawah :

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'><a expr:href='data:post.url'><data:post.title/>
<img src="https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/jquery/image-slider-w-description/images/NewPostAnima.gif" style="height:14px;width:auto;border:1px solid red;margin:2px 8px;"/>
</a><b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

7. Atau kamu juga bisa lakukan dengan cara :
Ganti KODE berikut :

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

Dengan :

<a expr:href='data:post.url'> 
<data:post.title/><img src="https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/jquery/image-slider-w-description/images/NewPostAnima.gif" style="height:14px;width:auto;border:1px solid red;margin:2px 8px;"/>
</a>

Keterangan/Catatan :

• Jangan lupa KLIK Simpan Template
• Untuk merubah posisi gambar supaya berada di depan Judul posting, pindah link gambar di depan KODE <data:post.title/>, sehingga bentuknya menjadi :

<a expr:href='data:post.url'><img src="https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/jquery/image-slider-w-description/images/NewPostAnima.gif" style="height:14px;width:auto;border:1px solid red;margin:2px 8px;"/><data:post.title/></a>

• Untuk menambah dengan efek marquee seperti contoh di atas, kamu bisa melihat caranya di posting sebelum ini !

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

» Happy Blogging - gubhugreyot «