ini terinspirasi dari template blog yang di buat salah satu blogger profesional ( tidak saya sebutkan namanya )
Mungkin ini terlihat biasa saja namun setelah saya terapkan di blog saya, tepatnya di template viomagz dan hasilnya cukup lumayan bagus, demo bisa lihat di blog saya ya..
tanpa berlama lama mari kita bahas di bawah ini :
Membuat First Image di Artikel blog
1. Silahkan masuk ke Dasbord Blogger
2. Pilit tema / Template Pilih Edit template
3. Cari kode seperti ini <b:includable id='post' var='post'> atau ini <article class='post'> gunakan CTRL+F agar lebih mudah mencarinya.
4. Jika sudah ketemu letakan kode di bawah ini tepat di bawah salah satu kode tersebut.
4. Jika sudah ketemu letakan kode di bawah ini tepat di bawah salah satu kode tersebut.
<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/AVvXsEhBZQnd_Il1IDUw4vYlCx1wMYsNaqo3Y9340urrFgqAoFkc5MP2bZf3f-8Z6qscZkShpK6_w4Id8Nr6EwWjeO9wOrKqwAUbVu1SI2oF4CnYdwJloP8rJHD5vfONb3dGheo-q_0whybCPLg/s70/picture_not_available.png'/>
</b:if>
</div>
</b:if>4. Langkah selanjutnya adalah menerapkan kode css agar gambar bisa tampil di atas judul artikel blog cari kode ini ]]></b:skin> dan letakan kode CSS dibawah ini tepat di atas kode tersebut.
post img.firstimage{ width:100%; height:auto; max-width:100%} .post-body .separator:nth-child(1) {display:none} .kolom-author{position:relative;background: #123;height: 40px;} .about-author{overflow: auto;padding: 0 0 10px 5px;margin-top: -30px;float: left;} .about-author img {float: left;width: 60px;height: 60px;border-radius: 100px;border: solid #1233px;} .pengarang {font-size: 12px;margin-left: 10px;padding-top:10px;color:#FF3300;float: left;}5. Simpan template .
Jika sudah sampai pada tahap ini proses pembuatan First image telah berhasil ,
Agar gambar postingan tidak double atau muncul 2 buah tambahkan kode Script di bawah ini dan letakan tepat di atas kode </body>
<script type='text/javascript'>
//<![CDATA[
$(function(){$(".separator:first").remove(),$(".post-body > img:first").remove()});
//]]>
</script>Jangan lupa untuk simpan template dan selesai.
Agar lebih maksimal saat posting artikel pilih ukuran gambar large atau x large.. jika posisi gambar kurang pas kamu bisa mengedit CSS di atas sesuai dengan template blog yang sobat miliki
Demikian untuk Cara Membuat Gambar di Atas Judul Artikel ( First Image ) semoga bermanfaat.
