Cara membuat readmore otomatis

Rasananya aneh jika seseorang masuk kehalaman depan blog anda melihat artikel-artikel panjang dan harus menggulung kebawah, jika terlalu banyak menggulung halaman blog anda, pengunjung pastinya merasa segan.

Untuk mengatasi hal itu agar secara otomatis artikel-artikel anda terpotong buatlah sebuah artikel yang terpenggal-penggal caranya dengan membuat readmore otomatis.

 

 contoh readmore seperti pada blog ini

Berikut langkah-langkah cara membuat readmore otomatis :

1. Masuk ke dasboard blog anda klik tata letak klik edit halaman dan klik Expand Template Widget

2. Cari code kemudian masukan code dibawah ini dan letakan di bawah code tersebut.

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://h1.ripway.com/blogproperti/read-moreotomatis.js ' type='text/javascript'/>

3. Cari code <data:post.body/> atau code <p><data:post.body/></p> replace code tersebut atau ganti code tersebut dengan code di bawah ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

ket :
Summary noimg 430 = tinggi artikel terpenggal tanpa image
Summar img 340 = tinggi artikel terpenggal dengan image
Readmore bisa anda ganti dengan Baca Selengkapnya, full read dll.

4. Simpan template dan lihat hasilnya.

Jika anda ingin menambahkan background pada kata READMORE... masukan code CSS berikut sebelum code ]]></b:skin>

#colLeft .blogItem a.more-link {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1YM7dPUbmMQX6EqHGhxGKmrJrhhA9iAfcMcFbNX86QpRzEq2iB-_-VTva1RVU8KAfx8oOy1YkJZnvqiskx2n8ddG4PbXEQSlcS1OpPPO_hWHxAz96v91Gt58JUtMAZ81T-brEgbvGKg/s1600/bk_readmore_blue.png) 0 0 no-repeat;
color:#fff;
}

Ganti url image yang berwarna merah dengan url image anda.
Selamat mencoba!