f Cara Membuat First Image Cover Diatas Judul Artikel Blog Agar Blog Leboh Keren..!!! - Konten Cara Viral

Cara Membuat First Image Cover Diatas Judul Artikel Blog Agar Blog Leboh Keren..!!!


kontencaraviral.com-Hai bro kali ini kontencaraviral akan memberikan tips buat para blogger yang ingin mempercantik halaman blognya dengan Cara Membuat First Image Cover Diatas Judul Artikel Blog atau yang biasa kalian lihat di blognya JalanTikus.com.

Buat kalian yang penasaran ingin mencoba membuat kalian bisa ikuti tutorial yang bloggku bagikan ini, untuk cara membuatnya sangat mudah kok kalian hanya perlu mengikuti tutorial yang bloggku bagikan kali ini dengan benar dan detail. Atau kalian bisa liat demonya di blog JalanTikus.com secara langsung.

Tampilan Salah Satu Cover Yang Terdapat Pada Blognya JalanTikus.com

Membuat First Image Cover Diatas Judul Artikel Blog menggunakan JavaScrpit yang membuat sedikit loading blog kalian cenderung lemot, jika blog kalian mengutamakan tampilan blog tidak masalah tetapi jika kalian mengutamakan kenyamanan pengunjung saya tidak menyarankannya.

Cara Membuat First Image Cover Diatas Judul Artikel Blog


  • Seperti biasa kalian masuk ke blognya => Blogger.com
  • Masuk ke menu Tema => Edit Html => Cari kode <b:if cond='data:post.title'> jika kode tersebut lebih dari 1 maka kalian cari kode yang ke 2 (atau yang ke 3) jika sudah ketemu cari kode <b:else/> dibawahnya kode <b:if cind='data:post.title'> dan yang dekat dengan kode <h1 class='post-title entry title'> lebih jelasnya seperti gambar dibawah ini.

  • Copy kode dibawah ini tepat dibawahnya kode <b:else/> "jika kurang paham liat gambar diatas"

 <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"  silakan kalian ganti dengan URL gambar milik kalian. Ini hanya berguna untuk jika postingan artikel kalian tidak memiliki gambar.

  • Setelah itu kita pasang kode CSS nya agar image/gambar menjadi full cari kode </style> atau ]]></b:skin>
  • Letakkan kode dibawah ini 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;
   } 

  • Sekarang kalian cari kode </body> dan letakkan kode dibawah ini tepat diatas kode </body>
 <script type='text/javascript'>
//<![CDATA[
$(function() {
   $(".separator:first").remove();
      $(".post-body > img:first").remove();
                      });
//]]>
</script> 


  • Simpan tema dan lihat hasilnya.
Seperti yang sudah saya jelaskan diatas tadi, bahwasanya loading pada blog kalian akan sedikit terasa berat, apalagi template kalian sudah terdapat banyak JavaScrpit.

Mungkin sampai disini saja pembahasan bloggku mengenai Cara Membuat First Image Cover Diatas Judul Artikel Blog, jika ada yang kurang dimengerti dengan penjelasan bloggku diatas kalian bisa tanyakan pada kolom komentar dibawah, semoga bloggku dapat menjelaskannya.

Jangan tanya kenapa bloggku.com tidak menggunakan cara ini ? Simple kok karena bloggku mementingkan kepuasan pengunjung.

0 Response to "Cara Membuat First Image Cover Diatas Judul Artikel Blog Agar Blog Leboh Keren..!!!"

Posting Komentar

close

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel