-->

Cara Membuat First Image di Blogger

Daftar Isi [Tampilkan]
Serieswans.com - Halo sobat blogger, pada kesempatan kali ini saya akan membahas tutorial mengenai cara membuat first image. pada umumnya posisi first image ini berada di awal postingan tepatnya di atas judul. namanya juga first yang artinya pertama atau satu. sudah jelas pastinya gambar tersebut muncul di urutan pertama.
Cara Membuat First Image di Blogger

Sebagai contoh penerapan first image ini saya menggunakan template viomagz versi terbaru dan sudah saya tes ternyata berhasil, jika anda selain pengguna viomagz, silahkan uji coba sendiri terlebih dahulu. namun jika masih belum berhasil, silahkan tanyakan di kolom komentar mengenai kendalanya

Sebelumnya saya juga sudah pernah mencoba menggunakan tutorial yang tersebar di google, ternyata kebanyakan mengalami kendala double image atau gambar setelah memasang first image, padahal sudah menggunakan javascript/jquery untuk meremove gambar yang ada di postingan, akan tetapi gambar itu tetap muncul.

nah bagaimana cara mengatasi double image tersebut, cukup mudah ko, silahkan anda ikuti tutorial di bawah ini:

Cara Memasang First Image di Atas Postingan

  • Masuk terlebih dahulu ke blogger
  • Pilih menu Tema => Edit HTML
  • Silahkan anda cari kode Judul Postingan yang berada di kode pembungkus halaman item
  • Contoh kodenya seperti berikut <a expr:name='data:post.id'> atau <b:if cond='data:post.title'> atau  <h1 class='post-title entry-title' itemprop='name headline'>
  • Jika sudah ketemu, silahkan copy kode HTML Frist Image di bawah ini dan letakan di atas kode yang sudah kita cari sebelumnya 

<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>
tips — Jangan lupa juga untuk mengganti URL GAMBAR NOIMAGE dengan url gambar punya anda sendiri.

Sehingga kode kodenya akan seperti gambar di bawah ini
Cara Membuat First Image di Blogger

Sampai disini kita sudah berhasil memasang first image di postingan blogger, apa langkah selanjutnya ? kita akan mengatasi permasalah double image pada postingan. bagaimana caranya, silahkan ikuti tutorial di bawah ini 

Cara Mengatasi Double Image di Postingan Blogger

Cara mengatasinya ini juga sangat mudah sekali supaya gambar di postingan anda tidak menjadi double.
  • Silahkan copy kode CSS di bawah ini dan letakan 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;
}
  • Jika sudah silahkan simpan template dan cek hasilnya

Setelah saya cek, untuk postingan lama sudah berhasil mengatasi double image tersebut. namun pada postingan terbaru atau postingan yang baru anda publish masih belum berhasil. saya coba menbambahkan 2 selector CSS lagi dan cara itupun berhasil, untuk caranya silahkan anda copy CSS di bawah ini dan letakan di atas kode ]]></b:skin>
.post-body div.separator:nth-child(1) {
display:none;
}
.post-body div.separator a img:nth-child(1) {
display:none;
}

Akhir kata

Cukup mudah bukan cara penerapannya, tidak memakai javascript lagi, kita hanya menggunakan HTML dan CSS saja.

Demikian pembahasan tutorial kali ini mengenai Cara Membuat First Image di Blogger. jika anda mengalami kendala saat mencoba tutorial diatas, silahkan tanyakan di kolom komentar ya sob. semoga bermanfaat.
Next
Previous
Tidak ada kata "Tapi" dan "Nanti" jika anda ingin Sukses
  • Facebook
  • Twitter
  • Instagram
  • Related Posts

    Buka Komentar ( 1 )
    Tutup Komentar

    1 Komentar

    • Mohon Tinggalkan jejak sesuai dengan judul artikel.
    • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
    • Dilarang mencantumkan link aktif di komentar.
    • Komentar dengan link aktif akan otomatis dihapus
    • Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.
    • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
    • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
    • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
      <i>#comments</i>
    • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
      <em>#comments {margin:0; padding:10px 15px}</em>

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel

    x
    Berlangganan

    Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!