Membuat " First Image " Berada Di Atas Judul Postingan

Banyak yang mencari tutorial tentang ini jadi saya akan membagikan Cara Membuat First Image Berada Di Atas Judul Postingan.

Fungsi dari Membuat First Image Berada Di Atas Judul Postingan adalah untuk membuat image yang sobat uploud pertama pada akan berada diatas judul artikel / postingan yang kalian buat. Jika normalnya dimana kalian uploud gambar pertama pasti disitu tempatnya.

Cara penerapanya mungkin sedikit rumit , karena apa? Karena setiap struktur kode yang ada pada tema kalian pasti berbeda, maka dari itu kalian harus cermat mengenal kode yang akan ditambahkan.

Bagaimana Langkah-langkahnya :

Masuk ke blogger.com > Klik Tema > Edit Tema kemudian cari kode seperti dibawah ini

<div class='post hentry' expr:id='data:post.id' itemscope='' "....">

Atau

<b:includable id='post' var='post'>

Setelah itu kalian akan menemukan kode 'post hentry' . Selanjutnya salin kode dibawah ini tepat dibawah kode 'post hentry' tadi

<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='http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s70/picture_not_available.png'/>
    </b:if>
  </div>
</b:if>

Nah sekarang kita menuju ke kode CSS. Letakan kode dibawah ini tepat diatas kode </style> supaya gambar pertama hilang dan mengukur besar image nanti.

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

Agar semua ini berjalan mulus tambahkan kode javascript ini tepat diatas kode </body>

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

Simpan

Itulah yang dapat Saya sampaikan mengenai "Membuat First Image Berada Di Atas Judul Postingan" semoga bermanfaat. Dan Semoga Succes .

Sumber : https://www.zxuen.com/2018/05/membuat-first-image-berada-diatas-judul-postingan.html