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.
<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://1.bp.blogspot.com/-PtbGCQsQkU4/XIH83nHj8bI/AAAAAAAAAKo/qTWSGIofE44GEiwbgBE9uiX6c4ykN0CIACK4BGAYYCw/s220/WhatsApp%2BImage%2B2019-03-08%2Bat%2B12.22.18.jpeg'/>
</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();
      $(".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://1.bp.blogspot.com/-PtbGCQsQkU4/XIH83nHj8bI/AAAAAAAAAKo/qTWSGIofE44GEiwbgBE9uiX6c4ykN0CIACK4BGAYYCw/s220/WhatsApp%2BImage%2B2019-03-08%2Bat%2B12.22.18.jpeg'/>
</b:if>
</div>
</b:if>

4. Simpan tema.

DEMO

Mungkin kamu perlu sedikit bereksperimen untuk mengedit peletakan kode di atas agar sesuai selera kamu. Selamat bereksperimen Ya!
DONASI Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.bangopit.id. Terima kasih.

10 Komentar

Peraturan Berkomentar
1. Jangan menggunakan kata-kata kotor dan kasar
2. Jangan menyertakan link dalam berkomentar
3. Jangan membahas keluar topik, jika keluar topik sebaiknya gunakan Contant Form yang disediakan

  1. Biar ada dot atau titik nya itu gimana min? Terimakasih...

    BalasHapus
    Balasan
    1. Titik yang mana min?

      Hapus
    2. Jadikan saya pake template viomagz and work cara yang bang opit kasih, tapi letak gambar nya berada di atas judul.

      Nah kalo bang opit berbaik hati, buatin la tutor supaya gambarnya bukan berada di atas judul melainkan di bawah judul seperti bang opit punya😅 thx

      Hapus
    3. Memang gambar diatas judul gan kalo nggak di rubah dikit,

      Chat via whatsapp aja gan biar mudah, 089630511308

      Hapus
  2. semisal di gambarnya ada deskripsinya, script remove double image nya gak work gan, mhn bantuannya.https://magoneterabaru.blogspot.com/2014/04/custom-title-with-subtitle-and-lock.html

    BalasHapus

Posting Komentar

Peraturan Berkomentar
1. Jangan menggunakan kata-kata kotor dan kasar
2. Jangan menyertakan link dalam berkomentar
3. Jangan membahas keluar topik, jika keluar topik sebaiknya gunakan Contant Form yang disediakan

Lebih baru Lebih lama