Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat First Image di Blogger

Cara membuat first image di atas judul postingan
IkhsanCoegraphy - Pada postingan kali ini, admin akan membagikan tutorial kepada kalian cara membuat first image atau biasa di sebut juga para sobat blogger dengan gambar pertama yang berada di atas judul postingan blog. Untuk tutorial kali ini, admin memakai template viomagz dari mas sugeng, untuk template selain viomagz silahkan di coba sendiri ya sobat.

Ohh iya,,, banyak yang bertanya juga bagaimana cara mengatasi dobel image atau gambar setelah memasang first image gimana min? Yup,, caranya cukup simpel kok, silahkan kalian simak tutorialnya di bawah ini dengan seksama ya.

Cara memasang gambar pertama di atas postingan

Untuk cara yang pertama, kita terlebih dulu memasang scrip agar gambar bisa muncul di atas judul postingan blog. Kalian cukup copy dan pastekan script yang saya berikan di bawah ini tepatnya di atas kode <b:if cond='data:post.title'>
atau bisa di atas kode <h1 class='post-title entry-title'>
<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='URL_GAMBAR_NOIMAGE'/> 
</b:if> 
</div> 
</b:if>
Jangan lupa untuk mengganti URL_GAMBAR_NOIMAGE dengan url gambar punya kalian sendiri.

Selesai!! Yup untuk tutorial memasang first image nya sudah berhasil, langkah yang harus sobat lakukan selanjutnya adalah memasang code css di langkah berikutnya, agar gambar yang di hasilkan nanti tidak dobel atau ganda yang bisa mengakibatkan tampilan blog menjadi jelek dan menggangu pengunjung.

Memasang code css agar gambar yang dihasilkan tidak dobel atau ganda.

Untuk cara mengatasinya cukup mudah kok, agar gambar postingan yang hasilkan first Image agar tidak dobel atau ganda. Kalian cukup copy dan pastekan code css yang saya berikan di bawah ini tepat di atas kode ]]></b:skin>
.tr-caption-container:nth-of-type(1) {
display:none;
visibility:hidden;
}
.post img.firstimage {
width:100%;
height:auto;
max-width:100%;
} 
.post-body .separator:nth-child(1) {
display:none;
}
Kalau sudah, langkah yang terakhir adalah simpan / save template. Selamat gambar first image sekarang tidak dobel.

Akhir kata

Uraian diatas tadi membahas tentang tutorial cara membuat atau memasang first image di atas judul postingan blogger dan cara mengatasi dobel image dengan memasang code css. Untuk kalian yang mengalami masalah bisa di tanyakan melalui atau lewat kolom komentar yang ada di bawah postingan ini, sekian dan terima kasih.

Posting Komentar untuk "Cara Membuat First Image di Blogger"