Cara Membuat Featured Image di Atas Halaman Postingan Blog

October 28, 2017
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:

 Featured Image di Atas Halaman Postingan Blog

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://4.bp.blogspot.com/-UzwA9RpjrY4/WZ4jEVrADsI/AAAAAAAAlR4/Z87IZNgdx8wNxstSOvidfwH1ZRhsw_XmACLcBGAs/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.*

Thanks for reading Cara Membuat Featured Image di Atas Halaman Postingan Blog

Related Posts

Next Article
« Prev Post
Previous Article
Next Post »
Your Comments

No SPAM, Please...!