Cara Membuat Gambar Post di Atas Judul Pada Blogger

First Image merupakan gambar paling pertama yang digunakan sebagai Thumbnail dalam sebuah artikel. First Image kebanyakan digunakan sebagai Cover dari sebuah artikel dengan ilustrasi yang sederhana agar mudah dipahami oleh pengunjungnya.

Pada saat ini banyak sekali para blogger yang meletakkan First Image ini di Atas Judul artikel blog mereka. Memang tidak ada yang terlalu spesial sekali disini tapi untuk mereka yang suka mempercantik blognya bisa dibilang "kalian harus coba ini".

Untuk kalian yang menggunakan platform WordPress itu merupakan hal mudah karena kalian hanya perlu mengubahnya di menu pengaturan. Tapi untuk yang menggunakan platform Blogger kalian pasti bingung agar Gambar tersebut bisa berada di Atas Judul.

Jadi disini kita akan gunakan javascript untuk mengatasi permasalahan tersebut. Kita langsung saja ke langkah-langkahnya.

1. Masuk Ke Menu Tema > Edit HTML.

2. Masukkan Kode CSS dibawah ini untuk pengaturan tampilan nya dan letakkan diatas ]]></b:skin> atau </style>.

.firstimage{
  background:#fff;
  padding-bottom:10px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  width:100%;
  height:auto
}

3. Cari kode <b:includable id='post' var='post'> atau <article class='post'> (Permudah dengan menggunakan CTRL+F).

4. Letakkan Kode di bawah ini tepat di bawah kode tersebut, Kemungkinan akan ada banyak jadi coba saja satu persatu.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.firstImageUrl'>
<img class='firstimage' expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){$(".separator:first").remove(),$(".post-body > img:first").remove()});
//]]>
</script>
</b:if></b:if>

5. Simpan Template Kalian.

Penutup

Semoga bermanfaat buat kalian semuanya dan terima kasih juga sudah berkunjung ke blog kecil ini. Jika ada hal yang ingin ditanyakan silakan berkomentar saja dibawah.

Faishal Hady

Seorang Blogger Pemula yang sedang belajar

Facebook

WhatsApp

Instagram

KLIK

DONASI VIA OVO Bantu berikan donasi untuk blog ini agar bisa tetap semangat memberikan artikel terbaru

Bagikan Artikel ini