Cara Membuat Featured Image di Atas Halaman Postingan Blog Agar Lebih SEO
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 == "item"'>
<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 == "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/AVvXsEgqr0eFPb_TFgI14Q4l94AQvp1NKbECECLfARCa-zTe4WsPTdKvVPecOdhglK5LBGsG5mjTUrYQ3342N7GYMLVH-1kp5Glt9jaxPwJxmWkem4qMRo2UCFO8EATJjbIdkVDOhUQ6hQrDBKk/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 Agar Blog Lebih SEO.*
