Cara Membuat First Image Postingan Blogger

Cara Membuat First Image Postingan Blogger

Cara Membuat First Image Postingan Blogger,Memasang First Image di Atas Judul Postingan sepertinya menjadi salah satu trend dalam meredesign template blogger belakangan ini. Gambar pertama yang terdapat pada tulisan akan berada di atas judul postingan.

Baca Juga Tips Menulis Artikel Lebih Dari 1000 Kata

Saya sendiri memang menyukai letak penempatkan gambar postingan yang berada di atas judul postingan karena tampilan dalam postingan akan menjadi terlihat lebih rapi dan juga cover image akan dipisahkan dari gambar isi artikel.Namun saat ini banyak sekali template blog yang sangat populer yang masih belum menggunakan first-image secara bawaan.Untuk memasang first image di atas postigan kita harus mengedit serta menambahkan beberapa baris pada kode html, css dan javascript melalui Edit HTML.

Membuat First Image di Atas Judul Postingan Blog

Cara membuat first image dibawah ini dapat kamu terapkan di beberapa template contohnya viomaz,linkmagz,dan beberapa template lainnya.

Membuat First Image pada Template Viomagz

1.Masuk pada dashboard blogger kemudian pergi ke halaman Tema lalu Edit HTML
2.Cari code <h1 class='post-title entry-title'>untuk mempercepat proses pencarian gunakan CTRL+F biasanya biasanya terdapat beberapa code,untuk template Viomagz pastikan memilih kode kedua.
3.Letakkan kode dibawah ini tepat berada di atas kode<h1 class='post-title entry-title'>
<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://2.bp.blogspot.com/-eH7Gd4OsoIg/XqFM8dLvH-I/AAAAAAAAOcs/LZgrAIAE_4Y9ltAcmooyMaN2j790YL3ogCLcBGAsYHQ/s1600/no-image.jpg'/>
</b:if>
</div>
</b:if>

4.Lalu kita tambahkan css dibawah ini cari kode]]></b:skin>kemudian tambahkan kode css dibawah ini tepat diatas code]]></b:skin>
.separator:nth-of-type(1){display:none;visibility:hidden}
img.firstimage{position:relative;min-width:-webkit-fill-available;height:auto;margin-bottom:20px}

5.Klik simpan

Membuat First Image pada Template Linkmagz

Apabila blog kamu menggunakan template Linkmagz seperti blog ini kamu dapat mengikuti beberapa langkah-langkah dibawah ini untuk membuat First Image.

1.Masuk ke dashboard blogger lalu pergi ke halaman Edit HTML.

2.Cari code <b:include cond='data:view.isHomepage' name='recentPostTitle'/>,untuk mempercepat proses pencarian gunakan CTRL+F.

3.Letakkan kode dibawah ini tepat berada di atas kode <b:include cond='data:view.isHomepage' name='recentPostTitle'/>
<b:if cond='data:blog.postImageUrl'><div class='coverImage'><b:if cond='data:post.firstImageUrl'><img class='firstimage' expr:alt='data:blog.pageName' expr:src='data:blog.postImageUrl' expr:title='data:blog.pageName'/><b:else/><img class='firstimage' expr:alt='data:blog.pageName' expr:src='data:blog.postImageUrl' src='https://2.bp.blogspot.com/-eH7Gd4OsoIg/XqFM8dLvH-I/AAAAAAAAOcs/LZgrAIAE_4Y9ltAcmooyMaN2j790YL3ogCLcBGAsYHQ/s1600/no-image.jpg'/></b:if></div></b:if>

4.Setelah itu tambahkan kode css dibawah ini,kita cari kode ]]></b:skin>kemudian tambahkan kode css dibawah ini tepat berada diatas code]]></b:skin>.
.separator:nth-of-type(1){display:none;visibility:hidden}
.post img.firstimage{position:relative;min-width:-webkit-fill-available;height:auto;margin-bottom:20px}

5.Klik Simpan

Jika mengalami double image, first image sudah berada di atas judul artikel tapi gambar di dalam postingan tidak hilang. tambahkan code javascript dibawah ini tepat di atas kode </body>
<script type='text/javascript'>
//<![CDATA[
document.querySelectorAll(".separator")[0].style.display= "none";
//]]>
</script>

ARTIKEL MENARIK LAINNYA

Mengatasi Masalah Ads.txt Google Adsense Blogger
Cara Mendapatkan Penghasilan Melalui Internet
Cara Membuat Daftar isi Otomatis Microsoft Word
Alternatif pengganti Rufus untuk bootable linux
Diskusi