Expandable post atau lebih dikenal dengan "Read More" adalah fitur yang
membuat blog sobat menunjukkan hanya sebagian dari posting sobat pada
halaman indeks yaitu home, label dan halaman arsip. Pada akhir
pratinjau setiap akan ada sebuah link ke halaman posting, biasanya
menempel pada frase "Read More".
Auto Readmore berfungsi otomatis mempersingkat posting sobat
dan membuat thumbnail dari gambar yang ada di pos. Hal ini juga
membantu untuk memuat halaman lebih cepat. Hal ini juga menunjukkan dan
thumbnail gambar yang membantu untuk menarik pembaca. Saya juga
menambahkan auto read more ke blog saya. Otomatis read more untuk
blogger dengan posting thumbnail dapat dilakukan dengan memasukkan
beberapa kode ke dalam template blog sobat. langsung aja sob, ikuti langkah-langkah dibawah ini...
Langkah-Langkah membuat Auto Readmore
1. Buka akun Blogger sobat
2. Pergi ke Blogger Dashboard> Template> Edit HTML.
3. Periksa "Expand Template Widget".
4. Cari (Ctrl + F) </ head> tag
5. Copy dan paste kode di bawah ini sebelum/di atas </head>:
<!-- VB Auto Read More Script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</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>
<!-- VB Auto Read More Script End -->
Note :
Sobat dapat menyesuaikan read more dengan mengubah nilai-nilai dari variabel-variabel berikut:
- thumbnail_mode – set ke "yes" jika Anda ingin menampilkan thumbnail dengan ringkasan teks
- summary_img – specify jumlah karakter (termasuk spasi) yang ingin ditampilkan dalam ringkasan,
dengan thumbnail.
- summary_noimg – specify jumlah karakter (termasuk spasi) yang ingin ditampilkan dalam
ringkasan, bila ada thumbnail ada.
- img_thumb_height and img_thumb_width -specify adalah tinggi dan lebar thumbnail (dalam
piksel).
6. Sekarang cari kode <data:post.body/> dan ganti kode tersebut dengan kode dibawah ini :
<!-- VB Auto Read More Start -->
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='more' expr:href='data:post.url'>Read More >></a>
</b:if>
</b:if>
<!-- VB Auto Read More End -->
OK sob... mudah-mudahan bisa membantu kalian... Terima kasih... semoga bermanfaat...