Auto Read More Tanpa JavaScript

Pemasangan read more merupakan pemasangan sepenggal kalimat yang dituliskan dalam artikel blogger. Biasanya ini digunakan oleh pengguna blogger pada home page saja. Alasan kebanyakan dari mereka adalah memperingkas home page (halaman depan) blogger. Tak jarang dari kebanyakan tutorial yang sudah memberikan tips untuk pemasangan read more ini. Baik read more yang diganti oleh gambar ataupun read more manual.

Pada tutorial ini, murni menggunakan tag data default dari blogger. ini bisa memperingan pemasangan read more dengan javascript. Berikut demo yang bisa anda liat dari pemasangan read more otomatis tanpa javascript.

Cara membuatnya adalah :

Edit HTML template anda dan jangan lupa centang Expand Widget Templates dan 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/AVvXsEhVyrIo3dlzXPmenRtQr3guI4eKyfcf9p5aX6moJm-Orrcur2W9PrZHN7MsSzDX1RfWxc0NXjaZ-8BHvZYjyyn8kSlaKNtYbFWm_6_4c-MYOJAXVeLvX2zjwUHSpyEmMkFA8XsAcl9SdYs/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'>Baca Selengkapnya</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>

Jika template anda sudah menggunakan auto readmore dengan javascript silakan cari kode berikut :

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

dan ganti semua kode diatas sehingga 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/AVvXsEhVyrIo3dlzXPmenRtQr3guI4eKyfcf9p5aX6moJm-Orrcur2W9PrZHN7MsSzDX1RfWxc0NXjaZ-8BHvZYjyyn8kSlaKNtYbFWm_6_4c-MYOJAXVeLvX2zjwUHSpyEmMkFA8XsAcl9SdYs/s1600/no-image.png'/></a>
</b:if>
<div class='post-snippet'><data:post.snippet/></div>

Langkah terakhir, silakan modifikasi auto read more template anda dengan sentuhan CSS berikut yang biasanya diletakkan sebelum kode ]]></b:skin>

.post-thumbnail {
  width:72px;
  height:72px;
  float:left;
  margin:0px 10px 0px 0px;
}

Simpan Template anda dan lihat hasilnya.