Membuat template sendiri butuh proses dan waktu yang tidak sedikit. Apalagi jika pengerjaan itu tidak fokus pada satu pembahasan.
Seperti halnya dengan template blogspot yang dibuat dari nol. Hal yang ingin dilihat dari sebuah tampilan blog adalah kerapihan.
Untuk itu, agar semua postingan yang muncul di blog terlihat rapi, perlu dilakukan pemotongan paragraf secara otomatis menggunakan script "auto read more".
Cara Menambahkan Script Auto Read More di Blogspot
Fungsi "read more" pada Blogger bisa dilakukan secara manual maupun otomatis. Berikut langkah-langkahnya:
1. Tambahkan Script di Bawah </head>
<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes";
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 200;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
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><img src="'+img[0].src+'" width="'+img_thumb_width+'" height="'+img_thumb_height+'"/></span>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
</script>
<!-- Auto read more script End -->
2. Ganti <data:post.body/> Kedua
<!-- Auto read more Start -->
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<a expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
<!-- Auto read more End -->
3. Simpan Template
Klik tombol Simpan setelah selesai melakukan perubahan.
Kesimpulan
Membuat theme sendiri dari nol memang tidak langsung terlihat profesional. Namun dengan menerapkan script yang tepat, blog akan terlihat lebih rapi dan menarik.
Semoga berhasil.