Cara Membuat Featured Image di Atas Halaman Postingan Blog

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='http://ift.tt/2iFzTkZ'/>
</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.*



✍ Sumber Pautan : ☕ Blogger Bandung

Kredit kepada pemilik laman asal dan sekira berminat untuk meneruskan bacaan sila klik link atau copy paste ke web server : http://ift.tt/2zdZKHN

(✿◠‿◠)✌ Mukah Pages : Pautan Viral Media Sensasi Tanpa Henti. Memuat-naik beraneka jenis artikel menarik setiap detik tanpa henti dari pelbagai sumber. Selamat membaca dan jangan lupa untuk 👍 Like & 💕 Share di media sosial anda!