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

Nah kembali dengan saya disini Admin showdzgn, 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 Membuat First Image dengan CSS di Awal Postingan Blogger #2 apabila kamu ada masalah atau pertanyaan seputar blogger silahkan komen dikolom komentar dibawah artikel ini.
Tampilkan Komentar
Sembunyikan Komentar

1 Response to "Cara Membuat First Image dengan CSS di Awal Postingan Blogger #2"

  1. demo nya ada gak gan?

    tutorial juga donk bikin footer kayak blog ini gmn ya?

    ReplyDelete

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar semua.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel