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.

Live Demo

Cara membuatnya adalah :

Edit HTML template anda 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/AVvXsEi9Uabw5JQEYpkHvm1Raf5WlVDDt_CFl1siL2UTMgTutUXd4OGpqfzYDQDid140RarbGrB9Kth_Xtr4zPvLJur1-bzaD6dwMTlBArIfZGDf6amsk9N8VBJpXB0HyQTTGnB5sAP7DWKC5fI/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/AVvXsEi9Uabw5JQEYpkHvm1Raf5WlVDDt_CFl1siL2UTMgTutUXd4OGpqfzYDQDid140RarbGrB9Kth_Xtr4zPvLJur1-bzaD6dwMTlBArIfZGDf6amsk9N8VBJpXB0HyQTTGnB5sAP7DWKC5fI/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;
}

Angka 72px merupakan tinggi dan lebar image/gambar yang ditampilkan pada readmore otomatis yang diterapkan.

Simpan Template anda dan lihat hasilnya.Satank MkrBerkomentar

Bagikan kepada teman!

DMCA

Garis