Cara Mudah Membuat Readmore otomatis di Blog terbaru

Cara Membuat Readmore otomatis di Blog.

Membuat Readmore atau baca selengkapnya, secara otomatis pada sebuah blog ataupun website, tutorial kali ini khusus untuk sobat yang masih menggunakan template bawaan dari blogger atau pun sobat yang menggunakan template lain yang belum menggunakan readmore otomatis pada template nya.
Seperti yang kita ketahui, bahwa template bawaan dari blogger masih ada yang belum menggunakan readmore otomatis dalam struktur kode nya, dalam hal ini tentu banyak sobat blogger menginginkan tampilan template seperti template yang dinamis dengan memasang ReadMore otomatis pada blog nya.

Lalu, bagaimana sih cara memasang readmore otomatis di blog yang menggunakan template yang belum ada auto readmore nya ? jangan khawatir sob, karena pada artikel ini saya akan memberikan tutorial nya, dan mudah - mudahan dapat anda mengerti dan anda pahami.

Readmore atau baca selengkapnya, tentu dibutuhkan dalam suatu blog, karena apa, karena agar postingan di homepage tidak terlalu panjang atau tidak menampilkan semua isi post yang bisa membuat loading blog kita sangat lambat, apalagi jika di dalam postingan kita terdapat atau menampilkan media seperti gambar maupun video,

Membuat Readmore Pada Blog Secara Otomatis merupakan salah satu cara mempercantik tampilan blog, dan jika sobat sudah menggunakan template dinamis maupun template lainnya yang sudah ada readmore nya, sobat tidak perlu mengikuti tutorial ini.

Ok Langsung saja, inilah Cara Membuat Readmore Pada Blog Secara Otomatis, mari kita simak tutorialnya dibawah ini:

baca juga:
Inilah 15 Cara mempercepat Loading Blog agar lebih SEO
Memasang Anti Copas dan Anti Klik Kanan di Blog dengan CSS
Cara Agar Artikel Cepat Terindex oleh Google, Yahoo dan Bing

Cara Membuat Readmore di Blog Secara Otomatis

1. Langkah pertama, sobat harus login terlebih dahulu pada (Dashboard) blog sobat.

2. Bila sobat sudah masuk (dasbor) pilih Tab Template/Tema lalu klik Edit HTML.

3. Centang Expand Template Widget (ada tanda kotak disamping tulisan itu)

4. Lalu carilah kode </head> (gunakan Ctrl + F, untuk mempermudah pencarian) lalu salin/copy Kode di bawah ini dan tempel/paste tepat diatas kode </head> tadi.

<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. Jika sobat Sudah menempatkan kode di atas dengan benar. Selanjutnya cari kode <data:post.body/> kemudian hapus kode <data:post.body/> tersebut dan ganti dengan kode script 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>

catatan: biasanya kode <data:post.body/> tersebut terdapat lebih dari satu dalam template, teman-teman bisa coba satu persatu, atau coba fokus ke kode <data:post.body/> yang terakhir.

6. Jika sudah selesai, Lalu klik simpan template, dan teman-teman Lihat hasilnya.

baca juga :
cara membuat Sitemap otomatis khusus pada template Viomagz
Cara Membuat Iklan Melayang di blog dengan mudah
Cara menghilangkan gambar obeng dan tang di blog

cukup mudah bukan teman-teman Cara Membuat ReadMore otomatis di Blog maupun website, saya yakin teman-teman juga bisa dengan mudah memasang readmore otomatis ini di dalam template blog teman-teman.

jika teman-teman merasa kebingungan dan ada yang ingin di tanyakan, jangan sungkan untuk berkomentar, Insya allah saya bantu secepat mungkin dan semampu saya.

Semoga berhasil, dan mungkin itu saja tutorial cara membuat Auto read more di blog dengan mudah, semoga bisa membantu dan bermanfaat. dan semoga mudah anda mengerti dan anda pahami.
Salam sukses sobat Blogger.