Membuat Auto Read More di Halaman Depan Blog

Baca Juga

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.

Contohnya seperti tampilan halaman depan blog ini atau seperti gambar ilustrasi di samping.

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/AVvXsEg0kJtmZ8_Jc7oLrT5S0c6kWxyza5Q5MYRWVh2i67L88Y1AwOdboYdllHFKqc_FpPjW38HaJsqVf99qAqzvYAruhmnhRVJ4dxSrN-7CNOpCuFC2GgYyZo7-bnkY-dn0Mrh4NE3rM7I25ec/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!

Sumber