QuinBlog

Pada tutorial kali ini saya akan menjelaskan tentang "Membuat Read More Otomatis Pada Blog".
menurut saya menggunakan Read More pada Blog anda membuat tampilannya lebih efisien dan minimalis.

Lantas bagaimana caranya membuatnya?

Langsung saja kita praktekan bagaimana cara "Membuat Read More pada Blog".

• Login ke akun Blog yang akan anda ubah tampilannya.
• Klik menu Template > Edit HTML (jangan lupa untuk mencentang "Expand Template Widget")
• Cari kode </head>, (gunakan "CTRL+F" pada keyboard untuk mempermudah pencarian). Jika sudah ketemu, copy kode dibawah ini, lalu letakkan di atas kode </head>,

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 280;
summary_img = 250;
img_thumb_height = 70;
img_thumb_width = 100;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+"..."}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 2px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>
</b:if>
</b:if>

• Masih pada halaman "Edit HTML" (jangan lupa untuk kembali mencentang "Expand Template Widget"). Sekarang cari kode <data:post.body/>. Jika sudah ketemu, ganti kode tersebut dengan kode yang ada di bawah. 

<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>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE -
<data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

• Sekarang klik "Simpan Template" dan lihat hasilnya.