Cara Buat Read More Otomatis di Blog

DIRGAENGGAR.COM - Cara buat read more otomatis di blog kayaknya bisa dilakukan oleh orang awam. Ribet dengan membuat read more secara manual? Ingin praktis dengan semua dibuat otomatis termasuk read more? Oke simak artikel Cara Buat Read More Otomatis di Blog Terbaru.

Cara Buat Read More Otomatis di Blog

Read more adalah fitur di blog untuk memotong sebagian awal dari artikel yang kita publikasikan di blog. Read more akan nampak pada halaman utama blog kita. Dengan read more, maka tampilan blog kita menjadi lebih ringkas dan tidak menampilkan banyak kata di halaman awal. Bisa dibilang ringkasan awal dari artikel-artikel yang kita terbitkan. Biasanya bila kita menggunakan template bawaan dari blogspot, tidak didukung oleh read more otomatis. Nah, berikut cara menambahkan read more otomatis di blog agar tampilan blog kita menjadi lebih manis.

1. Masuk ke dashboard blog.

2. Pilih tabs menu Template - Edit HTML.

3. Setelah muncul tampilan Edit HTML, silahkan cari kode </head> (dapat menggunakan CTRL+F untuk mempercepat proses pencarian).

4. Salin kode berikut dan letakkan di atas kode </head> tadi.

Klik Spoiler Berikut:

<script type="text/javascript">
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 100;
img_thumb_width = 120;
</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(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>

5. Setelah itu, cari kode <data:post.body/>. Bila sudah ketemu, silahkan hapus kode tersebut, dan ganti dengan kode di bawah ini 

<b:if cond='data:blog.pageType != &quot;item&quot;'><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><span style='float:right'><a expr:href='data:post.url'>Read More..</a></span> <b:else/><data:post.body/></b:if>

6. Lalu pilih Simpan Template.

7. Buka halaman awal blog, dan lihat hasilnya.

Cara membuat read more otomatis sangat mudah bukan? Memang agak membingunkan untuk awalnya, tetapi terus belajar bukannya akan baik untuk kita. Semangat dan terima kasih.