Tips Cara Membuat Readmore Otomatis

Tips Cara Membuat Readmore Otomatis

Pada postingan kali ini akan saya bagikan sedikit tutorial blog kepada sobat blogger, yaitu tentang blogging tips  bagaimana cara membuat readmore otomastis pada blog. Biasanya template bawaan dari blogger itu belum ada readmore otomatisnya, sehingga sobat harus membuat readmore secara manual di postingan, ok langsung saja kita mulai cara membuat eksekusi readmore pada setiap postingan blog. 

Berikut langkah-langkahnya :

1. Pertama login dulu ke akun sobat blogger masing - masing

2. Kemudian klik menu opsi dan pilih Template

3. Klik Edit HTML

4. Apabila ada peringatan, klik lanjut saja

5. Jangan lupa sobat beri centang pada Expand Widget Template

6. Selanjutnya cari kode </head>, untuk mempermudah pencarian Tekan CTRL + F untuk mencari kode tersebut.

Setelah ketemu kode </head>, lalu copy paste kode di bawah ini dan letakkan tepat di atas kode </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; 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>

7. Langkah selanjutnya adalah mencari kode <data:post.body/>. 

Bila sudah ketemu, ganti kode tersebut 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 class='rmlink' style='float:right;padding-top:20px;'>

<a expr:href='data:post.url'> <b> readmore</b> &#187;&#187;&#160;&#160; </a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>

</b:if>

8. Langkah Terakhir Jangan lupa Klik  "Simpan template".

--->>>Keterangan:

• var thumbnail_mode = "float"; adalah letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”;

• summary_noimg = 250; ialah jumlah karakter yang akan ditampilkan di posting tanpa gambar atau thumbnail;

• summary_img = 250; merupakan jumlah karakter yang akan ditampilkan di posting dengan gambar atau thumbnail;

• img_thumb_height = 120; yaitu tinggi thumbnail dalam ukuran pixel;

• img_thumb_width = 120; artinya lebar thumbnail dalam ukuran pixel;

• readmore merupakan tulisan readmore yang dapat diganti misalnya dengan “Baca Selengkapnya” dan apabila Sobat tidak ingin menampilkan judul dibelakang Readmore, Sobat dapat menghapus kode skrip ini .

Demikian Tutorial Mengenai tips cara membuat readmore otomatis pada blog, semoga artikel ini bermanfaat buat sobat blogger semua.

Selamat Mencoba dan semoga berhasil.