Cara Membuat Auto Readmore di Blog Super Ringan

Cara Membuat Readmore Otomatis di Blog Super Ringan - Mungkin sobat sudah ga aneh liat blog yang menggunakan Fitur Auto Readmore, tapi apakah sobat pernah berpikir bagaimana Cara Membuat Readmore Otomatis di Blog ? Oleh karena itu kali ini Blog Pintasku akan memberikan Tutorial Cara Membuat Auto Readmore di Blog.

Readmore itu  jika di artikan kedalam Bahasa Indonesia adalah "Baca Selengkapnya". Sedangkan Fungsi Memasang Auto Readmore di Blog itu adalah supaya bisa membuat blog kita menjadi lebih elegan, rapih dan juga membuat pengunjung lebih mudah ketika mencari artikel atau postingan yang lain pada blog kita, mungkin sobat pernah mengunjungi sebuah blog atau web yang tidak menggunakan Fitur Auto Readmore jika hendak mencari artikel lain akan membuat pengunjung susah. Perlu diketahui oleh sobat dengan Memasang Readmore Otomatis pada Blog ini akan memotong artikel atau tulisan yang berada di depan dan sobat juga nanti bisa menentukan berapa banyak huruf yang akan ditampilkan di halaman depan. Oke langsung saja sobat ikuti tutorialnya berikut ini :

Catatan : Sebelum Mengedit sebaiknya, Backup dulu jika nanti terjadi kesalahan atau ERROR.

Cara Membuat Readmore Otomatis di Blog

1. Login dulu ke blogger sobat seperti biasa.

2. Masuk ke Editor HTML ( Template -> klik Edit HTML)

3. Cari kode </head> (Untuk mempermudah pencarian gunakan CTRL + F )

4. Copy lalu letakan kode dibawah ini tepat di atas kode </head>

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 80;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>

Keterangan Kode yang berwarna merah : 

• summary_noimg =  banyaknya huruf jika tidak ada gambar
• summary_img = banyaknya huruf jika ada gambar
• img_thumb_height = Ukuran tinggi gambar
• img_thumb_width = Ukuran lebar gambar

5. Selanjutnya, cari kode <data:post.body/>
6. Gantikan kode <data:post.body/> dengan kode dibawah ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&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:left'> <a expr:href='data:post.url'><b>Baca Selengkapnya</b> &#8594; <data:post.title/></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Catatan :  kode <data:post.body/> biasanya suka ada 2 atau 3 kode, jika pada kode yang pertam gagal gunakan kode yang ke 2, dan jika gagal coba ganti dengan kode yang ketiga

Keterangan :

• Tulisan yang berwarna bisa sobat ganti sesuai dengan selera.

7. Save dan lihatlah hasilnya.

Sekian Tutorial Blogger dari Blog Pintasku Mengenai Cara Membuat Readmore Otomatis di Blog. Semoga tutorial ini bisa bermanfaat untuk semuanya. Terimakasih