Cara Membuat Gambar Diatas Judul Postingan (First Image)

Pada Platform wordpress dan website yang lain, fitur ini hanyalah fitur yang biasa dan sudah menjadi set default postingan, namun beda halnya dengan blogger, untuk menampilkan first/cover image pada pada halaman posting di posisi top atau posisi paling atas belum tersedia.

Fitur ini digunakan untuk memindahkan gambar pertama dalam postingan ke atas judul artikel, jadi dalam artikel tersebut, yang muncul sebagai gambar pertama adalah gambar yang kedua. Perlu tidaknya fitur ini tergantung dari selera masing-masing.

Kali ini Admin akan membagikan cara menempatkan gambar pertama dalam postingan ke atas judul artikel yang dapat digunakan pada template JetTheme, VioMagz dan Linkmagz terbaru. Bagi Sobat SD yang ingin menggunakan fitur ini, silahkan ikuti cara berikut ini:

A. Penggunaan Pada Template JetTheme

Untuk pengguna template JetTheme seperti Admin ikuti langkah-langkah berikut:

1. Tambahkan script dibawah ini, diatas/sebelum ]]></b:skin>

/* First Image */
.img-post {
    width:100%;
    height:auto;
    margin:0 auto;
    padding:0;
    margin-bottom:15px;
    position:center;
}
.img-post img {
    width:100%;
    max-width:100%;
    height:auto;
    max-height:405px;
    margin:0;
}
#post-body .separator:nth-child(1) {display:none}

2. Masukkan script dibawah ini diantara kode <b:include data='post' name='JetBreadcrumbs'/> dengan <b:include data='post' name='JetPost'/>.

<b:if cond='data:view.isPost'><div class='img-post'>
<img class='first-image' expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl,675)' expr:title='data:post.title'/>
</div></b:if>

3. Masukkan script dibawah ini diatas/sebelum </body>

<script>
//<![CDATA[
$(function(){$(".separator:first").remove(),$(".post-body > img:first").remove()});
//]]>
</script>

B. Penggunaan Pada Template VioMagz dan LinkMagz Terbaru

Untuk Sobat SD pengguna template VioMagz dan LinkMagz, ikuti langkah-langkah berikut:

1. Tambahkan script dibawah ini, diatas/sebelum ]]></b:skin>

/* First Image */
.img-post {
    width:100%;
    height:auto;
    margin:0 auto;
    padding:0;
    margin-bottom:15px;
    position:relative;
}
.img-post img {
    width:100%;
    max-width:100%;
    height:auto;
    max-height:405px;
    margin:0;
}
.post-body .separator:nth-child(1) {display:none}

2. Untuk pengguna Viomagz, masukkan script dibawah ini diantara kode <div class='post-outer'> dengan <b:include data='post' name='post'/>. Sedangkan untuk pengguna template LinkMagz masukkan script dibawah ini diantara kode <div class='post-content'> dengan <b:include data='post' name='post'/>.

{catatan : jika Sobat SD mencari dengan kata kunci <b:include data='post' name='post'/>, terdapat 3 (tiga) hasil yang ditemukan. Pilih hasil yang ke 2 (dua)}

<b:if cond='data:view.isPost'><div class='img-post'>
<img class='first-image' expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl,675)' expr:title='data:post.title'/>
</div></b:if>

3. Masukkan script dibawah ini diatas/sebelum </body>

<script>
//<![CDATA[
$(function(){$(".separator:first").remove(),$(".post-body > img:first").remove()});
//]]>
</script>

Catatan Penting !!!. Sebelumnya fitur diatas akan berfungsi bila sudah memasang script jQuery. Jika belum pasang terlebih dahulu jQuery dibagian bawah <head>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>

Untuk tampilan pada template JetTheme lihat diartikel ini, sementara untuk template VioMagz klik link demo dibawah. Semoga bermanfaat buat Sobat SD semua, Wassalam.

Demo Disini

Location:

2 comments for "Cara Membuat Gambar Diatas Judul Postingan (First Image)"

Wuxia IndonesiaFebruary 9, 2022 at 3:56 PM
apakah ada solusi untuk gambar yang muncul 2x? (muncul diatas judul dan dibawah daftar isi).
contohnya :
https://atumiwa.blogspot.com/2022/02/top-18-tv-reality-show-franchise-paling.html

jika saya buat halaman baru tanpa ada Heading H2, atau H3 , kemudian menghapus div class separator sih tidak ada masalah cuma muncul sekali gambarnya.