Home » Belajar Seo web blog wordpress » Cara membuat auto readmore blogspot dengan javascript

Bagi temen-temen blogger yang lagi belajar membuat blog di blogspot pasti nanti ketemu dengan masalah ini? masalah apa?? masalah yang pernah saya alami saat belajar blogspot yaitu bagaimana caranya membuat auto readmore di blogspot atau gimana caranya membuat script  read more di blogspot? karena saya menggunakan template yang ga ada fasilitas auto readmore nya, lalu saya cari2 ketemu banyak tutorial namun banyak yg malah bikin bingung dan gagal, setelah sabar mencari akhirnya ketemu juga caranya yang bagi saya sangat bagus, dan gampang yaitu menambahkan code javascript di template blogspot tersebut. Nah berikut cara membuat auto readmore blogspot yang saya pakai dan berhasil silahkan di coba :

1. Cari kode </head> kemudian letakkan kode berikut diatas 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>

2. Cari kode <data:post.body/> dan hapus. Kemudian ganti dengan kode berikut :
<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’ expr:title=’data:post.title’ rel=’tag’>Read More… </a></span>
</b:if>
<b:if cond=’data:blog.pageType == "item"’><data:post.body/></b:if>

3. Jangan lupa simpan.

4. Lalu reload blog and dan lihatlah apa yang terjadi??

Tambahan info :
Anda bisa memodifikasi tampilan auto readmore blogspot anda dengan mengganti kode yang tercetak tebal dibawah :

summary_noimg = 250; (jumlah karakter yang muncul jika tanpa image thumbnail)
summary_img = 250; (jumlah karakter yang muncul jika menggunakan image thumbnail)
img_thumb_height = 120; (tinggi image thumbnail)
img_thumb_width = 120; (lebar image thumbnail)

Selamat mencoba…

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*

What is 13 + 12 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)
Google+ Plus Follow on Twitter Like On Facebook Email to us

Latest

cara menampilkan kode html dalam postingan
Cara cek artikel yang sudah di index oleh mesin pencari google
Cara disable pesan update notification di wordpress
Cara Merubah URL Login WordPress
menghapus watermark WonderPlugin Slider Free Version 4.3

Recent Posts

Visitor Counter