Cara Membuat Auto Read More Di Blog

CARA menampilkan atau membuat ringkasan berupa "Auto Read More" di Halaman Depan Blog. Tampilan posting di halaman depan tidak full, tapi beberapa baris saja, sekitar satu alinea.

Tutorial ini untuk template blog yang belum auto read more, seperti template bawaan blogger. Kalau template seo friendly biasanya sudah didesain autoreadmore.

1. Template > Edit HTML
2. Simpan kode berikut ini di atas kode </head> 

<script type='text/javascript'>
<!-- Customize swtAutoSummary Widget -->
var Thumbnail = true;
Thumbnail_Width = 150;
Thumbnail_Height = 100;
Summary_With_Thumbnail = 200;
Summary_Without_Thumbnail = 250;
var Summary_Noimage_Thumbnail = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin-x_Y_ZtG-_iuC6XgRiT_6HNksyCtURqfXrfimA7q8aLI1T71bDBe0VMKwRjn4NGIVrN2PLiRmvpUD2QeC3c9T1BPeKMfOTrguFkgcPI4C-URCxdqAyjsOt0E-VCFSA5XmFy67DiP7g0/s1600/swtAutoSummary-Thumbnail.png&quot;;
</script><!-- Tutorial at http://www.superwebtricks.com/?p=752 -->
<script src='https://9e03e74125fb7ace004443ce27e5dcd1808a3961.googledrive.com/host/0B-tJ1weveGVDQWsyWjRNbHhtWFk/swtAutoSummary-JavaScripts.js'/>

3. Copy & Paste kode berikut ini di atas kode  ]]></b:skin> 

.swtSummary {

text-align: justify;
}
.swtSummary img {
position: relative; float:left; margin: 5px 10px 5px 0;
opacity:0.7;
filter:alpha(opacity=70);
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
transition:all .4s ease-in-out
}
.swtSummary img:hover {
opacity:1;
filter:alpha(opacity=100);
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
transition:all .4s ease-in-out

4. Hapus kode berikut ini:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

5. Ganti/replace kode <data:post.body/>. Jika ada 3 kode tersebut, maka ganti kode yang kedua. Jika tidak berhasil, kembalikan ke semula (Ctrl+Z) dan ganti kode yang ketiga. (Klik "Preview Template" untuk melihat hasilnya).

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<div class='swtSummary' expr:id='&quot;swtExcerpt-&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
swtAutoSummay(&quot;swtExcerpt-<data:post.id/>&quot;);
</script><!-- Tutorial at http://www.superwebtricks.com/?p=752 -->
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

6. Klik "Preview Template" untuk melihat hasilnya.

7. Save Template!