Pada kesempatan kali ini saya akan memberikan tutorial bagaimana Cara Mudah Membuat First Image Atau Gambar Pertama Di Atas Postingan Blogger. First image atau gambar pertama adalah sebuah gambar yang berada tepat di atas postingan yang mengawali sebuah artikel. First image atau gambar pertama biasanya menjadi penghubung antara gambar di Halaman Utama (Homepage) Blog dengan Isi Postingan Blog.
Dengan adanya first image, pengunjung blog dapat mengetahui gambaran dari isi artikel tersebut. Banyak para blogger yang mulai memasang first image pada blognya dan salah satunya adalah blog saya sendiri. Untuk membuat first image ini sendiri bisa dibilang lumayan cukup mudah jika kamu membaca tutorial ini dengan seksama. Berikut adalah langkah-langkah yang harus kalian terapkan.
Cara Mudah Membuat First Image Atau Gambar Pertama Di Atas Postingan Blogger
1. Buka Dashboard Blogger > Pilih menu Tema > Edit HTML
2. 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 == "item"'>
<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/AVvXsEgaUwKUCzFuTNN5hi7j-POp33qHg60CfnuDEhGB_hktZMrCVEIKfyYN6u_F6e1nGHsXDxpDctHmMLGeeeLa1OPaxGMngVZCmNL-3hySyAjMA5naz25USsLVi21A1aThCuyRrGKn_fEjz08_/s1600/Goindoti.png'/>
</b:if>
</div>
</b:if>
Note : 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.
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 Mudah Membuat First Image Atau Gambar Pertama Di Atas Postingan Blogger 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 == "item"'>
<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/AVvXsEgaUwKUCzFuTNN5hi7j-POp33qHg60CfnuDEhGB_hktZMrCVEIKfyYN6u_F6e1nGHsXDxpDctHmMLGeeeLa1OPaxGMngVZCmNL-3hySyAjMA5naz25USsLVi21A1aThCuyRrGKn_fEjz08_/s1600/Goindoti.png'/>
</b:if>
</div>
</b:if>4. Simpan Tema.
Dengan memasang first image sekarang tampilan postingan kalian menjadi lebih menarik dan lebih tertata. Demikian tutorial bagaimana Cara Mudah Membuat First Image Atau Gambar Pertama Di Atas Postingan Blogger. Jika ada hal yang kurang dipahami silahkan tinggal kan pesan anda di kolom komentar, semoga informasinya bermanfaat dan sampai jumpa di postingan berikutnya.