Cara Membuat First Image Cover Diatas Judul Artikel Blog


KURAZONE ~ First Image atau sering disebut dengan Gambar pertama pada sebuah artikel, menjadi hal yang menarik untuk mengawali sebuah artikel. Seiring berkembangnya jaman, First Image ini banyak digunakan sebagai Cover pada berbagai situs, salah satunya adalah Facebook, yang disebut juga dengan Photo Sampul. Google+ dan Twitter pun juga sudah menggunakan fitur ini.

BTW any way, ketika kami berkunjung ke situs JalanTikus.com nampak First Image yang dijadikan Cover pada sebuah artikel dan berhasil mencuri perhatian kami, sehingga kami pun penasaran bagaimana cara membuatnya.

Tampilan Cover pada salah satu artikel di situs JalanTikus

Cara pembuatan First Image sebagai Cover Artikel tersebut rupanya tidaklah rumit. Dikarenakan Cover ini nantinya dipasang pada Platform Blogger, maka yang perlu kita butuhkan hanyalah amunisi pada umumnya; yaitu HTML, CSS, dan JS atau JavaScript.

Sedikit penjelasan singkat dulu biar gak salah kaprah dalam memahami fungsi kode Cover yang akan kita buat.

  1. HTML digunakan untuk menempatkan dimana Cover akan muncul nantinya, apakah dibawah judul atau diatas judul Artikel. Jika melihat miliknya JalanTikus berarti diletakkan diatas judul artikel.
  2. CSS digunakan untuk membuat gambar melebar sesuai wadah / tubuh postingan, sehingga gambar akan full width dengan tinggi dan lebar sesuai ukuran gambar. Jika gambar yang terdapat pada First Image berukuran 500x400 pixel maka Cover akan nampak hampir kotak atau persegi empat, sedangkan jika First Image berukuran 500x200 pixel maka Cover akan nampak persegi panjang.

    Ukuran gambar yang digunakan oleh JalanTikus adalah 770x330 pixel. Jika ukuran 700 keatas terlalu besar bagi kalian, maka kalian bisa menggunakan rekomendasi ukuran standart yang disarankan, yaitu 530x280 pixel. Atau menggunakan ukuran lain yang sekiranya berbentuk persegi panjang.
  3. JS atau Javascript digunakan untuk menghilangkan First Image yang berada di dalam artikel. Lebih tepatnya seperti menyembunyikan / meng-hidden gambar pertama. Karena nantinya, gambar pertama sudah muncul pada bagian HTML yang kita letakkan diatas judul artikel. Jika tidak ada JS maka gambar First Image akan double/ganda. Intinya JS ini sebagai peng-hidden First Image yang berada didalam artikel saja.

Membuat First Image Cover Diatas Judul Artikel

1. Buka Akun Blogger >> Pilih Menu Tema >> Pilih Edit HTML
2. Cari kode ini : <b:if cond='data:post.title'>. Jika kode ini berjumlah lebih dari 1, maka pilih yang ke 2 (atau yang ke 3, tergantung dari template yang kalian gunakan). Dibawah kode tersebut carilah kode <b:else/> yang dekat dengan kode <h1 class='post-title entry-title'>
3. Copy kode HTML dibawah ini,
lalu letakkan (paste) tepat dibawah kode <b:else/>.
Jika bingung, lihat ilustrasi pada gambar dibawah ini :


<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>
Tulisan "URL_GAMBAR_NOIMAGE", silahkan kalian ganti dengan URL gambar milik kalian. Ini hanya sebagai gambar pengganti jika postingan kalian tidak terdapat gambar.
Peletakan kode ini sebenarnya bervariasi karena bentuk dari masing - masing template berbeda, jika pun pada langkah ini tidak sama dengan yang ada di template kalian, maka kalian bisa mengeksplor posisi yang tepat untuk menaruh kode tersebut.
4. SIMPAN TEMPLATE

> Darisini kalian sudah berhasil meletakkan First Image berada diatas judul artikel. Namun masih belum full width.

Membuat First Image menjadi FULL WIDTH

1. Masih berada didalam Edit HTML
2. Cari kode </style>,
jika tidak ada cari saja kode similarnya yaitu ]]></b:skin>
3. Copy kode CSS dibawah ini,
lalu letakkan (paste) tepat diatas kode </style> atau ]]></b:skin>
.post img.firstimage {
       width:100%;
       height:auto;
       max-width:100%;
   }
.post-body .separator:nth-child(1) {
       display:none;
   }
4. SIMPAN TEMPLATE

> Darisini kalian sudah berhasil membuat First Image menjadi full width. Namun keberadaan First Image nya masih double/ganda.

Menghilangkan Tampilan Ganda pada First Image

1. Masih berada didalam Edit HTML
2. Cari kode </body>
3. Copy kode JavaScript dibawah ini,
lalu letakkan (paste) tepat diatas kode </body>
<script type='text/javascript'>
//<![CDATA[
$(function() {
   $(".separator:first").remove();
      $(".post-body > img:first").remove();
                      });
//]]>
</script>
4. SIMPAN TEMPLATE

> Darisini kalian sudah berhasil membuat First Image secara sempurna.

FYI
  1. Proses loading blog mungkin akan sedikit lambat karena kita menggunakan JavaScript
  2. Hal yang terjadi ketika First Image sedang berproses untuk menjadi cover adalah gambar pada awal artikel akan nampak double, kemudian secara tiba - tiba gambar awal didalam artikel akan menghilang. (bagi pengguna template MagOne pasti sudah sangat akrab dengan kejadian ini, hehe..). Namun peristiwa ini tidak begitu nampak jika blog diakses dengan jaringan yang stabil dan cepat.
  3. Ukuran gambar First Image yang dibawah 500 pixel akan mengalami sedikit blur yang disebabkan oleh perintah full width pada CSS nya, maka dari itu gunakan gambar diatas 500 pixel.
  4. First Image sudah responsive

Tambahan :
Buat sahabat Kurazer yang mungkin ingin memasang gambar author seperti situs JalanTikus, bisa menggunakan bahan - bahan dibawah ini :

Bahan "Lingkaran Author" dan "Kolom Penulis"

Copy kode CSS dibawah ini,
lalu letakkan (paste) tepat diatas kode </style> atau ]]></b:skin>
.kolom-author{position:relative;background: #123;height: 40px;}
.about-author{overflow: auto;padding: 0 0 10px 5px;margin-top: -30px;float: left;}
.about-author img {float: left;width: 60px;height: 60px;border-radius: 100px;border: solid #1233px;}
.pengarang {font-size: 12px;margin-left: 10px;padding-top:10px;color:white;float: left;}

Copy kode HTML dibawah ini,
lalu letakkan (paste) tepat diatas kode <h1 class='post-title entry-title'>
Tujuan diletakkan diatas kode <h1 class='post-title entry-title'> adalah supaya Lingkaran Author dan Kolom Penulis berada dibawah First Image. Jika bingung, lihat ilustrasi gambar dibawah ini :


<div class='kolom-author'>
<div class='about-author'>
<img expr:src='data:post.authorPhoto.url'/>
</div>
<div class='pengarang'>Penulis <i class='fa fa-arrow-right'/> <data:post.author/>
</div>
</div>
Sisanya bisa kalian kembangkan sendiri sesuai selera kalian.

Itulah informasi mengenai "Cara Membuat First Image Cover Diatas Judul Artikel Blog", selamat mencoba dan semoga bermanfaat. Goodluck !!





أحدث أقدم