Cara Mudah Pasang Icon Gambar Disamping Judul Artikel

Pada kesempatan kali ini saya akan bahas sebuah trik yang saya dapat dari pengalaman saya ketika sedang googling Dan tentunya juga berkat bimbingan dari master-master blogger yang dengan baik hati membagikan ilmunya.

Trik ini cukup menarik dan sangat mudah dalam penerapannya, sebagai contohnya lihat di foto berikut :

Langsung saja saya jelaskan Cara mudah pasang icon gambar disamping judul artikel

Log in ke akun blogger sobat.

Klik rancangan --> Edit HTML --> centang kotak expand widget template.

Cari kode dibawah ini.

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

Jika ditemplate sobat ditemukan ada dua atau tiga kode seperti yang di atas, maka pilihlah yang paling dekat dengan kode <div class='post-header-line-1'/>. Sebagai contoh perhatikan kode dari template saya ini :

          <h1 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>
          </h1>
    </b:if>

        <div class='post-header'>
        <div class='post-header-line-1'/>

Bagi atau pisahkan kedua kode tersebut sehingga menjadi seperti berikut.

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

Masukkan URL gambar sobat di antara kedua kode tersebut. Maka hasilnya akan seperti berikut.

<a expr:href='data:post.url'>
<img src="LINK ICON GAMBAR" width="20" hight="20" border="0"></img>
<data:post.title/></a>

Tulisan berwarna merah bisa sobat ganti dengan URL gambar sobat.

Maka hasilnya akan seperti ini :

          <h1 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'>
              <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghSf6T5gCqlUSjM5S3GwYpBsf8O9u51dAvSDBpV25hJby6iiMfzqOZh4OxzDOBq5wpop3HD7Zx54CsWDUjuosTWYEjCpZVUDH9vyPRH0eQoAmxJqmAM0KNgzMr8E3YDy91du4_mnPViSs/s1600/Aliy+Faizal.jpg" width="20" hight="20" border="0"></img>
              <data:post.title/></a>
            <b:else/>
              <data:post.title/>
            </b:if>
         </b:if>
          </h1>
    </b:if>

        <div class='post-header'>
        <div class='post-header-line-1'/>

Klik Save dan lihat hasilnya di artikel sobat.

Demikianlah saja Cara Mudah Pasang Icon Gambar Disamping Judul Artikel ini semoga dapat dimengerti dan bermanfaat....