Cara Menambahkan Gambar di Depan Judul Postingan Blog

Pada postingan kali ini, saya akan membahas tentang bagaimana cara memasang atau menambahkan gambar di depan judul postingan blog dengan gambar sendiri atau gambar-gambar yang lain. Baiklah sobat, tanpa berbicara panjang lebar lagi, langsung aja yuk liat contohnya berikut ini :

SEBELUM

SESUDAH

LIVE DEMO

Nah, cara pemasangan gambar di depan postingan tersebut adalah dengan mengotak atik dan mengganti kode template yang sudah ada sebelumnya dengan kode yang sudah saya siapkan di bawah ini beserta penjelasan lengkapnya. Namun, sebelum kita lanjut, perlu saya ingatkan kepada sobat, bahwa kode template berbeda-beda khususnya pada kode tag judul postingan, dimana beberapa template ada yang menggunakan tag <h2 class='post-title entry-title'> dan ada pula yang menggunakan tag <h3 class='post-title entry-title'> sebagai title postingan.

Untuk itu, pada kesempatan kali ini saya akan menjelaskan penambahan kode dari kedua tag title di atas sehingga sobat bisa menerapkannya pada blog sobat. Berikut caranya :

• Login ke Blogger » Template » Edit HTML » Proceed dan jangan lupa centang "Expand Template Widget"

1. Menerapkan pada tag title <h2 class='post-title entry-title'>

• Cari kode seperti di bawah ini :

<b:includable id='post' var='post'>

  <div class='post hentry'>

    <a expr:name='data:post.id'/>

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

      <h2 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'>

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

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

          <b:else/>

            <data:post.title/>

          </b:if>

        <b:else/>

          <data:post.title/>

        </b:if>

      </b:if>

      </h2>

    </b:if>

• Jika sudah ketemu, tambahkan kode di bawah ini tepat di atas tag <h2 class='post-title entry-title'> :

<table><tr>

<td class='ssybyposttitle'>

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRKztGIi0B62xzZFxKOZqj2nno2HC2MZvTCXPF5X9yKmSigPGg_7j_-H_2Gei6YIptM5BDO7cmMLJ7iIxrZoT_Y-eafDHqJbfix0ekt79IKZ-yf_0x-IhdioQCUEGDjquDMPSydECQen7L/s1600/headers.png'/>

</td>

<td>

Keterangan :

URL yang saya beri tanda dengan warna Biru di atas adalah gambar yang akan ditempatkan di depan judul postingan blog. Silahkan sobat ganti dengan URL foto yang sudah sobat upload.

• Selanjutnya, masukkan kode di bawah ini tepat di bawah tag penutup </h2>

</td></tr></table>

     <style>

       h2.post-title {

       margin: 0px !important;

       }

     </style>

• Jika semuanya sudah digabungkan, maka hasilnya akan jadi seperti ini :

<b:includable id='post' var='post'>

  <div class='post hentry'>

    <a expr:name='data:post.id'/>

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

       <table><tr>

         <td class='ssybyposttitle'>

            <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRKztGIi0B62xzZFxKOZqj2nno2HC2MZvTCXPF5X9yKmSigPGg_7j_-H_2Gei6YIptM5BDO7cmMLJ7iIxrZoT_Y-eafDHqJbfix0ekt79IKZ-yf_0x-IhdioQCUEGDjquDMPSydECQen7L/s1600/headers.png'/>

             </td>

            <td>

      <h2 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'>

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

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

          <b:else/>

            <data:post.title/>

          </b:if>

        <b:else/>

          <data:post.title/>

        </b:if>

      </b:if>

      </h2>

     </td></tr></table>

     <style>

       h2.post-title {

       margin: 0px !important;

       }

     </style>

    </b:if>

• Simpan template dan lihat hasilnya.

2. Menerapkan pada tag title <h3 class='post-title entry-title'>

• Cari kode seperti ini :

<b:includable id='post' var='post'>

  <div class='post hentry'>

    <a expr:name='data:post.id'/>

    <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'>

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

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

          <b:else/>

            <data:post.title/>

          </b:if>

        <b:else/>

          <data:post.title/>

        </b:if>

      </b:if>

      </h3>

    </b:if>

• Jika sudah dapat, tambahkan kode di bawah ini di atas tag <h3 class='post-title entry-title'> :

<table><tr>

<td class='ssybyposttitle'>

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRKztGIi0B62xzZFxKOZqj2nno2HC2MZvTCXPF5X9yKmSigPGg_7j_-H_2Gei6YIptM5BDO7cmMLJ7iIxrZoT_Y-eafDHqJbfix0ekt79IKZ-yf_0x-IhdioQCUEGDjquDMPSydECQen7L/s1600/headers.png'/>

</td>

<td>

Keterangan : URL yang berwarna Biru ganti dengan URL foto yang sudah sobat upload sebelumnya.

• Selanjutnya, masukkan kode di bawah ini tepat di bawah tag penutup </h3>

</td></tr></table>

     <style>

       h3.post-title {

       margin: 0px !important;

       }

     </style>

• Jika digabung, maka hasilnya akan jadi seperti ini :

<b:includable id='post' var='post'>

  <div class='post hentry'>

    <a expr:name='data:post.id'/>

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

       <table><tr>

         <td class='ssybyposttitle'>

            <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRKztGIi0B62xzZFxKOZqj2nno2HC2MZvTCXPF5X9yKmSigPGg_7j_-H_2Gei6YIptM5BDO7cmMLJ7iIxrZoT_Y-eafDHqJbfix0ekt79IKZ-yf_0x-IhdioQCUEGDjquDMPSydECQen7L/s1600/headers.png'/>

             </td>

            <td>

      <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'>

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

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

          <b:else/>

            <data:post.title/>

          </b:if>

        <b:else/>

          <data:post.title/>

        </b:if>

      </b:if>

      </h3>

     </td></tr></table>

     <style>

       h3.post-title {

       margin: 0px !important;

       }

     </style>

    </b:if>

• Save template.

 Semoga bermanfaat & salam bloggers...!!!