Cara Merapikan Agar Image di Postingan Blog Otomatis Di Atas

First image atau gambar pertama adalah sebuah gambar di atas artikel yang mengawali sebuah artikel. Dengan adanya first image ini menurut saya membuat artikel kita lebih menarik dan membuat pengunjung lebih bersemangat untuk membaca artikel, karena telah melihat gambar yang menarik sebelum membaca artikel.

Banyak para blogger yang memasang first image pada blognya dan salah satunya adalah blog BangOpit.id ini sendiri, pasti ketika berkunjung ke blog ataupun website pernah melihat yang namanya first image. Untuk membuat first image ini lumayan cukup mudah jika kamu membaca tutorial saya dengan seksama dan jika bingung bisa menghubungi saya atau berkomentar. Berikut tutorialnya!

Cara Membuat First Image di Blog
1. Buka dashboard blogger kamu.
2. Pilih menu Tema > Edit HTML, lalu cari kode <h1 class='post-title entry-title' itemprop='name headline'>.
3. Di bawah kode tadi carilah kode <b:else/> yang berdekatan dengan kode <h1 class='post-title entry-title' itemprop='name headline'>.
4. Lalu tempelkan kode di bawah, tepat di bawah kode <b:else/> tadi.

INTINYA CARI KODE TITLE (JUDUL POSTINGAN)

<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/AVvXsEjAmbUrCm1gX3ckLjmTL5oZh8CyKeq1Mrav1vKC_aEKh7iEauTD73ALKwJiPl4_YXgkvEdxF1XWxzjfyO8GUh3Kca9vXyEFj8X4ygE4Kbb61rct6l0TrMwmBwYMr7EdAW3oa7pLzAbg6n4/s320/f1744f4d-3425-4159-ab80-4c9bb2c5707c.jpg'/>
</b:if>
</div>
</b:if>

Url yang berwarna biru pada script di atas ganti dengan url gambar milik kamu. Mungkin kamu perlu sedikit bereksperimen untuk mengedit peletakan kode di atas agar sesuai selera kamu. Selamat bereksperimen Ya!

5. Tempel kode di bawah, tepat di atas kode </style>.

.post img.firstimage {
       width:100%;
       height:auto;
       max-width:100%;
   }
.post-body .separator:nth-child(1) {
       display:none;
   }

6. Agar gambar pada artikel kamu tidak ganda atau tampil sebanyak dua kali, tempel kode di bawah, tepat di atas kode </body>.

<script type='text/javascript'>
//<![CDATA[
$(function() {
   $(".separator:first").remove();
   $(".tr-caption-container:first").remove();
      $(".post-body > img:first").remove();
                      });
//]]>
</script>

7. Simpan Tema dan lihat hasilnya.

*******************************************

Cara Membuat First Image pada Template Viomagz
1. Bagi kamu pengguna template VioMagz, untuk membuat first image ini lebih mudah, pada langkah no. 4 kamu tidak perlu mencari kode <h1 class='post-title entry-title' itemprop='name headline'>.
2. Kamu tinggal cari kode dibawah.
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image'/>
</b:if>

3. Dan ganti dengan kode ini.
<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/AVvXsEjeihe_QeAal5u2D8dydngWhsf3BY6ouax54OVunlHLQ4NR3KNGQ2TtI-n_SpwwTLJQ6en6c7lnW-3i3qAWIhXBgcJs-mVvqKPCkP9IaNjG0lexp6uquAvykMppHN1EP9uOnHLzoM6-pdY/s220/WhatsApp+Image+2019-03-08+at+12.22.18.jpeg'/>
</b:if>
</div>
</b:if>

4. Simpan tema.

bangopit.id