Cara Membuat Readmore Otomatis di Blog

kevinservis TIPS BLOG 26 Mar 2013

seringkali kita melihat kata Readmore / Baca Selengkapnya pada setiap artikel di halaman home blog seseorang. Kegunaan Readmore adalah untuk memenggal kalimat yang ditampilkan pada halaman utama situs kita. Letak Readmore ini ditempatkan di sebuah artikel.

Fungsi dari pemasangan Readmore :

• Menghemat Ruang pada tampilan halaman utama sebuah website.
• Menjadi Lebih Elegant dan Interaktif.
• Membuat pengunjung membaca artikel tersebut hingga selesai.
• Menambah pageviews artikel yang dibaca oleh pengunjung.
• Menambah Link Anchor terhadap keyword judul.

Hingga saat ini sudah banyak tersedia berbagai macam template dengan fitur auto readmore dan lainnya. Tetapi anda harus cermat dalam pemilihan readmore. Apabila anda menggunakan readmore dengan hanya menggunakan kata saja, anda tidak boleh memakai kata tersebut melainkan dengan menggunakan gambar.

Karena apabila pada setiap artikel yang anda potong menggunakan readmore dengan anchor yang sama, maka Google kurang menyukai halaman yang anda buat. Contohnya pada blog ini saya menggunakan kata read more tetapi kata tersebut adalah gambar. Jadi, secara otomatis tidak ada kata readmore di halaman blog saya.

Cara Membuat Readmore Otomatis di Blogger yang lebih berkualitas terhadap SEO :

1. Login ke Blogger > Template > Edit HTML.

2. Cari kode </head> , dan letakkan kode 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>

3. Ganti kode <data:post.body/> ( yang pertama ) pada template anda, dengan kode berikut :

<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>Baca Selengkapnya</b> &#8594; <a expr:href='data:post.url'><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>

4. Klik Pratinjau untuk melihat hasilnya. Jika sudah sesuai dan terpasang dengan benar klik Save Template.