Cara Membuat First Image di Atas Judul Postingan Linkmagz

Cara Membuat First Image di Atas Judul Postingan Linkmagz

Cara Membuat First Image (Gambar di Atas Judul) Postingan Template Linkmagz

Coretancode.com - Pada kesempatan kali ini admin ingin berbagi sedikit seputar tutorial blogging yang mungkin kalian cari tetapi belum menemukannya, oleh karena itu admin sekarang membuatkannya untuk kalian semua.

Memasang gambar di atas judul artikel sepertinya sudah jadi sebuah trend di template blogger saat ini. Saya sendiri sebenarnya lebih menyukai untuk menempatkan gambar diatas judul artikel karena agar terlihat lebih rapi, dan memiliki cover image yang terpisah antara gambar dan materi artikel.

Namun sangat disayangkan, banyak dari template blogger saat ini yang belum menggunakan first image secara bawaan.

Untuk membuat gambar diatas judul artikel, anda di haruskan mengedit atau menambah beberapa baris kode HTML, CSS, dan Javascript ke dalam template menggunakan fitur Edit HTML.

Menambahkan Kode HTML

  1. Pastikan sudah login ke Blogger.com
  2. Pada dashboard, silahkan pilih menu Template > Edit HTML
  3. Kemudian cari kode seperti berikut ini,
    <b:include cond='data:view.isHomepage' name='recentPostTitle'/>
  4. Lalu salin kode berikut ini, dan letakkan 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. Selesai.

Menambahkan Kode CSS

  1. Cari kode ]]></b:skin> di template.
  2. Kemudian salin kode berikut ini, dan letakkan diatas kode pada (langkah no.1)
    .separator:nth-of-type(1){display:none;visibility:hidden}
    .post img.firstimage{position:relative;min-width:-webkit-fill-available;height:auto;margin-bottom:20px}
  3. Selesai.

Menambahkan Javascript

Untuk memasang kode berikut ini sifatnya opsional silahkan pasang jika terjadi masalah Double Image.
  1. Cari kode </body> di template.
  2. Kemudian salin kode berikut ini, dan letakkan diatas kode pada (langkah no.1)
    <script type='text/javascript'>
    //<![CDATA[
    document.querySelectorAll(".separator")[0].style.display= "none";
    //]]>
    </script>
  3. Save Template.

Sekarang anda bisa cek hasilnya di template kalian masing-masing, atau bisa juga cek demo di tombol yang sudah kami sediakan dibawah ini.

Demo First Image

Jika belum paham dan ada yang ingin ditanyakan, silahkan ajukan di kolom komentar yang tersedia dibawah artikel ini. Pastikan pertanyaan kalian sudah sesuai dengan topik yang admin bahas!

Mungkin sekian dulu artikel dari Cara Membuat First Image di Atas Judul Postingan, semoga selalu bermanfaat dan saya ucapkan
Terima kasih
Load comments