Cara Membuat First Image Cover Diatas Judul Artikel Blog


Bloggku.com-Hai bro kali ini bloggku 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.

1 Response to "Cara Membuat First Image Cover Diatas Judul Artikel Blog"

  1. WIN323 - Merupakan Situs Online Betting NO.1 Di Indonesia.
    Dengan WIN RATE tertinggi 97% + Bonus Bonus Super Heboh yang bisa
    anda dapatkan setiap hari nya!!

    Bonus Bonus Super Heboh Dari WIN323
    ~ Bonus New Member : 20%
    ~ Bonus Next Deposit : 5%
    ~ Bonus Cash Back : 5%

    Minimal Deposit : Rp.25.000
    Minimal Withdraw : Rp.25.000

    Tunggu apalagi mari langsung bergabung bersama WIN323 dan jadilah
    pemenang di setiap taruhan yang Bossku lakukan :)

    Contact Person WIN323 :
    WA : +855 7863 3430
    WA : +855 7863 3425
    Line: Official.win323

    ReplyDelete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel