Ini Solusinya Cara Mudah Membuat Gambar Cover Responsive Pada Postingan Blog

Halo sahabat webmuna dimanapun anda berada, pada kesempatan kali ini saya akan membahas sebuah tutorial tentang bagaimana membuat gambar cover pada postingan post blog seperti pada contoh gambar dibawah ini.

Kebanyakan template blogger saat ini sudah menggunakan image cover pada postingan blog, karena dengan adanya gambar cover dibawah judul postingan akan terlihat lebih menarik bagi yang membaca isi postingan blog kita.

Nah jika template blog anda sebelumnya tidak menggunakan gambar cover pada postingan blog dan anda ingin membuat gambar cover pada blog.

Berikut ini saya akan membagi sedikit pengalaman tentang bagaimana cara membuat gambar cover pada postingan blog.

Harap lakukan sesuai dengan urutan tutorial dibawah ini supaya tidak terjadi kendala saat sobat mempraktekan turorial dibawah ini.

Sebelumnya sobat Backup dulu tema sebelum di edit supaya jika terjadi kesalahan bisa di recovery kembali.

CARA MEMBUAT GAMBAR COVER PADA POSTINGAN BLOG

1. Untuk langkah pertama login dulu kedalam blogger.

2. Selanjutnya pilih Tema / Template dan klik menu Edit Html

3. Selanjutnya copy kode CSS dibawah ini dan paste atau letakan di di atas kode <head/>

KODE CSS
<style type='text/css'> .post img.firstimage {width:100%;height:auto;max-width:100%;} </style>

4. Jika sudah selesai selanjutnya copy kode HTML dibawah ini dan Paste atau letakan di bawah <div/> judul postingan post blog. Tekan Ctrl + F untuk memudahkan pencarian.

KODE HTML
<div class='gambar-cover-post'>    <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>

5. Jika ingin menghilangkan gambar yang sudah digunakan pada gambar cover supaya tidak menampilakan gambar yang sama pada postingan blog.

6. Selanjutnya Copy kode JavaScript dibawah ini kemudian letakkan atau Paste di atas kode <body/>
Untuk memudahkan pencarian tekan Ctrl + F

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

7. Terkhir klik menu SIMPAN untuk menyimpan template dan lihat hasilnya.

Demikianlah sedikit penjelasan dari saya tentang bagaimana cara membuat gambar cover responsive pada postingan blog.

Semoga bermanfaat dan dapat membantu sedikit permasalahan yang terjadi pada template blog anda.

Selamat mencoba.