Jan 24, 2012

Cara Memasang Icon di Depan Judul Postingan Blog

Icon/Gambar di depan judul posting blog dapat menambah daya tarik. Icon tersebut juga dapat memberikan kesan tampilan judul posting yang indah dan dapat memberikan perwakilan akan arti penting judul posting tersebut. 

So, bagaimana cara memasang icon/gambar di depan posting Blogger/Blogspot?

1. Masuk ke dashboard Design > Edit HTML/template.
2. Klik/centang "Expand Widget Templates".
3. Cari kode/tag berikut:
    <b:if cond='data:post.url'>

4. Kemudian lihat selengkapnya hingga bagian tag-tag berikut:

    <b:if cond='data:post.url'>

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

    <b:else/>

    <data:post.title/>

    </b:if>

Tag-tag diatas adalah yang mengatur bagian judul posting, baik url maupun isi judul (title) posting.

5. Copy kode HTML-gambar di bawah ini:

    <img src="URL-GAMBAR/ICON" style="border:0;padding:0;margin-right:10px" />

6. Letakkan/sisipkan kode di antara <a expr:href='data:post.url'> dan <data:post.title/>.

Note: 
a) Setiap template memiliki aturan CSS posisi dan tampilan gambar di dalam posting yang berbeda-beda; pada umumnya dalam hal bordermargin dan padding. Hasilnya, bisa saja gambar tidak sejajar dengan judul.
Anda dapat mengubah nilai 10 pada margin-right untuk menentukan jarak antara gambar/icon dengan judul posting. Tambahkan pula styling yang lain jika dibutuhkan.

b) Sebelum memasukkan url gambar dan seluruh tag gambar di dalam template, sesuaikan dahulu ukuran gambar dengan judul posting, baik dalam hal pemilihan warna icon maupun tinggi dan lebar icon. Edit gambar terlebih dahulu sebelum diupload. Hal ini ditujukan agar gambar memiliki kesesuaian dengan judul posting dan. Jangan sampai gambar terlalu besar/kecil.

7.Setelah semua beres, masukkan tag HTML gambar seperti cara yang telah ditunjukkan di atas. Contoh:

    <b:if cond='data:post.url'>

    <a expr:href='data:post.url'><img src="URL-GAMBAR/ICON" style="border:0;padding:0;margin-right:10px" /><data:post.title/></a>

    <b:else/>

    <data:post.title/>

    </b:if>
 8. Preview terlebih dahulu, jika sudah beres, save template. Jika berhasil, akan terlihat seperti ini klik

Have a nice blogging!
--------------------------------------------------------------------------------------
Source : Buka Rahasia 
Comments
2 Comments

2 comments:

  1. Ma kasih ilmunya ya Jie',.... aq yakin sangat manfaat untuk orang lain....

    ReplyDelete
    Replies
    1. sama-sama mbk.. senang liat blognya mbk..
      makin cantik!
      apalagi isinya lebih bermakna sekarang :)

      Delete

Berkicau

Community