Cara Membuat First Image Diatas Judul Postingan Linkmagz

Cara Membuat First Image Diatas Judul Postingan Linkmagz

Pada kesempatan kali, admin akan berbagi sedikit tentang Cara Membuat First Image Diatas Judul Postingan Linkmagz, yang dimana hal seperti ini telah menjadi sebuah trend di template kekinian. First Image ini akan muncul pada awal artikel atau lebih tepatnya diatas judul postingan.

Kami sendiri lebih menyukai untuk membuat First Image, agar postingan terlihat rapi dan memiliki cover image yang terpisah dari gambar artikel.

Namun sangat disayangkan karena untuk saat ini masih banyak template blog kekinian yang belum memiliki fitur ini secara bawaan. Oleh karena itu, kami berfikir untuk redesign template yang kami gunakan agar memiliki fitur First Image.

Untuk membuat gambar diatas judul artikel, kita di haruskan untuk mengedit template dengan menambahkan kode html, css, dan javascript. Lalu untuk membuatnya anda bisa ikuti tutorial berikut ini yang telah kami rangkum secara rinci.

Cara Membuat First Image di Linkmagz

Untuk cara membuatnya bisa kalian terapkan di beberapa template terpopuler saat ini seperti di Viomagz, Linkmagz, dan template lainnya. Namun seperti di judul artikel ini, kami hanya memberikan tutorial untuk template Linkmagz.

Berikut inilah langkah-langkah dari cara membuat First Image di atas judul postingan blogger.

Tutorial Pemasangan

  1. Login terlebih dahulu ke Blogger
  2. Pada menu dashboard, silahkan pilih menu Template > Edit HTML
  3. Kemudian cari kode seperti berikut ini,
    <b:include cond='data:view.isHomepage' name='recentPostTitle'/>
  4. Lalu letakkan kode berikut ini, tepat diatas kode pada langkah No.3
    <b:if cond='data:blog.postImageUrl'><div class='coverImage'><b:if cond='data:post.firstImageUrl'><img class='firstimage' expr:alt='data:blog.pageName' expr:src='data:blog.postImageUrl' expr:title='data:blog.pageName'/><b:else/><img class='firstimage' expr:alt='data:blog.pageName' expr:src='data:blog.postImageUrl' src='https://2.bp.blogspot.com/-eH7Gd4OsoIg/XqFM8dLvH-I/AAAAAAAAOcs/LZgrAIAE_4Y9ltAcmooyMaN2j790YL3ogCLcBGAsYHQ/s1600/no-image.jpg'/></b:if></div></b:if>
  5. Selanjutnya letakkan kode CSS berikut ini, dan letakkan diatas kode ]]></b:skin>
    .separator:nth-of-type(1){display:none;visibility:hidden}
    .post img.firstimage{position:relative;min-width:-webkit-fill-available;height:auto;margin-bottom:20px}
  6. Save Template

Jika terjadi masalah seperti double image, kalian bisa pasang Javascript berikut ini tepat diatas kode </body>
<script type='text/javascript'>
//<![CDATA[
document.querySelectorAll(".separator")[0].style.display= "none";
//]]>
</script>
Jangan lupa untuk Save Template jika sudah, dan cek kembali postingan kalian.

Pada template Linkmagz, First Image akan muncul tepat diatas breadcrumb.

Mungkin sekian dulu yang bisa kami berikan dari artikel Cara Membuat First Image Diatas Judul Postingan Linkmagz, semoga bermanfaat dan
Terima kasih

Fernand
Fernand Kecanduan berbagi ilmu!

5 komentar

  1. Buat tutor romabak header seperti blog ini dong hu

    BalasHapus
    Balasan
    1. nanti ya mas 🙏 masih banyak kesibukan akhir-akhir ini

      Hapus
  2. Bg tolong Buatkan tutorial cara mengganti font seperti pada tamplate ini

    BalasHapus
  3. Sy coba,,gambar nya koq tetap muncul di artikel ya bg.. Kalau di lihat pada blog abg ini.. Gambarnya tidak muncul pada artikel.. Mohon pencerahan nya bg.. Terima kasih

    BalasHapus

Posting Komentar