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 == &quot;item&quot;'><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....

sumber : (http://peluangbisnisonlinemodalkecil.blogspot.com/2012/09/cara-membuat-read-more-otomatis-di-blogspot.html)

Artikel Terkait