Cara Membuat Gambar Pertama (First Image) di Atas Judul Postingan

Memasang gambar pertama (first image) di atas judul postingan sepertinya sudah jadi trend template blog saat ini. Gambar pertama yang terdapat pada artikel akan berada di atas judul postingan.

Saya sendiri suka menempatkan gambar postingan di atas judul artikel, lebih rapi dan memiliki cover image yang terpisah dari gambar materi artikel.

Sayangnya, belum banyak template blog populer saat ini menggunakan first-image secara bawaan.

Untuk membuat gambar di atas judul artikel, kita harus mengedit atau menambahkan beberapa baris html, css dan javascript ke dalam template melalui Edit HTML.

Membuat First Image di Atas Judul Postingan

Cara membuat first image di artikel blog, bisa kamu terapkan di berbagai jenis template, seperti template VioMagz, LinkMagz, dan template lainnya.

Berikut langkah-langkah membuat gambar di atas judul artikel pada blog blogspot/blogger.

Membuat First Image pada VioMagz

Cara membuat gambar di atas judul atau first image pada template VioMagz juga bisa dilakukan atau dipasang pada template yang berbeda. Berikut langkah-langkahnya:

1. Masuk ke dahsboard blog
2. Pilih menu Tema dan klik Edit HTML
3. Cari kode seperti ini: <h1 class='post-title entry-title'>, gunakan CTRL + F untuk mempermudah pencarian. Biasanya terdapat beberapa kode, jika di VioMagz pilih kode yang kedua.
4. Letakkan kode berikut tepat di atas kode tersebut.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='coverImage'>
<b:if cond='data:post.firstImageUrl'>
<img class='firstimage' expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
<b:else/>
<img class='firstimage' expr:alt='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipG2oyeY2XPIh1NwwarwUiqmdCsXfMEQXtISUjl_M6NCZaEHRnhIzVcYg-ajWllVVe1m_Zi_Bi3oy3K7gW_ZcUH2oK-n0jGyi5_d3VAM1o8eKDOBAbY0uXiN5znQ5YXhY7GlEbXedReN0/s1600/no-image.jpg'/>
</b:if>
</div>
</b:if>

5. Selanjutnya, cari kode ]]></b:skin>, kemudian tambahkan CSS berikut tepat di atas kode tersebut.

.separator:nth-of-type(1){display:none;visibility:hidden}
img.firstimage{position:relative;min-width:-webkit-fill-available;height:auto;margin-bottom:20px}

6. Simpan Tema

Sampai di sini, harusnya gambar pertama sudah berada di atas judul artikel. Silahkan cek, apakah sudah berubah.

Membuat First Image pada LinkMagz

Jika kamu menggunakan template LinkMagz dan ingin membuat gambar pertama di atas judul postingan blogger, caranya sedikit berbeda terutama pada kode html dan letak penempatan kodenya.

Untuk membuat gambar pertama di atas judul postingan pada template LinkMagz, berikut langkah-langkahnya:

1. Masuk ke dahsboard blog

2. Pilih menu Tema dan klik Edit HTML

3. Cari kode seperti ini: <b:include cond='data:view.isHomepage' name='recentPostTitle'/>, gunakan CTRL + F untuk mempermudah pencarian. Biasanya terdapat beberapa kode, pilih kode yang kedua.

4. Letakkan kode berikut tepat di atas kode tersebut.

<b:if cond='data:blog.postImageUrl'><div class='coverImage'><b:if cond='data:post.firstImageUrl'><img class='firstimage' expr:alt='data:blog.pageName' expr:src='data:blog.postImageUrl' expr:title='data:blog.pageName'/><b:else/><img class='firstimage' expr:alt='data:blog.pageName' expr:src='data:blog.postImageUrl' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipG2oyeY2XPIh1NwwarwUiqmdCsXfMEQXtISUjl_M6NCZaEHRnhIzVcYg-ajWllVVe1m_Zi_Bi3oy3K7gW_ZcUH2oK-n0jGyi5_d3VAM1o8eKDOBAbY0uXiN5znQ5YXhY7GlEbXedReN0/s1600/no-image.jpg'/></b:if></div></b:if>

5. Selanjutnya, cari kode ]]></b:skin>, kemudian tambahkan CSS berikut tepat di atas kode tersebut.

.separator:nth-of-type(1){display:none;visibility:hidden}
img.firstimage{position:relative;min-width:-webkit-fill-available;height:auto;margin-bottom:20px}

6. Simpan Tema

Jika terjadi double image, gambar pertama sudah di atas judul artikel tapi tidak hilang di dalam postingan. Silahkan tambahkan kode javascript berikut tepat di atas kode </body>.

<script type='text/javascript'>
//<![CDATA[
document.querySelectorAll(".separator")[0].style.display= "none";
//]]>
</script>

Simpan Tema dan cek kembali postingan.

Catatan:
Pada template LingMagz, cara di atas akan menempatkan gambar pertama tepat di atas breadcrumb.

Demikian cara membuat gambar pertama (first image) di atas judul postingan yang bisa kamu pasang pada template VioMagz dan LinkMagz.

Tutorial ini juga bisa kamu coba pada template lain. Selamat mencoba.