Read More Otomatis Blogger

Kali ini Arya Blog akan share cara memendekkan posting di beranda secara otomatis, dengan kata lain “insert jump break” secara otomatis. Sebenarnya secara manual juga bisa tetapi akan sangat merepotkan jika setiap membuat posting harus memberi jump break. Dengan ini kalian tidak harus bersusah payah insert jump break. Penampakkanya seperti gambar di bawah ini. 

1. Login ke Blogger.

2. Pilih Template.

3. Klik Edit HTML > Lanjutkan.

4. Centang box ‘Expand Template Widget’.

5. Cari kode </head> menggunakan CTRL+F.

6. Lalu, letakkan kode di bawah ini tepat diatas kode </head>.

<script type=’text/javascript’>
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

<script type=’text/javascript’>
var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 300;
summary_img = 255;
img_thumb_height = 100;
img_thumb_width = 125;
</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(thumbnail_mode == “yes”) {
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>

Keterangan:

  • 300 = jumlah karakter read more artikel tanpa gambar.
  • 255 = jumlah karakter read more artikel dengan gambar.
  • 100 = tinggi gambar artikel yang ingin ditampilkan pada read more.
  • 125 = lebar gambar artikel yang ingin ditampilkan pada read more.

7. Masih di Edit HTML, cari kode <data:post.body/>, jika ada 2 pilihlah kode yang ke-2.

8. Ganti kode <data:post.body/> yang ke-2 dengan kode di bawah ini.

<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<div expr:id=’&quot;summary&quot; + data:post.id’><data:post.body/></div>
<script type=’text/javascript’>createSummaryAndThumb
(&quot;summary<data:post.id/>&quot;);
</script>
</b:if>
<b:if cond=’data:blog.pageType == &quot;item&quot;’><data:post.body/>
</b:if>


9. Klik ‘save template’ dan selesai.


Tags : Blogging, Read More, Selengkapnya, Memotong posting, posting beranda, posting home.

Arya

Arya Author

Leave a Reply

Your email address will not be published. Required fields are marked *