Cara Buat Readmore Tanpa Javascript Di Blogspot

Mengurangi penggunaan javascript akan mengurangi beban loading blog pada browser, dan akan membantu meningkatkan pagespeed blog, bisa juga mengkompres fies javascript untuk memperkecil ukuran files javascript. tapi lebih baik  tidak terlalu banyak menggunakan javascript pada blog terutama seperti blogspot.

 

Nah Readmore selama ini banyak menggunakan files javascript dan untuk membuat readmore blogspot tanpa javascript
bisa di ikutin tips dibawa ini:

1. Login ke blogger
2. pilih Edit HTML template
3. Beri tanda centang Expand Widget Templates
4. Lalu cari kode berikut <data:post.body/> dan ganti dengan kode dibawah 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.thumbnailUrl'>
<a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' expr:src='data:post.thumbnailUrl'/></a>
<b:else/>
<a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOfIpSFaYeuEJcPOuh3mMS-2hI7hyphenhyphenRDkpXGjxSGvXQffLZGAwIpjNxE6TeBobjIEqR5kM00DG0HrL6y_V3IZqu3IFKjBrs8SY6IH1YQHV8CGZr7EJV1uuWhufvKtf3zaig9uEnw4InT1E/s1600/no-image.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'>Readmore</a>
</div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
</b:if>
</b:if>

5. Simpan template.


Catatan:

1. Jika template sebelumnya sudah menggunakan Autoreadmore dengan javascript silakan cari kode berikut ini:

    <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>

2. Lalu ganti semua kode diatas sehingga akan menjadi seperti ini :

    <b:if cond='data:post.thumbnailUrl'>
        <a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' expr:src='data:post.thumbnailUrl'/></a>
    <b:else/>
        <a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOfIpSFaYeuEJcPOuh3mMS-2hI7hyphenhyphenRDkpXGjxSGvXQffLZGAwIpjNxE6TeBobjIEqR5kM00DG0HrL6y_V3IZqu3IFKjBrs8SY6IH1YQHV8CGZr7EJV1uuWhufvKtf3zaig9uEnw4InT1E/s1600/no-image.png'/></a>
    </b:if>
    <div class='post-snippet'><data:post.snippet/></div>

3. Sedikit modifikasi readmore blogspot kamu dengan bantuan CSS.
   Copy dan pastekan kode css dibwah dan letakkan sebelum kode ]]></b:skin>

    .post-thumbnail {
      width:100px;
      height:100px;
      float:left;
      margin:0px 10px 0px 0px;
      }/div>

Atur setting ukuran sesuai keingingan sobat

4. simpan dan lihat hasilnya.
  

Read More