Jasa SEO Blog

Membuat Auto Read More di Halaman Depan Blog

Membuat Auto Read More di Halaman Depan 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.

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;http://4.bp.blogspot.com/-bcu-pBY2WOc/VJjkTlYvLvI/AAAAAAAAFRA/ZEyoKibQNmM/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!

Labels: Desain Blog, Tips Blog

Thanks for reading Membuat Auto Read More di Halaman Depan Blog. Please share...!

0 Comment for "Membuat Auto Read More di Halaman Depan Blog"

Spammy comment and live link will not be published. Good comment will encourage reader to visit your profile and blog.

Back To Top