Cara Membuat Auto Readmore Keren di Blogger Terbaru

Auto Readmore - Diari Biasa

Pada saat awal membangun sebuah blog, penerapan auto read more terbilang cukup penting. Selain berguna untuk memudahkan pengunjung untuk memilih dan mencari konten yang ia sukai, auto readmore juga berguna untuk mempercantik tampilan blog. berikut cara membuat auto readmore diblogger.

1. Login ke Akun Blogger sobat lalu klik Tema

2. Klik Edit HTML ( Silakan backup tema anda terlebih dahulu untuk menghindari hal hal yang tidak diinginkan)

3. cari kode </head> dan Copy-paste script berikut tepat DI BAWAH </head> (gunakan Ctrl+F):

<!-- Auto read more script Start --> <script type='text/javascript'> var thumbnail_mode = "yes"; summary_noimg = 430; summary_img = 340; img_thumb_height = 150; img_thumb_width = 150; </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(thumbnail_mode == "yes") { 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> <!-- Auto read more script End -->

Silakan edit nilai kode berikut sesuai selera anda
summary_noimg = 430; Jumlah Huruf  Tanpa gambar
summary_img = 340; Jumlah Huruf dengan gambar
img_thumb_height = 150; Tinggi gambar
img_thumb_width = 150; Lebar Gambar

4. Sekarang cari kode <data:post.body/> terdapat lebih dari satu kode yang sama, ganti semuanya dengan kode dibawah ini.

<!-- Auto read more Start --> <b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <div style='text-align:justify;' expr:id='"summary" + data:post.id'> <data:post.body/></div> <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>"); </script> <a class='more' expr:href='data:post.url'>Baca Selengkapnya >>></a> </b:if> </b:if> <!-- Auto read more End -->

Tulisan Baca Selengkapnya >>> bisa diganti dengan kata yang kalian inginkan, selanjutnya klik Pratinjau Tema, jika sudah berhasil lalu klik Simpan Tema. Selesai.

Baca Juga :Cara Membuat Text Box pada Postingan Blogger / Wordpress Terbaru

Kode diatas akan membuat auto Readmore dengan tampilan seperti ini