Cara Membuat First Image atau Gambar Pertama di Atas Artikel Blog

Cara Membuat First Image atau Gambar Pertama di Atas Artikel Blog
Cara Membuat Firts Image atau Gambar Pertama di Atas Artikel Blog – Gambar yang terdapat pada artikel atau postingan sebuah blog tentu menjadi pelengkap dan daya tarik tertentu bagi artikel itu sendiri terutama pada gambar pertama/first image. dengan firts image yang menarik dan bagus tentu akan lebih membuat nyaman pengunjung untuk membacanya. 

Sebuah artikel yang dilengkapi dengan gambar selain membuat kenyamanan saat dilihat tetapi juga menambah kenyaman saat pengunjung membaca isi dari bacaan artikel tersebut. kita sendiri saja tentu akan bosan ketika membaca sebuah bacaan tanpa adanya sebuah gambar didalamnya.

Pada gambar/foto pertama yang terdapat pada sebuah artikel blog biasanya gambar tersebutlah yang memiliki makna yang mendeskripsikan bacaan dari artikel tersebut. jadi hanya dengan melihat gambar kita juga dapat menentukan isi dari artikel tersebut.

Fisrt image atau gambar pertama pada postingan blog ini juga dapat di terapkan secara manual pada setiap artikel yang hendak dipublish. Jadi langsung saja kita lanjut ke cara membuat firts image pada artikel blog berikut ini.

Cara Membuat Gambar Pertama / First Image di Blog

1. Buka dashboard blogger kamu

2. Pilih menu Tema > Edit HTML. lalu cari kode <h1 class=’post-title entry-title’ itemprop=’name headline’>

3. Kemudian cari kode <b:else/> yang berada dibawah dan berdekatan dengan kode diatas.

4. Selanjutnya tempelkan kode berikut dibawah kode <b:else/> tadi

<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://1.bp.blogspot.com/-PtbGCQsQkU4/XIH83nHj8bI/AAAAAAAAAKo/qTWSGIofE44GEiwbgBE9uiX6c4ykN0CIACK4BGAYYCw/s220/WhatsApp%2BImage%2B2019-03-08%2Bat%2B12.22.18.jpeg'/>
</b:if>
</div>
</b:if>

Ganti Url ‘https://1.bp.blogspot.com/-PtbGCQs….B12.22.18.jpeg‘ dengan URL gambar kamu. Perlu sedikit bereksperimen untuk mengedit peletakan kode tersebut agar sesuai keinginan kamu.

5. Tempelkan kode berikut diatas kode </style>

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

6. Agar gambar pada artikel/postingan kamu tidak ganda atau muncul sebanyak dua kali. Tempatkan kode berikut di atas kode </body>

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

7. Simpan Tema dan lihat hasilnya.

Cara Membuat First Image pada Template Viomagz

Bagi kamu yang menggunakan template Viomagz yang dimana telah menjadi template sejuta umat. untuk penerapannya sedikit lebih mudah.

1. Bagi pengguna viomagz, pada langkah no. 4 kamu tidak perlu mencari kode <h1 class=’post-title entry-title’ itemprop=’name headline’>

2. Kamu hanya perlu mencari kode berikut

<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image'/>
</b:if>

3. Dan ganti dengan kode ini

<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://1.bp.blogspot.com/-PtbGCQsQkU4/XIH83nHj8bI/AAAAAAAAAKo/qTWSGIofE44GEiwbgBE9uiX6c4ykN0CIACK4BGAYYCw/s220/WhatsApp%2BImage%2B2019-03-08%2Bat%2B12.22.18.jpeg'/>
</b:if>
</div>
</b:if>

4. Simpan Tema dan lihat hasilnya.

Itulah bagaimana cara membuat first image atau gambar pertama di atas artikel blog. Mungkin kamu perlu sedikit melakukan eksperimen untuk mengedit peletakan kode tersebut agar benar-benar menjadi sesuai dengan keinginan kamu. Selamat mencoba.

Leave a Reply

Your email address will not be published. Required fields are marked *