[TUTORIAL] CARA MEMBUAT READ MORE OTOMATIS DI BLOG

Meskipun blogger sekarang sudah support Read More otomatis, tetapi masih banyak orang yang gemar menggunakan Custom auto readmore. Mengapa demikian? karena blogger auto readmore masih harus menyisipkan kode di akhir postingan. Jadi agak masih repot.

Readmore atau juga bisa di sebut Jumplink berfungsi untuk memperingan Loading blog serta memperindah tampilan blog di Homepage. Cara memasangnya tidak terlalu sulit. Ikuti langkah - langkah di bawah ini:

1. Login pada Blogger
2. Masuk ke halaman Template
3. Selanjutnya Edit HTML lalu Lanjutkan
4. Expand Template Widget (Jangan lupa, karena bila ini tidak dilakukan. Kamu akan pusing 7 keliling mencari kode)
5. Jika sudah, cari kode </head> (cari menggunakan Ctrl + F) pasang kode di bawah ini di atas 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[
/******************************************
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. Kemudian, cari kode  <p><data:post.body/></p> / <data:post.body/> (dua - duanya sama - saja)
7. Ganti kode tersebut dengan kode di bawah 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' style='float:right;'><b>Read More..</b></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

8. Simpan Template

Keterangan:

• Kode yang berwarna Merah bisa sobat ganti dengan gambar. yaitu dengan menambahkan kode <img border='0' src='URL Gambar Kamu'/></a>
• Jika sobat ingin membuat Read More dengan Judul, Misal: Readmore - Cara membuat Auto Read More. Ganti kode yang berwarna  Merah dengan kode <b>READ MORE - <data:post.title/></b>

Selamat Mencoba!!!

Posted in: Tutorial