Begini Cara Bikin Gambar Cover Diatas Postingan / First Image

Hello pengunjung  setia Bisa Papua dan terutama rekan-rekan yang masih aktif menulis dan menggunakan blogger untuk salurkan tulisan dan berbagai hal menarik lainnya.

Pada  artikel kali ini akan saya sertakan cara untuk membuat membuat cover pada setiap postingan blog yang terletak diatas judul dari postingan, cover foto postingan diartikel akan menjadi paling diatas; dengan tampilan seperti itu maka akan membuat postingan blog semakin menjadi lebih rapi dan keren untuk dilihat.

Bagaimana caranya agar semakin mempercantik dan membuat tampilan blog menjadi rapi tentu dibutuhkan berbagai macam pengelolaan yang akhirnya mendapatkan hasil sesuai dan tampilan blog maksimal, dan untuk itu tentu salah satu cara yang dapat membuat cantik tampilan blog anda adalah dengan menggunakan cover pada setiap postingan yang didasari oleh gambar pertama yang menjadi cover tersebut.

Lalu bagaimana cara untuk membuat cover postingan blog yang terletak di atas judul postingan ?

Lihat juga: Cara Pasang Warna Latar Popular Post

Tanpa bertele-tele bikin panjang saja mending langsung ke prakteknya; silahkan ikuti langkah-langkahnya dibawah ini:

Cara Buat Gambar Postingan First di Blogger:

1. Masuk di Mode HTML Edit lalu cari kode berikut  ]]></b:skin>  </style> 
Setelah ketemu, copy kode dibawah ini dan paste diatas kode  ]]></b:skin>   atau  </style>

.firstimage{
  background:#fff;
  padding-bottom:10px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover
}

Catt: kalo saya letakan diatas kode ]]></b:skin> 

2. Lanjut lagi cari kode  </body>  lalu paste code dibawah ini diatasnya:

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

3. Langkah ini yang paling utama dan sedikit menguras konsentrasi; silahkan cari kode berikut ini: <b:if cond='data:post.link'> lalu paste:

<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>

Catt: 
- kode ini lebih ada dari satu sehingga disarankan, mencoba satu persatu.
-  Ganti URL_GAMBAR_NOIMAGE dengan code url gambar sendiri, untuk tampilan dipostingan tanpa gambar
-
Pada langkah ini sudah selesai, silahkan untuk disave lagi lihat disatu postingan sudah tampil atau belum.

4. Langkah terakhir ini untuk mengatur agar posisi gambar menjadi full; cari kode </style> lalu paste kode:

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

Selesai
***

Silahkan dicoba pada blog kawan dan lihat hasilnya, jika ada kesalahan atau tidak muncul silahkan kasitau di kolom komentar.

Salam Blogger

Gabhex | Bisa Papua