Cara Membuat First Images/Gambar di Atas Judul Postingan Blogger

Hallo sobat Blogger, First Image adalah sebuah kreatifitas seorang Blogger untuk memperganteng tampilan Artikel pada Blog dengan cara memindahkan gambar pertama di atas judul postingan Blogger. Umumnya gambar di postingan adalah dibawah judul artikel dan tidak banyak juga yang menampilkan gambar diatas judul postingan seperti di Blog Mas Rinaldo.

First Images atau First Thumbnail adalah Istilah yang sering digunakan para Desain Web atau Desainer Template Blogger. Dengan Membuat First Image atau Membuat gambar pertama menjadi di atas judul Postingan ini mirip seperti Website anime atau Blog Film, gambar yang menjadi perwakilan isi postingan ini di letakan paling atas postingan secara otomatis pada Platform Wordpress.

Walaupun demikian, bukan berarti platform Blogger tidak bisa membuat First Images dan harus membuat nya manual dalam postingan ya sobat. Karena sobat masih bisa membuat Gambar menjadi otomatis di atas judul postingan dengan menambahkan beberapa kode pada Template.

Cara Membuat Gambar di Atas Judul Postingan Blogger

Contoh First Image Blog Mas rinaldo

Cara menjadi gambar pertama atau Membuat first image ini tergolong mudah, karena hanya menambahkan beberapa CSS, HTML dan javascript untuk menghilangkan Duplicate Gambar yang sudah di jadikan First Images. Gambar di atas adalah contoh First Image bukan di atas judul postingan, tetapi tetap saya buat otomatis di paling atas dalam postingan (Kreasi Sendiri).

1. Seperti biasa.Untuk menghindari kesalahan dalam menambah dan menghapus kode template, Sebaiknya untuk melakukan Backup Template terlebih dahulu atau Download Template yang sobat gunakan.
2. Login akun Blogger
3. Masuk ke Menu Tema - Edit HTML
4. Cari kode berikut <b:if cond='data:post'> pada template (Biasanya kode ini terdapat lebih dari satu, bisa ada 2 dan sampai 3) Jika terdapat lebih dari satu, maka sobat gunakan kode <b:if cond='post' var='post'> yang kedua.
5. Copy dan Paste kode HTML berikut di sebelum <b:else/>

<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='URL_IMAGES_DEFAULT'/>
</b:if>
</div>
</b:if>

• Kode berwarna kuing adalah sebagai tag kondisional gambar akan tampil di postingan itu saja (Item)
• Sobat bisa mengganti URL_IMAGES_DEFAULT dengan URL gambar lain, jika di postingan tersebut tidak ada gambar sama sekali.
• Dan perlu di ingatkan kembali struktur setiap template akan berbeda-beda, sobat bisa menyesuaikan peletakan HTML First Images tersebut di template yang sobat pakai. Jika kode <b:if cond='post' var='post'> tidak ada di template yang sobat pakai.

4. Klik Simpan Tema

 Sobat sudah selesai membuat First Image atau membuat gambar diatas judul artikel Blogger. Tetapi gambar tersebut belum responsive dan ukurannya pun belum menjadi first image Full Width mas?

Cara Membuat Gambar di atas Judul Menjadi Responsive

1. Masih tetap berada di Menu Edit HTML
2. Copy kode CSS berikut dan paste diatas ]]></b:skin> atau </style>

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

3. Klik Simpan Tema
 
Cukup sampai disini saja, sobat sudah berhasil membuat First Images atau Membuat Gambar di atas Judul Postingan Responsive. Mas kenapa gambar yang dijadikan First Image jadi Double atau ada dua? Gimana Cara Mengatasi First Image Double?

Cara Mengatasi First Image Double di Blogger

Masalah ini memang sering terjadi ketika baru membuat gambar otomatis di atas judul postingan Blog. Gambar yang di jadikan First Image seharusnya menghilang, tetapi ini masih tetap muncul. Sehingga gambar First Thumbnail ini menjadi Dua. Berikut cara mengatasi masalah berikut :

1. Masuk Menu Tema - Edit HTML
2. Copy Javascript dibawah ini dan Paste di atas atau sebelum </body>

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

3. Simpan Tema

Tutorial Membuat Gambar di atas judul postingan blogger sudah selesai dan jika sobat biasa oprek atau redesign Template, sobat bisa melanjutkan dengan kreasi sendiri. Baik itu menambahkan fitur sosial media dan Author Profil di dalam First Image.

Kelemahan Memasang Gambar di atas Judul Postingan :

• First Images ini menggunakan Javascript, jadi akan berpengaruh pada kecepatan loading Blog
• Meskipun sudah memasang Javascript untuk mengatasi Double Gambar first image, tetapi akan tetap terdapat delay atau waktu untuk menghilangkan Double Gambar. Ketika di awal postingan dibuka, gambar akan tetap terlihat double.

Demikian postingan mengenai "Cara Membuat First Image/Gambar di Atas Judul Postingan Blogger" semoga dapat membantu sobat untuk menjadikan gambar pertama di atas judul artikel.