Cara memberi Penggalan Kode HTML pada Blog

Membuat blog tampil lebih menarik dan enak untuk
dipandang dengan membuat penggalan posting, atau
lebih banyak dikenal dengan istilah Read More...
Ini berfungsi untuk meringkas postingan yang terlalu
panjang agar tampilan terlihat lebih rapi. Untuk caranya
langsung saja lihat di bawah ini..

Cara membuat Read More:

1. Masuk ke Template dan klik Edit HTML

2. Tekan CTRL + F, dan cari kode html </head>

3. 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. Selanjutnya cari kode ini <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. Kode <data:post.body/> yang diganti biasanya adalah yang kode Kedua

    ( itemprop='description articleBody' )

6. Untuk teks  Read More yang berwarna biru kamu dapat menggantinya dengan

    Selanjutnya/Selengkapnya atau yang lain sesuai keinginan kalian.

7. Jika sudah klik Preview/Pratinjau untuk melihat hasilnya. Jika belum berhasil kemungkinan 

    banyak terjadi pada peletak'an kode yang kedua, antara kode <data:post.body/> atas 

    atau yang bawah. Jika sudah selesal tinggal Save atau Simpan Template.