-->

Membuat Readmore Atau Baca Selengkapnya Otomatis di Blog

Kegunaan Readmore adalah untuk memenggal kalimat yang ditampilkan pada halaman Home Page. Seringkali kita melihat kata Readmore / Baca Selengkapnya pada setiap artikel di halaman home page blog orang lain. Letak Readmore ini ditempatkan di sebuah artikel, supaya terlihat rapi dan dapat menghemat ruang pada tampilan halaman utama sebuah website. Dengan adanya read more pastinya membuat pengunjung penasaran dengan artikel kita dan ingin membaca artikel tersebut hingga selesai.
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.

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 dibawah ini tepat 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.
Untuk keterangan Readmore Di atas Sebagai Berikut :
var thumbnail_mode = "float"; : Letak gambar / thumbnail berada di “float” kiri atau jika tidak suka silahkan ganti dengan “no-float”;
summary_noimg = 250; : Jumlah karakter yang akan ditampilkan di posting tanpa adanya gambar / thumbnail;
summary_img = 250;: Jumlah karakter yang akan ditampilkan di posting dengan gambar / thumbnail; img_thumb_height = 120; : Tinggi thumbnail dalam ukuran pixel; img_thumb_width = 120;: Lebar thumbnail dalam ukuran pixel.
Tulisan Baca Selengkapnya bisa diganti misalnya dengan “Read More” / “Selanjutnya".


NB : Setiap kode template pasti berbeda, jadi perhatikan baik-baik setiap kode.




Keywoard : Cara Membuat Readmore Otomatis di Blog, Cara Membuat Baca Selengkapnya Otomatis di Blog. Cara Membuat Readmore Otomatis pada Blogspot, Cara Membuat Readmore Otomatis di Blogger.
Label:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)