Cara Meringkas Postingan Blog Dengan Menggunakan Read More Otomatis
Pada kesempatan kali ini saya akan memberikan tutorial cara meringkas postingan blog dengan menggunkan read more otomatis.
Sebelumnya apakah ada yang belum tau apa itu read more ?
Jadi read more itu adalah sejenis tulisan yang berada di depan halaman
blog yang berguna untuk meringkas postingan pada blog, dan apabila
pengunjung mengklik tulisan itu maka pengunjung blog akan menuju
postingan secara utuh. oke biasanya red more itu bisa diganti dengan
kata (baca selengkapnya, read post, continue reading,dsb.)
Langkah-langkah mebuat red more sebagai berikut :
1. Login ke Bloger
2. Klik Template, lalu klik edit HTML
3. Carilah kode </head> dengan menekan CTRL+F
4. Jika sudah ketemu letakan kode dibawah ini tepat di atas kode </head>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
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>
5. Jika sudah carilah kata <data:post.body/> dengan menekan CTRL+F
6. Lalu jika sudah ketemu ganti dengan kode dibawah 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>
<span class='rmlink'
style='float:left'><a expr:href='data:post.url'>READMORE -
<data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
7. Lalu klik simpan template
Keterangan kode diatas :
1. summary_noimg merupakan jumlah karakter yang ditampilkan tanpa menggunakan gambar dalam postingan blog.
2. summary_img merupakan jumlah karakter yang ditampilkan ketika dalam postingan blog terdapat gambar.
3. img_thumb_height merupakan tinggi gambar yang ditampilkan.
4. img_thumb_width merupakan lebar gambar yang ditampilkan.
5. Tulisan “READ MORE” dapat diganti sesuai keinginan kita, misalnya diganti dengan “baca selengkapnya,dsb"
Sekian tutorial meringkas blog dengan menggunakan read more otomatis, Selamat mencoba....
GOOD LUCK KAWAN :)
