Readmore with Post Title

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

Bagi kita yang sering posting banyak sekali, tentu saja kita jenuh untuk membaca semuanya. Maka dari itu lebih baik kita menggunakan Readmore. Lha, kali ini saya akan membahas, bagaimana sih cara membuat auto readmore atau readmore terbaru dengan menggunakan Judul Posting. Langsung saja ke TKP

Langkah-langkahnya

1. Masuk ke akun anda
2. Kemudian klik Rancangan, Edit HTML
3. Jangan lupa centang Expand Template Widget
4. Kemudian cari kode ini

</head>

5. Copy kode di bawah ini

<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[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
********************************************/
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>

6. Dan letakkan di atas

</head>

7. Kemudian cari kode ini

<data:post.body/>

Kemudian ganti atau replace dengan kode yang 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'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

8. Simpan Template anda
9. Kemudian Preview

Cara mensetting Readmore

• var thumbnail_mode = "float";
  

  kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)

• summary_noimg = 250;
  

  Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail

• summary_img = 250;
  

  Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail

• img_thumb_height = 120;
  

  Thumbnail 'tinggi dalam pixel

• img_thumb_width = 120;
  

  Thumbnail 'lebar dalam pixel

ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait