Cara Membuat First Image Cover Diatas Judul Artikel Blog - Kurazone Blog | Panduan Belajar Blogger Pemula

Cara Membuat First Image Cover Diatas Judul Artikel Blog

Pilihan Editor :

Cara Membuat First Image Cover Diatas Judul Artikel Blog
Penulis Bagus Surochman
19
Modus malam




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 !!
nanio
Cara Membuat First Image Cover Diatas Judul Artikel Blog
Cara Membuat First Image Cover Diatas Judul Artikel Blog Cara Membuat First Image Cover Diatas Judul Artikel Blog Reviewed by Bagus Surochman on 6/09/2018

19 komentar:

  1. Terima kasih mas, tutorialnya lengkap banget. Oh ya apa ini bisa diterapkan di evomagz 2018 ?

    BalasHapus
  2. Thx mas infonya, tutor ini bisa diterapkan di viomagz gk ya?

    www.sodentutorial.xyz

    BalasHapus
  3. mas, blog saya tag gambarnya gak pake separator dan yang pake separator itu "paragaraf" nya.

    jadi masalahnya gambar jadi double dan "paragraf" pertama hilang.

    ada solusi gak gan?

    BalasHapus
    Balasan
    1. Separator biasanya muncul otomatis ketika kita selesai menambahkan gambar. Asalkan gambar berada dipaling atas artikel maka gambar pertama otomatis bisa menjadi Cover.,

      Untuk paragraf yang hilang dan menggunakan separator, itu dikarenakan paragraf tersebut berada pada lingkup separator. Contoh :
      <div class="separator"><p>Paragraf</p></div> .. hal inilah yang membuat paragraf pertama hilang. Karena Javascript nya diperintahkan untuk menjadikan "separator pertama" sebagai cover.

      Solusinya adalah dengan menata keberadaan separator pada artikel tersebut. Ubah mode penulisan artikel ke mode HTML, lalu atur seperti dibawah ini :

      <p>Paragraf</p>
      <div class="separator">Kode Gambar disini</div>

      atau

      <div class="separator">Kode Gambar disini</div>
      <p>Paragraf</p>

      Intinya adalah ., setiap komponen yang berada pada lingkup "separator pertama" akan dihilangkan oleh JS..

      Hapus
  4. Balasan
    1. di MagOne bukankah sudah menggunakan fitur ginian mas?., klo cara ini diterapkan pada template MagOne, malah bentrok kodenya..

      Hapus
    2. Gk work punya ku cek di bungsudar.blogspot.com

      Hapus
    3. Wah., saya sudah view-source halaman blog anda., dan semua kode yang ada pada artikel ini belum anda terapkan pada template mu mas., :)

      Hapus
  5. Tutorialnya lengkap mas. Ini yang sedang dicari2. Sangat membantu sekali dalam memperindah blog dan meningkatkan pengujung.

    BalasHapus
  6. Menghilangkan Tampilan Ganda pada First Image gk work gan, solusinya dong?

    BalasHapus
    Balasan
    1. Mungkin template nya yg tidak support

      Hapus
    2. coba periksa ajax.googleapis.com, kalo belom ada silakan di pasang, nanti pasti work

      Hapus
    3. Tlong gan masih gagal, mohon bantuannya kamal.my.id

      Hapus
    4. terpaksa gambar sementara saya tag noscript. klo ada yg bisa bantu, tolong ya gan

      Hapus
    5. coba check dibagian isi artikelnya gan., posisi gambar harus benar benar paling atas dan mengandung class separator.,

      coba check artikelnya dengan mode HTML..Gambar pertama harus mengandung :
      <div class="separator"

      Bentuk dasar penulisannya seperti ini :
      <div class="separator"> kode gambar disini </div>

      Contoh :
      <div class="separator" style="clear: both; text-align: center;"> <img src="url_image.jpg"/> </div>

      Hapus

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.