Cara Membuat First Image Cover Diatas Tajuk Artikel Blog

Cara Membuat First Image Cover Diatas Tajuk Artikel Blog
Hai kali ini O4u akan memberikan tips untuk blogger yang ingin mencantikan laman blog mereka dengan membuat Cover Image Pertama Di Atas Artikel.

Bagi anda yang ingin tahu untuk membuat anda dapat mengikuti tutorial yang saya kongsikan ini,

Buat Cover Image Pertama Di Atas Tajuk Artikel Blog menggunakan JavaScrpit yang membuat blog anda agak lambat, jika blog anda mementingkan penampilan blog itu tidak masalah tetapi jika anda mementingkan kemudahan pengunjung saya tidak mengesyorkannya untuk memasang cover image ini.

Cara Membuat Cover Imej Pertama Di Atas Tajuk Artikel Blog

Seperti biasa anda masukkan blog => Blogger.com
Pergi ke menu Tema => Edit Html => Mencari kod <b: if cond = 'data: post.title'> jika kod lebih daripada 1 maka anda mencari kod kedua (atau ketiga) jika anda telah menemui kod tersebut. <b: else /> di bawah kod <b: if cind = 'data: post.title'> dan mereka yang hampir dengan kod <h1 class = 'tajuk masuk selepas judul'> 

Salin kod di bawah dan letakan betul-betul di bawah kod <b: else />

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

Jangan lupa untuk mengubah URL_GAMBAR_NOIMAGE sesuai gambar no image anda.

Seterusnya pasangkan code css berikut ke dalam css anda
 .post img.firstimage {
       width:100%;
       height:auto;
       max-width:100%;
   }
.post-body .separator:nth-child(1) {
       display:none;
   }

Seterusnya cari code </body> dan pasangkan code berikut di atas code </body>
<script type='text/javascript'>
//<![CDATA[
$(function() {
   $(".separator:first").remove();
      $(".post-body > img:first").remove();
                      });
//]]>
</script>

JavaScript Ini berpungsi untuk menyembunyikan gambar first image di dalam article anda, dan seterusnya hanya cover image yang akan mengantikan first image.

Sekian posting saya tentang cara membuat cover image di blogger.