Cara Membuat Read More di Blog Blogspot

Mungkin belum banyak yang mengetahui bagaimana cara menambahkan opsi read more pada bagian bawah setiap posting blog yang kita buat. Untuk itu disini saya akan mencoba menjelaskan secara jelas dan 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.

Baik, langsung saja kita mulai pembahasan cara membuat read more di blog blogspot.

1.Masuk ke Template dan klik Edit HTML

2. Tekan CTRL + F, maka akan muncul search box di pojok kiri bawah dan cari kode html </head>
   note: ketika melakukan pencarian, hasil pencarian tidak selalu keluar, untuk itu geser code html ke bawah dan lakukan pencarian lagi

 3. jika kode </head> sudah ditemukan, 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 blok kode <data:post.body/> , kemudian ganti 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>

5. Jika sudah tinggal Anda klik Save dan, silahkan lihat hasilnya.

selamat mencoba!!!