Cara Membuat First Image Di Atas Judul Blog

 

Halo teman-teman ngiklanyuk.com, pada kesempatan kali ini admin akan membagikan artikel mengenai bagaimana Cara Membuat First Image di Atas Judul Blog. 

Sebelum itu kita juga harus tau dong, apa si arti first Image itu? 

Pengertian First Image

First Image merupakan gambar pertama pada sebuah artikel post di blogger, first Image biasa di letakan pada posisi standar di bawah judul blog. 

First Image juga sering di tampilkan sebagai thumbnail gambar pada suatu artikel di blogger. 

Menggunakan Java Script

Dalam pembuatan first Image yang akan diletakkan di atas judul blog ini akan menggunakan metode Java Script atau yang biasa disingkat dengan JS, kegunaan Java Script ini untuk meletakkan Thumbnail First Image agar berada di Atas Otomatis. 

Jika kalian mempunyai first Image yang berada di bawah judul blog, maka akan otomatis berubah ke atas sesuai template yang kalian pakai. 

Cara Membuatnya

Jika kalian penasaran bagaimana Cara Membuat First Image di Atas Judul Blog silahkan simak tutorial yang sudah saya buatkan di bawah ini :

Step 1 : Login ke hosting blogger.com kalian

Step 2 : Selanjutnya pilih menu TEMA kemudian pilih icon DROP BAWAH lalu pilih Edit HTML

Step 3 : Copy atau salin kode CSS yang sudah saya sediakan di bawah, lalu letakan kode tersebut di atas kode ]]></b:skin> atau <style>

/* putrakun.eu.org first image */
.putrafirst-img{
  background:#fefefe;
  padding-bottom:16px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  width:100%;
  height:auto
}

Step 4 : Jika kode CSS sudah terpasang silahkan cari kode <article class='post'> , jika kode sudah ketemu silahkan copy Java Script di bawah ini lalu letakan di bawah kode tersebut

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.firstImageUrl'>
<img class='putrafirst-img' expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){$(".separator:first").remove(),$(".post-body > img:first").remove()});
//]]>
</script>
</b:if>
</b:if>

Step 5 : Silahkan Simpan Tema kalian, lalu lihat bagaimana hasilnya setelah sudah menerapkan semua langkah langkah yang sudah saya buatkan di atas. 

Hasil Tampilan

Jika kalian penasaran dengan hasil tampilannya dari First Image di Atas Judul Blog silahkan lihat foto di bawah ini

Penutup

Mungkin itu saja tutorial dari saya Cara Membuat First Image di Atas Judul Blog, terimakasih.