Cara Memasang Read More Otomatis di Blogspot

Untuk para pengguna Blogger, kali ini penulis ingin berbagi cara sangat mudah untuk membuat read more otomatis di Blogspot.

Read More (Baca lebih lanjut) yang berfungsi untuk memotong postingan agar terlihat setengah di halaman depan atau beranda. Dengan memasukan kode Auto Read More di template, kamu tidak usah repot lagi membuat Read More secara manual. Berikut tutorialnya :

1. Login ke blogger dan masuk ke Template –> Edit HTML, kemudian centang Expand Template Widget.

2. Untuk mengantisipasi adanya kekeliruan atau kesalahan, sebaiknya lakukan backup template dahulu.

3. Untuk memudahkan pencarian kode HTML, tekan Ctrl+F. Dan selanjutanya cari kode </head> .

4. Kemudian copy paste kode berikut ini sebelum kode </head> .

<b:if cond=’data:blog.pageType != &quot;item&quot;’><script type=’text/javascript’>var thumbnail_mode = &quot;float&quot; ;summary_noimg = 450;summary_img =300;img_thumb_height = 110;img_thumb_width = 130;</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:0;margin:0 10px 0 0″><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></b:if>

5. Kemudian cari dan hapus kode di antara <div class=’post-header-line-1’/></div> hingga <b:if cond=’data:post.hasJumpLink’>

6. Ganti dengan kode berikut ini

  <div class=’post-body entry-content’>     <b:if cond=’data:blog.pageType == &quot;static_page&quot;’><data:post.body/><b:else/><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><span class=’rmlink’ style=’float:right;padding-top:5px;’><a expr:href=’data:post.url’>Readmore &#8594;</a></span></b:if><b:if cond=’data:blog.pageType == &quot;item&quot;’><data:post.body/></b:if></b:if>      <div style=’clear: both;’/> <!– clear for photos floats –>    </div>

7. Simpan Template dan selesai.