Cara Terbaru Membuat First Image dengan CSS di Awal Postingan Blogger

Nah kembali dengan saya disini Admin expxo, Pada artikel sebelumnya saya sudah membuatkan First Image Versi 1, Kali ini saya akan membuatkan First Image Versi 2 dengan tampilan yang berbeda dengan yang pertama dan pastinya responsive.

Apa Itu First Image ?

First Image atau Gambar Pertama merupakan sebuah fitur yang memiliki fungsi untuk menampilkan gambar pada postingan artikel blog di bagian atas. First Image ini nantinya di lengkapi nama admin, tombol share dan tanggal di Postingannya artikel tersebut

Cara Membuat First Image dengan CSS di Awal Postingan Blogger #2

1. Silahkan kamu login ke Blogger.com dengan menggunakan Gmail kamu.
2. Masuk ke menu TEMA > Klik Edit HTML.
3. Cari kode berikut ini <b: if cond = 'data: post.title'> jika kode tersebut lebih dari 1 maka anda mencari kode kedua atau ketiga. jika anda telah menemui kode tersebut. <b: else /> di bawah kod <b: if cind = 'data: post.title'> dan mereka yang hampir dengan kode <h1 class = 'tajuk masuk selepas judul'> dan Letakkan kode dibawah ini tepat DIBAWAH kode <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_GAMBAR_NOIMAGE'/>
</b:if>
</div>
</b:if>

4. Jangan lupa untuk mengubah URL_GAMBAR_NOIMAGE sesuai gambar no image anda.
5. Selanjutnya silahkan tambahkan kode CSS dibawah ini tepat DIATAS kode ]]></b:skin>

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

6. Kalau sudah tambahkan kode dibawah ini tepat DIATAS kode </body>

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

7. Kalau sudah silahkan klik SIMPAN dan Selesai.

Bagimana mudah bukan untuk tutorial Cara Terbaru Membuat First Image dengan CSS di Awal Postingan Blogger apabila kamu ada masalah atau pertanyaan seputar blogger silahkan komen dikolom komentar dibawah artikel ini.

Bagikan Artikel ini