Cara membuat Read More otomatis di Blogspot

Cara Membuat Read More di Blog Blogspot mungkin belum banyak yang mengetahuinya,apa lagi anda yang baru membuat blog dan ingin mempercantik tampilan blog anda.
Sebenarnya ada cara untuk membuat read more manual bawaan blog sendiri,Caranya adalah pakai insert Jump break pada menu buat entri atau bisa lihat gambar di bawah ini
Dan Sekarang kita akan membuat Read More secara otomatis menggunakan bantuan dari jump link yang ada di blogspot. Dalam tutorial ini saya menggunakan Template standar blogspot

Langkah - langkah membuat Read More otomatis sebagai berikut

1. Buka Blogspot anda.
2. Masuk ke Template dan klik Edit Template ( ada baiknya mencadangkan dulu untuk berjaga - jaga.
3. Klik CTRL + F, dan cari kode html </head>
4. Letakan kode dibawah ini, tepat diatas kode html </head>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 275;
summary_img = 275;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
5. Lanjut dan cari kode ini <data:post.body/> dan ubah dengan kode HTML di bawah ini.
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div class='readmore-link'><span class='arrow'>›</span> <a expr:href='data:post.url'>Read More</a></div>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

• Jika sudah benar Ada baiknya di coba dulu dengan klik pratinjau

Jika bingung, karena ada banyak sekali kode <data:post.body/>, kalau pakai template standar yang diganti adalah yang kode Kedua ( itemprop='description articleBody' )

Mungkin sekian saja artikel dari saya tentang Cara membuat Read More otomatis di Blogspot, semoga bermanfaat

Tweet