Cara Membuat Gambar Berada diatas Judul Artikel Blog

Normalnya gambar artikel berada dibawah artikel atau posting, ukuran dan tata letak bisa kita atur sendiri sebelum kita publish posting tersebut. Akan tetapi kita juga bisa meletakkan gambar pertama artikel blog secara otomatis berada diatas judul dari artikel blog. Mungkin tips ini bisa Anda terapkan pada blog agar terlihat menarik dan unik.

Untuk meletakkan gambar diatas judul artikel, Anda harus menambahkan beberapa kode script di template blog. Langsung saja berikut cara membuar gambar berada diatas judul artikel blog :

1. Login akun blogger Anda.
2. Pilih menu tab Tema >> klik Edit HTML
3. Pertama cari kode <div class='post hentry'> atau <b:includable id='post' var='post'> (Gunakan Ctrl+F untuk mempercepat pencarian.
4. Kemudian copy paste kode berikut tepat dibawah kode <div class='post hentry'> atau <b:includable id='post' var='post'>

<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/AVvXsEhSS5mjk3G9KQzPWl1uZcshEDrksjVJ92oMGRRz1ZmacVmn2OdNwlR76Kkz2Byts4lJ_uchfIGUZISjls_Gic1POor7DYKyp3aKlk4Yk4QVpLMLRSkpJl1Ae5GG6dhTJhpfFuocZ2sYEpg6/s1600/picture_not_available.png'/>
</b:if>
</div>
</b:if>

5. Kedua cari kode </style> copy paste kode berikut tepat diatas kode </style>

.post img.firstimage{
width:100%;
height:auto;
max-width:100%}
.post-body .separator:nth-child(1) {display:none}

6. Kemudian langkah ketiga cari kode </body> copy paste kode berikut tepat diatas kode </body>

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

7. Terakhir Simpan tema.

Nah, itu tadi cara membuat gambar berada diatas judul artikel blog. Semoga berhasil dan bermanfaat!