Membuat Read More Cara ke Dua

Sebelumnya Blog aapaaja telah membahas bagaimana membuat Auto read more. pada pembahasan kali ini kita akan membahas kembali auto Read More pada blogspot, hanya saja pada pembahasan kali ini kita menggunakan script yang berbeda dari pembahasan sebelumnya. Nah selain kita dapat menggunakan cara sebelumnya pembahasan kali ini dapat menambah pengetahuan kita, tidak hanya mengenal satu macam saja. agar tidak banyak basabasi mari kita langsung saja.

Pertama tentu kita login terlebih dahulu ke account blog kita. urutan pemilihannya yaitu pada tab Rancangan>Edit HTML>Centang Expand Template Widget.

Lanjutkan tahap dimana kita akan melektakkan script. Agar cepat Teman-teman dapat menggunakan fasilitas Find pada Aplikasi Browse yang sedang kita gunakan. Maka cari </head>  setelah ketemu lanjutkan dengan meletakkan scriptnya. Ok ini scriptnya..

<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 100;
</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(thumbnail_mode == "yes") {
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>

Pada script di atas Teman-teman dapat mengubah sesuai selera atau kebutuhan yaitu  :

summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 100;

Kita lanjutkan dengan meletakkan script berikutnya. Gunakan lagi fasilitas find dan cari <data:post.body/> ganti dengan script yang berikut ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read More >></a>
</b:if>
</b:if>

Selanjutnya untuk script yang ini pada Read More >> yang di cetak tebal Teman-teman dapat mengubahnya sesuai dengan keinginan. Sekitan dari Blog Aapaaja semoga bermanfaat.

Artikel Terkait