Cara Menampilkan First Image Artikel Diatas Judul

Cara Menampilkan First Image Artikel Diatas Judul - Menampilkan first image (gambar pertama) artikel diatas judul belum dimiliki oleh platform blooger, sehingga bila ingin tampilan postingan artikel lebih menarik seperti pada Wordpress, kita harus melakukan edit coding HTML sendiri.

Namun kalian tidak perlu bingung untuk membuat script codingnya, karena kali ini Blog Butta Toa akan memberikan tutorial dan script coding, agar kalian juga bisa menempatkan gambar diatas judul artikel pada blog kalian layaknya platform Wordpress.

Sebelumnya Admin telah membagikan tutorial "cara memberikan efek pada gambar postingan👀" dengan menggunakan template VioMagz v4.7.0 sebagai sample (contoh) seperti template yang digunakan pada Blog Butta Toa ini.

Namun, bagi kalian yang memiliki template yang berbeda juga dapat menggunakan script coding yang saya berikan nanti, tetapi harus tetap memperhatikan beberapa kode script yang mungkin saja berbeda dengan template VioMagz.

Beberapa template yang telah di ujikan selain VioMagz menggunakan script coding menampilkan first image artikel diatas judul ini seperti LinkMagz, JetTheme dan BuzzSpot. Yang mempunyai template yang lain dan ingin mencoba script ini namun mengalami masalah silahkan berkomentar atau bisa mengirim pesan melalui form kontak.

Langkah-langkah menampilkan first image artikel dan menempatkannya diatas judul artikel sebagai berikut:

1. Tambahkan scrit dibawah dan tempatkan diatas/sebelum ]]></b:skin>

/* First Image */
.img-post {
    width:100%;
    height:auto;
    margin:0 auto;
    padding:0;
    border-radius:10px;
    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. Cari kode <div class='post-outer'> yang berdekatan dengan kode <b:include data='post' name='post'/>. Untuk template VioMagz, kalian akan mendapatkan 3 (tiga) kode dan pilih kode yang kedua lalu masukkan script kode dibawah ini dan letakkan diantara (ditengah) kedua kode tersebut diatas.

<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. Lalu tambahkan kode script dibawah dan letakkan diatas/sebelum </body>.

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

Menampilkan first image diatas judul artikel untuk template yang lain selain VioMagz hanya berbeda pada cara yang kedua saja, karena kadang setiap developer template menggunakan kode yang berbeda. Bila ingin tahu cara menampilkan first image ke atas judul artikel ini dalam bentuk video, silahkan kunjungi Butta Toa Youtube Channel👀.

Jika mengerti tentang coding HTML, kalian cukup melakukan inspect elemen dan mencari kode judul artikel dan mengubahnya melalui edit HTML template. Semoga artikel kali ini bermanfaat, Wassalam.

Share :