Cara mudah Membuat First Image Cover Diatas Judul Postingan

hello sobat blogger banyak sekali Tutorial tentang cara membuat Fisrt 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 di situ tempatnya.

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

Cara Penerapan :

Masuk Blogger > 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 tepatnya di bawah 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggCN3Qktuh6bND1eN_D4wZPw2uLpbFG7IMmlqT_QAlOErSdiAyjlF9Tm2RWsBbMNNB7YbTTSEWD94tLakDrViRyNKx4A5yU0s5Uc-pZ0vK_9MoDWf3M0JNWBny2n5Air4sfu5mEQxPytE/s70/picture_not_available.png'/>
    </b:if>
  </div>
</b:if>

Nah sekarang kita menuju ke kode CSS. Letakan kode di bawah ini tepat di atas 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 javasccript di bawah ini tepat di atas kode </body>

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

Simpan

• Demo

Itulah sedikit informasi tentang Cara Membuat First Image Cover Diatas judul Postingan semoga artikel ini bermanfaat Sumber Artikel : ww.zxuen.com

Share this post