Cara Membuat Featured Image di Atas Halaman Postingan Blog - Blogger Bandung

Cara Membuat Featured Image di Atas Halaman Postingan Blog

Featured Image di atas halaman postingan biasanya ada di blog WordPress. Jarang ada di blogger atau blogspot, kecuali belakangan muncul di Template Blog AMP.

Featured Image yaitu gambar ukuran besar (full-width) di atas atau di bawah judul tulisan, seperti ini:

Gambar yang tampil atau yang dimunculkan adalah gambar pertama atau laing atas yang ada di postingan. Sedangkan gamba lainnya, jika ada, tetap pada posisinya.

Membuat Featured Image / Cover Image Single Post Blogger

Berikut ini Cara Membuat Featured Image di Atas Halaman Postingan Blog

Kode CSS
Simpan di atas </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.coverImage {margin:12px 0 0 0}
.post img.firstimage {width:100%; height:auto; max-width:100%;max-height:300px}
.post separator::nth-child(1),.post-body .separator:nth-child(1) {display:none;}
</style>
</b:if>

Kode HTML
Simpan di atas <div class='post-info'> atau di atas kode <div class='post-header'>

<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/AVvXsEjU-jfhFIelt2wBXiNyCiWDCx5JjYkstAarweiIn1JiGV1CKuphOqCIkZbseWh5UQ6OMLXTQTjFMG8868iCQqbec05MuakxHO4YCbsczcwou56wm3Dd251pnXX1OXvNv5eVOKoLwBBOUXg/s1600/no_available_image.png'/>
</b:if>
</div>
</b:if>

Kode JavaScript
Simpan di atas koe </body>

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

Demikian Cara Membuat Featured Image di Atas Halaman Postingan Blog.*