-->
Cara Membuat Gambar Post di Atas Judul Pada Blogger

Cara Membuat Gambar Post di Atas Judul Pada Blogger

First Image merupakan gambar paling pertama yang digunakan sebagai Thumbnail dalam sebuah artikel. First Image kebanyakan digunakan sebagai Cover dari sebuah artikel dengan ilustrasi yang sederhana agar mudah dipahami oleh pengunjungnya.

Pada saat ini banyak sekali para blogger yang meletakkan First Image ini di Atas Judul artikel blog mereka. Memang tidak ada yang terlalu spesial sekali disini tapi untuk mereka yang suka mempercantik blognya bisa dibilang "kalian harus coba ini".

Untuk kalian yang menggunakan platform WordPress itu merupakan hal mudah karena kalian hanya perlu mengubahnya di menu pengaturan. Tapi untuk yang menggunakan platform Blogger kalian pasti bingung agar Gambar tersebut bisa berada di Atas Judul.

Jadi disini kita akan gunakan javascript untuk mengatasi permasalahan tersebut. Kita langsung saja ke langkah-langkahnya.

1. Masuk Ke Menu Tema > Edit HTML.

2. Masukkan Kode CSS dibawah ini untuk pengaturan tampilan nya dan letakkan diatas ]]></b:skin> atau </style>.

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

3. Cari kode <b:includable id='post' var='post'> atau <article class='post'> (Permudah dengan menggunakan CTRL+F).

4. Letakkan Kode di bawah ini tepat di bawah kode tersebut, Kemungkinan akan ada banyak jadi coba saja satu persatu.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.firstImageUrl'>
<img class='firstimage' expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){$(".separator:first").remove(),$(".post-body > img:first").remove()});
//]]>
</script>
</b:if></b:if>

5. Simpan Template Kalian.

Penutup

Semoga bermanfaat buat kalian semuanya dan terima kasih juga sudah berkunjung ke blog kecil ini. Jika ada hal yang ingin ditanyakan silakan berkomentar saja dibawah.

Seorang Blogger Pemula yang sedang belajar
  • Facebook
  • WhatsApp
  • Instagram
  • DONASI VIA OVO Bantu berikan donasi untuk blog ini agar bisa tetap semangat memberikan artikel terbaru
    Tampilkan Komentar
    Sembunyikan Komentar

    9 Komentar

    1. Bro, caranya supaya header templatenya bisa kayak di blog ini gmn? Ada kotak2 yg bergerak2 gitu

      BalasHapus
      Balasan
      1. Kalau udah make Template Jagoan Magz
        Tinggal masukin kode yang ada di bawah ini ajah tepat di bawah kode <div id='header-container'>

        =======================
        <ul class='circles'><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
        =======================

        Hapus
    2. Halo teman, bisakah kita menyembunyikan tag tertentu di beranda? apakah ada kode untuk itu?

      Tag ini seharusnya tidak terlihat di beranda.

      BalasHapus
      Balasan
      1. Saya Lihat Anda Menggunakan Google Translate Disini
        Jadi Saya Tidak Terlalu Bisa Membacanya Dengan Benar

        Hapus
      2. okay then i will write in english my problem.

        Dude, I want to hide articles from a particular tag on the home page of my blog. How can I do that?

        So, for example, sponsored articles will not appear on the homepage, so how do I hide the articles added to the sponsor tag on the homepage?

        Hapus
      3. i don't really know how they can make this using conditional blogger tag

        if you want to learning, you can see that code they are using on LinkMagz Blogger Template version 1.3

        Hapus
    3. sayang bngt d'link magz gk bisa, btw kodenya kurang < / b:id > sebelum < / div >

      klo blh, request buat show/hide koment di linkmagz gan.. :D

      BalasHapus
    Catatan
    • Mohon Tinggalkan komentar sesuai dengan judul artikel.
    • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
    • Dilarang mencantumkan link aktif di komentar.
    • Komentar dengan link aktif akan otomatis dihapus
    • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel