√ Cara Menciptakan Gambar Berada Diatas Judul Artikel Blog

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

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

1. Login akun blogger Anda.
2. Pilih sajian tab Tema >> klik Edit HTML
3. Pertama cari instruksi <div class='post hentry'> atau <b:includable id='post' var='post'> (Gunakan Ctrl+F untuk mempercepat pencarian.
4. Kemudian copy paste instruksi berikut sempurna dibawah instruksi <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/AVvXsEhW-Yte7l7sP0ofRr2R58I_YRg_lS5lwq95FUsBGNwBduxLg9AfFNzWfuRoWPYvfKpwn2zqOptYp3BIQzGm3IotfopBba9JOKCq8azWiZOObiidmfIFy-Ftni1sJ3NbsZhzjcwtIEdPVkCV/s1600/picture_not_available.png'/>
</b:if>
</div>
</b:if>

5. Kedua cari instruksi </style> copy paste instruksi berikut sempurna diatas instruksi </style>

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

6. Kemudian langkah ketiga cari instruksi </body> copy paste instruksi berikut sempurna diatas instruksi </body>

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

7. Terakhir Simpan tema.

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

Sumber http://id-pemula.blogspot.com