Membuat Gambar Atas Judul Artikel di Blogger (First Image)

Membuat Gambar Atas Judul Artikel di Blogger (First Image) - First Image adalah sebuah gambar sampul dalam sebuah artikel, gambar tersebut sering di buat sebagai gambar utama dalam artikel dalam sebuah blog.

Kesempatan kali ini saya akan memberikan tutorial buat kalian. First Image ini yang saya buat ini seperti punya Arlina Desaign dan Bung Frangki.

Nah kita tidak usah basa - basi langsung aja mulai tutorialnya, ini adalah tutorialnya untuk sobat semua.

Membuat First Image Pada Artikel Blog

Langkah pertama, kalian harus masuk ke Akun Blogger, Pilih Tema kemudian Edit HTML.

Langkah kedua, kalian taruh kode berikut ini di atas kode ]]></b:skin> atau </style> di Edit HTML.

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

Kemudian Cari kode seperti ini <b:if cond='data:post.link'>, jika sulit untuk mencarinya kalian CTRL + F.

Letakkan Kode berikut ini tepat di atas kode pada perintah nomor 3, kode ini ada banyak jadi pilih salah satu aja.

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

Langkah terakhir taruh kode di bawah ini tepat diatas kode </body>

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

Simpan Template

Nah itulah tadi Cara Membuat Firts Image di Blogger, selamat mencoba.