Cara Membuat Readmore Otomatis di Blog

Cara Membuat Readmore Otomatis di Blog - exnim.com
Cara membuat penggalan artikel (baca selengkapnya) otomatis di blog - Untuk meringankan loading blog sebaiknya Anda mengaktifkan readmore atau penggalan artikel pada halaman beranda blog Anda. Readmore sendiri ada dua jenis, yaitu readmore manual dan readmore otomatis.

Pada postingan kali ini saya akan berbagi cara kepada para pembaca cara membuat readmore otomatis secara cepat dan mudah. Kode yang dipakai juga relatif pendek sehingga tidak akan berdampak pada size template.

Dengan adanya readmore, selain untuk mempercepat loading blog, ia juga akan merapikan tampilan blog Anda karena hanya penggalan artikel saja yang dimunculkan pada halaman depan blog, bukan keeluruhan artikel. Hal ini akan lebih mendinamiskan tampilan blog Anda dan lebih cepat untuk di load/muat.

Apakah dengan dipasang readmore blog akan menjadi kurang SEO friendly?

Tidak. Aktivasi kode readmore tidak mempengaruhi kualitas SEO blog Anda. Justru ia akan lebih membuat nyaman para pengunjung karena loading blog akan menjadi lebih cepat secara signifikan jika dibandingkan dengan tanpa adanya fungsi readmore.

Berikut cara membuat readmore otomatis di blog

Masuk ke Dashboard Blogger > Template > Edit HTML

Carilah kode </head> kemudian copy-paste kode dibawah ini diatasnya

<script type='text/javascript'> var thumbnail_mode = &quot;float&quot; ; summary_noimg = 250; summary_img = 220; img_thumb_height = 120; img_thumb_width = 220; </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>pt>

Selanjutnya cari kode <data:post.body/> lalu ganti 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'><b>Readmore</b> &#8594; <a expr:href='data:post.url'><data:post.title/></a></span>

Untuk memastikan apakah fungsi readmore otomatis sudah terpasang dengan benar, silakan klik tombol Preview. Jika readmore sudah sempurna terpasang, silakan simpan pengatuan template Anda.

*) Biasanya akan ada banyak kode <data:post.body/>, pilihlah kode yang ke-2, dan jika gagal silakan coba pada kode yang pertama atau kode yang ke-2 dari bawah.

Related posts: