Cara Membuat First Image atau Gambar Pertama di Atas Artikel Blog

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

. 3. Di bawah kode tadi carilah kode yang berdekatan dengan kode

. 4. Lalu tempelkan kode di bawah, tepat di bawah kode tadi.
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 . .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 . 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

. 2. Kamu tinggal cari kode dibawah. 3. Dan ganti dengan kode ini.
4. Simpan tema. Mungkin kamu perlu sedikit bereksperimen untuk mengedit peletakan kode di atas agar sesuai selera kamu. Selamat bereksperimen Ya! Sekian dan Terima Kasih telah membaca artikel saya tentang Cara Membuat First Image atau Gambar Pertama di Atas Artikel Blog. Sampai Jumpa!

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.


Mungkin kamu perlu sedikit bereksperimen untuk mengedit peletakan kode di atas agar sesuai selera kamu. Selamat bereksperimen Ya!