Cara Membuat Gambar di Atas Judul Artikel ( First Image ) - Malas Ngeblog

    Social Items

membuat,gambar,di,atas,judul,frist,image
Cara Membuat Gambar di Atas Judul Artikel ( First Image ) - mengikuti trend untuk tampilan template blog saat ini yang mana sebuah gambar bisa di modifikasi , tepat di atas judul sebuah artikel..

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.

<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://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/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.

Cara Membuat Gambar di Atas Judul Artikel ( First Image )

membuat,gambar,di,atas,judul,frist,image
Cara Membuat Gambar di Atas Judul Artikel ( First Image ) - mengikuti trend untuk tampilan template blog saat ini yang mana sebuah gambar bisa di modifikasi , tepat di atas judul sebuah artikel..

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.

<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://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/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.

Load comments

Subscribe Our Newsletter

Notifications

Disqus Logo