memesang Read More di blog

Jika anda membuka halaman awal blog ini, maka anda akan menemukan posting artikel yang hanya menampilkan paragraf awal saja dan di bawahnya akan terdapat link seperti BACA SELENGKAPNYA -> Judul Post


Nah apakah itu?
Yup itu adalah fungsi Read More, tapi Read More milik saya berbeda karena semuanya sudah otomatis karena hal itu maka disebut Auto Read More

Bagaimana membuatnya?
Yuk langsung saja!

Pertama pergilah ke halaman Edit HTML (pada tata Letak)
Centang pada Expand Template Widget

Setelah itu cari (ctrl + f) kode </html>

Letakkan kode javascipt dibawah tepat diatas kode </html>

<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)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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>

Setelah itu cari (ctrl + f) kode <data:post.body/>


Kalau sudah ganti kode diatas dengan kode dibawah

<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' target='_blank'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Silahkan langsung Simpan Template atau Pratinjau terlebih dahulu
Selamat blog anda sudah memiliki fitur Auto Read More

Tambahan :

pada kode JavaScript yang atas

var thumbnail_mode = "float"; ( letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float))
summary_noimg = 250; (Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Jumlah karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Tinggi thumbnail dalam piksel)
img_thumb_width = 120; (Tinggi thumbnail dalam piksel)

pada kode yang dibawah
target='_blank'

dapat dihapus jika tidak ingin membuka tab baru saat membuka halaman.


READ MORE - <data:post.title/>

READ MORE - dapat diganti sesukanya misalnya, Baca Selengkapnya di atau Selanjutnya ->
Jika tidak ingin menampilkan judul halaman di sebelah Read More hapus kode <data:post.title/>

Yup
kalau sudah mengerti dan paham sekarang saatnya untuk menampilkannya fitur Auto Read More ini di Blog anda!