Cara Membuat Read More di Blog Blogspot mungkin belum banyak yang
mengetahuinya, untuk itu disini saya akan mencoba menjelaskan secara
singkat Bagaimana Cara Membuat Read More di Blog Blogspot.
Tapi sebelumnya saya ingin memberitahukan bahwa Read More yang akan kita
buat ini otomatis, maksudnya kita akan belajar Cara Membuat Read More
secara otomatis menggunakan bantuan dari jump link yang ada di blogspot.
Dalam tutorial ini saya menggunakan Template Sederhana (standar) dari Blogger.
Baik, langsung saja kita mulai pembahasan cara membuat read more di blog blogspot.
Cara Membuat Read More di Blog
1. Masuk ke Template dan klik Edit Template
2. Klik CTRL + F, dan cari kode html </head>
3. 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>
4. 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 == "item"'><data:post.body/></b:if>
5. Disini banyak blogger yang bingung, karena ada banyak sekali kode
<data:post.body/>, kalau pakai template standar yang diganti
adalah yang kode Kedua ( itemprop='description articleBody' )
6. Jika sudah tinggal Anda klik Save dan, silahkan lihat hasilnya. Jika
cara membuat read more di blog Anda berhasil, maka hasilnya akan seperti
gambar dibawah ini.