Cara Membuat Gambar Cover Di Postingan Blogspot

Dari situ saya jadi kepikiran gimana kalau blog Chaidir.Web.ID ini juga saya pasang fitur gambar Cover untuk di halaman postingan artikelnya. ^_^

Di beberapa template mungkin saja Anda sudah pernah melihat blog seperti yang saya maksud. Atau dari wordpress saya rasa lebih mudah lagi. Karna di wordpress sendiri kita bisa menggunakan opsi featured image. Sehingga jika theme yang digunakan mendukung, gambar tersebut bisa tampil sebagai cover di setiap halaman postingan blog.

Membuat Gambar Cover di Blogspot

Sebelumnya saya mau jelaskan sedikit, fitur gambar cover yang saya maksud disini adalah gambar yang dia bisa muncul diluar dari elemen konten artikel dan biasanya memiliki ukuran lebar yang penuh.

Kalau misalkan di akun media sosial gambar covernya statis atau tidak berubah kalau gak kita ubah sendiri. Pada halaman postingan blogspot, kita bisa membuat gambar cover yang berubah-ubah sesuai dengan gambar postingan artikel blog kita.

Cara kerjanya sangat sederhana. Kita hanya perlu memindahkan gambar yang tadinya ada di dalam bagian konten artikel supaya bisa muncul diluar. Jadi begini, setiap gambar yang kita posting dari blogspot, nantinya dia akan muncul di dalam elemen data:post.body.

Atau kalau di dalam template Anda akan melihatnya seperti ini :

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
   <data:post.body/>
</div>

Nah, untuk membuat gambar cover ini kita hanya perlu mengeluarkan satu buah gambar dari elemen data:post.body tersebut. Gimana caranya? 😀

Memasang Fitur Gambar Cover Pada Halaman Post Artikel

Supaya gak ribet, silahkan ikuti saja tiga langkah mudah berikut ini. Oh yaa, sebelumnya seperti biasa yaa Anda harus terlebih dulu login ke halaman Dashboard Blogger. Kemudian masuk ke tab Template – Edit HTML.

Langkah 1. Memasang kode HTML Gambar FirstImageURL

Pertama kalian harus tentukan dulu dimana lokasi gambar cover ini mau dimunculkan. Mungkin bisa saja template kita memiliki struktur HTML yang berbeda. Jadi iyaa Anda harus menyesuaikannya sendiri, supaya lebih pas sesuai selera.

Kalau saya meletakkannya tepat dibawah kode ini :

<div class='post hentry' expr:id='data:post.id' itemscope='' itemtype='http://schema.org/BlogPosting'>

Dan berikut kode HTML yang harus Anda pasang :

<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>

Langkah 2. Memasang kode CSS pada Gambar Cover

Anda bisa meletakkan kode CSS ini di atas tag </head>. Atau masukkan saja di dalam stylesheet CSS template Anda. 🙂

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

Langkah 3. Memasang kode Script menghapus Gambar FirstImage

Kode HTML yang kita pasang pada langkah 1 diatas hanya bertujuan untuk menampilkan gambar pertama dari elemen data:post.body agar bisa muncul pada lokasi lain yang kita inginkan. Sedangkan gambar pertama yang asli sebenarnya masih tetap akan muncul di elemen data:post.body tersebut.

Jadi pada langkah ini kita akan menghapus gambar yang asli, supaya yang muncul hanya gambar cover yang kita inginkan saja.

Silahkan letakkan kode Script berikut tepat di atas tag </head>.

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

Terakhir, simpan perubahan dan coba lihat apa yang terjadi dengan template Anda. Berhasil atau tidak? 😀 Hehehe ( kalau template Anda rusak jangan salahkan saya yaa! )

Contoh Penerapan Gambar Cover di halaman Post Tokopedia.com

Cara Alternatif Membuat Gambar Cover Pada Postingan Blog

Ketiga langkah diatas adalah cara yang saya pakai untuk blog Chaidir.Web.ID (sekarang ini). Sebenarnya ada cara lain yang bisa digunakan. Perbedaannya hanya pada langkah pertama saja. Jika cara yang sebelumnya kita memunculkan gambar cover dengan menggunakan fungsi expr:src=’data:post.firstImageUrl’ , pada cara ini kita langsung menggunakan fungsi JQuery Append.

Letakkan kode HTML berikut ini sebagai pengganti langkah pertama diatas.

<div class='coverImage'/>
<script type='text/javascript'>
//<![CDATA[
 $(document).ready(function() {
    var url=$('.post-body img').attr("src");
    $('<img alt="cover-chaidir-web-id" class="firstimage" src="'+url+'" />').appendTo('.coverImage');
    $(".separator:first").remove();
         });
//]]>
</script>

Berikutnya untuk kode CSS masih sama. Sedangkan untuk kode Script seperti pada langkah ketiga tidak perlu digunakan lagi. Karna pada kode diatas kita sudah sekaligus memasang fungsi JQuery remove.

Terakhir, simpan template Anda. Hasilnya? Mudah-mudahan sama saja dengan cara pertama yang sebelumnya. Tinggal tergantung selera Anda masing-masing mau pakai yang mana. 😀

Tips Menggunakan Gambar Cover di Blog

Oke sekarang, saya anggap Anda sudah berhasil memasang fitur gambar cover seperti yang saya jelaskan diatas. Walaupun saya yakin bisa saja ada beberapa sahabat yang masih bingung. Tapi gak masalah, nanti kalian bisa tanya-tanya langsung ke saya lewat kolom komentar. Insya Allah kalau ada waktu luang akan saya bantu sampai berhasil. 😀

Tips penting yang ingin saya sampaikan adalah :

1. Gunakan gambar cover yang ideal.
2. Lebih baik jika gambarnya berbentuk landscape (memanjang ke samping).
3. Lebih bagus gunakan ukuran gambar 1000×563 piksel atau dengan ratio 16:9.

Kenapa harus begitu? Sebenarnya gak harus sih. Salah satu kekurangan dari teknik ini adalah saya belum buat pengaturan supaya gambar covernya selalu memiliki ukuran yang pas. Pengaturan CSS yang saya gunakan diatas hanya untuk membuat ukuran lebarnya menjadi penuh saja. Untuk ukuran tinggi jadinya iyaa bisa bebas.

Sebenarnya bisa saja kita pasang ukuran tinggi maksimum, tapi jadinya nanti gambarnya gak proporsional dengan ukuran aslinya. Ibaratkan jadi kenak efek scretch kan jelek. Makanya saya biarin gitu aja.

Supaya Anda paham dengan yang saya maksud, coba Anda upload gambar cover di facebook. Saat ukuran gambar yang mau Anda pasang adalah berbentuk portrait pasti yang terlihat hanya sebagian saja kan? Artinya gambar akan kepotong sebagian atas dan bawahnya. Kalau disini tidak bisa seperti itu. Bisa sih sebenarnya tapi nanti malah jadi repot. ^_^

Okelah, saya rasa sekian dulu tutorial sederhana hari ini. Mudah-mudahan bisa bermanfaat untuk sahabat yang hobi mengotak-atik tampilan template . Sekiranya ada pertanyaan jangan sungkan untuk bertanya lewat kotak komentar yaa.

Sampai jumpa!! Dan Salam Semangat..