Cara Membuat Gambar Cover Postingan Diatas Judul Blog

Cara Membuat Gambar Cover Postingan Diatas Judul Blog



Cara Membuat Gambar Pertama Menjadi Cover Postingan diatas Judul Blog. Sudah pernah lihat gambar awal dari postingan blog www.ndrie.com ini jadi gambar cover diatas judul blog. Banyak sekali yang bertanya-tanya soal ini dan meminta untuk dibuatkan tutorialnya. Baiklah kali ini saya akan berbagi tutorial Mengenai Cara Membuat Gambar Awal Postingan diatas judul blog. 

Langkah Untuk Membuat Gambar Pertama Jadi Cover Postingan Blog Diatas Judul Blog

Langkah pertama:

Cari kode seperti ini
<div class='post hentry' expr:id='data:post.id' itemscope='' itemtype='http://schema.org/BlogPosting'>
Letakkan kode ini dibawah kode tadi
 <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> 

Langkah kedua:

Tambahkan kode CSS ini diatas kode </head>
 <style type='text/css'>
  .post img.firstimage {
       width:100%;
       height:auto;
       max-width:100%;
   }
  .post-body .separator:nth-child(1) {
       display:none;
   }
</style> 

Langkah ketiga:

Tambahkan Javascript ini diatas kode </body> . Berfungsi untuk menghilangkan gambar awalan postingan blog kamu, jadi gambar awal postingan kamu akan berubah jadi cover di postingan blog kamu, sama seperti blog www.ndrie.com ini.. 
 <script type='text/javascript'>
//<![CDATA[
$(function() {
   $(".separator:first").remove();
      $(".post-body > img:first").remove();
                      });
//]]>
</script> 

Yeayyyy sudah selesai, silahkan save template lalu lihat tampilan postingan blog kamu berubah :D, selamat mencoba :D
Catatan 'Penting' Sebelum Berkomentar:
  • 1. Harap berkomentar sesuai dengan judul artikel.
  • 2. Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
  • 3. Tidak perlu tulis link di komentar, yang sudah komentar pasti akan saya kunjungi balik lewat profil kamu.
  • 4. Terima Kasih sudah berkunjung, untuk hubungi saya bisa melalui 'Halaman Kontak'
  • *Berkomentarlah dengan baik, Kepribadian kamu tercemin saat berkomentar.
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

20 comments

Praktek langsung aja lha, thank, Mas..

Balas

oh jadi gitu yah, saya baru tahu nih gan,, wah lumayan nih ilmu baru,, makasih banyak untuk sharenya... heheh, sekarang first image di postingan emang lagi trensd yah ... hehe

Balas

Wah klo soal kode dan edit html saya suka takut ikh. Kurang mahir soalnya. Tetapi paling ga sekarang saya jadi tau juga ilmunya. Trima kasih

Balas

Aduh html..
Aku cuma ngikut template. Maklum mas, kode2 gitu aku ga paham..tp makasih. Ngubek blog ini bnyk bngt ilmunya

Balas

Alhamdulillah terimakasih gan, sudah berhasil walaupun masih acak"an

Balas

agak ribet gan caranya, aku madih awam yg beginian:D

Balas

Mantap tulisannya mas bro.. saya harus banyak belajar kode html nih.. salam blogger bandung ya hehe

Balas

Caranya mudah dan praktis, artikel akan tampak lebih menarik karena artikel tidak terganggu oleh gambar. Sehingga miri-mirip gaya koran gitulah.

Balas

Template saya tida ada koding pada tahapan pertama. Pastinya tidak bisa diterapkan.

Balas

Jadi gak biasa ya mas, biasanya judul dulu baru gambar, ini malah sebaliknya. Kelihatan keren juga sih. Kapan-kapan mau nyoba ah, pengen ganti template lagi... Makasih ilmunya

Balas

ini sih terbilang gak terlalu ribet, thanks sharingnya mas :)

Balas

makin keren aja nih. makasih ilmu barunya :D

Balas

wah ini kudu blognya yang udah support css ya :D

Balas

wah, tapi bisa di semua template gak yaa?

Balas

kalau sha jarang otak atik blogspot, mudah2an bermanfaat ya :)

Balas

templateku pakai template dari pihak ketiga, takutnya utak - atik malah nggak beres blogku :D

Balas

wah ini nih yang saya cari-cari, modelnya kayak di wordpress. Sip saatnya cobain deh.

Balas

kalau saya lagi belajar dan menerapkan first image di atas judul, tapi hanya untuk di halaman depan/index. ini yang saya terapkan di blog saya (belalang). btw, salam kenal

Balas

Notification
Yuk Gabung menjadi member Diskusi Komunitas Blogger Indonesia yang tersebar di seluruh wilayah Indonesia, silahkan dipilih

- Forum Diskusi Blogger Indonesia
- Diskusi Komunitas Adsense Indonesia
- Komunitas Tutorial Blogger Indonesia

Terima kasih
Done