Cara Membuat Read More Otomatis di Blog

Cara Membuat Read More Otomatis di blog - Pada kali ini kita akan membahas cara membuat read more otomatis atau jump break otomatis di blog. Read more otomatis merupakan sebuah istilah dalam menampilkan penggalan kalimat pada halaman homepage blog. Blogger telah menyediakan Jump Break untuk membuat read more yg hanya dapat dilakukan secara manual. Dengan read more otomatis tentu hal ini tak perlu kita lakukan. Read more otomatis juga bisa mempercepat loading blog dan membuat blog lebih kelihatan simple dan dinamis. Bagi para blogger pemula yg ingin membuat read more otomatis di blog, simak langkah-langkah dibawah ini.

Script Read More Otomatis

• Login ke akun blogger anda.
• Buka halaman template > Edit HTML.
• Cari kode </head> gunakan CTRL + F untuk mempermudah pencarian.
• Paste kedua script read more otomatis berikut tepat diatas </head>.

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> 

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; }

HTML Read More Otomatis

• Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p>. Seperti biasa gunakan CTRL + F untuk mempermudah pencarian. Jika ditemukan 2 kode yang sama,  ganti kode yang pertama.
• Jika sudah ketemu silahkan anda ganti kode tersebut dengan kode dibawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
      <div class='read-more'>
      <a expr:href='data:post.url'>Readmore &#187;</a>
      </div>
</b:if>
</b:if>

• Simpan template dan lihat hasilnya

Untuk tulisan warna merah, ubah sesuai dengan keinginan. Demikianlah tutorial mengenai cara membuat read more otomatis atau cara membuat jump break otomatis di blog. Semoga artikel ini dapat bermanfaat bagi kita semua. Jangan lupa like dan share.