Home » , » Cara Membuat Auto Readmore dan Thumbnail tanpa JS di Blogspot

Cara Membuat Auto Readmore dan Thumbnail tanpa JS di Blogspot

Ini adalah cara membuat Auto Readmore tanpa menggunakan javascript. Agak berbeda dengan yang menggunakan js, cara ini / tanpa javascript  memiliki keuntungan karena lebih ringan dan tidak membuat loading blog menjadi berat.

Namun (menurut c2b) sama seperti dengan menggunakan js sedikit ribet  saat meletakkan codenya. karena kemungkinan ada lebih dari 1 code yang serupa yang salah satunya harus di ganti. Mungkin ada yg tahu cara cepat dan tepat mereplace data.post.body yang mana, tanpa coba2.....

Langkah pertama silahkan menuju dashboard blogger > Template > Edit HTML
Selanjutnya cari kode <data:post.body/> yang ke 2 atau 3 atau ke 4, lalu ganti dengan kode di bawah ini
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>  
  <b:if cond='data:blog.pageType != &quot;item&quot;'>  
   <b:if cond='data:post.firstImageUrl'>  
    <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a>  
   <b:else/>  
    <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSYJP4NEPJeDCH1gdhYDd1lZRQ66eOMUBE1Sz9ZPD2wDqtFIU-ttu_hGeuIFVHaQ0wOWhJyotzQ7-5RFeUNmdY8gyJmhDKRGGsPbhTDATUCuApjWtyHY-qpwERK3aIjkNtv6toLTQoUGho/s1600/no-thumbnail.png'/></a>  
   </b:if>  
   <div class='post-snippet'>  
    <data:post.snippet/>  
   </div>  
   <div class='rm-button-wrap'>  
    <a class='button' expr:href='data:post.url'>Baca Selengkapnya</a>  
   </div>  
  </b:if>  
 </b:if>  
 <b:if cond='data:blog.pageType == &quot;item&quot;'>  
  <data:post.body/>  
 </b:if>  
 <b:if cond='data:blog.pageType == &quot;static_page&quot;'>  
  <data:post.body/>  
 </b:if>  

Keterangan :
Yang berwarna merah adalah gambar pengganti di bagian homepage jika di artikel tidak ada gambar

Selanjutnya adalah dengan menambahkan CSS untuk penyempurnaan tampilan Thumbnailnya, silahkan letakkan kode di bawah ini tepat di atas kode ]]></b:skin> atau </style>
 .thumbnail-post {  
 width:100px;  
 height:100px;  
 float:left;  
 margin:0px 10px 0px 0px;  
 }  


Simpan, test!

0 comments:

Post a Comment

Test Feed Box

Adblock Detected

Like this blog? Keep us running by whitelisting this blog in your ad blocker

This is how to whitelisting this blog in your ad blocker

Thank you

×