Header Ads

Cara Pasang Readmore Otomatis di Blogger

Cara Pasang Readmore Otomatis di Blogger

Cara Pasang Readmore Otomatis di Blogger
Beberapa hari yang lalu, saya mengunduh template Blogger gratis dari internet. Ternyata, pada template tersebut belum terdapat fitur "Readmore Otomatis". Untuk itu saya perlu memasang sendiri "readmore otomatis" karena jika tak ada fitur ini, maka halaman beranda blog akan menjadi sangat panjang ke bawah.

Berikut langkah-langkah atau cara memasang readmore otomatis di blogspot:

1. Masuk ke akun Blogger Sobat.

2. Klik "Opsi lainnya" diikuti klik "Template".

3. Kemudian klik tombol "Edit HTML" >> "Lanjutkan".

4. Beri tanda centang pada "Expand Template Widget".

5. Lalu carilah kode </head>. Untuk mempercepat pencarian, tekan tombol F3 pada keyboard lalu masukkan kata kunci yang dimaksud.

6. Selanjutnya taruh kode berikut tepat di atas kode </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </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(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>

7. Langkah selanjutnya adalah mencari kode <data:post.body/>. Bila sudah ketemu, ganti kode tersebut dengan kode di bawah ini.

<b:if cond='data:blog.pageType != &quot;item&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:right;padding-top:20px;'>
<a expr:href='data:post.url'> <b> readmore</b> &#187;&#187;&#160;&#160; </a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>

8. Klik tombol "Simpan template".

Berikut keterangan untuk readmorenya...

  • var thumbnail_mode = "float"; adalah letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”;
  • summary_noimg = 250; ialah jumlah karakter yang akan ditampilkan di posting tanpa gambar atau thumbnail;
  • summary_img = 250; merupakan jumlah karakter yang akan ditampilkan di posting dengan gambar atau thumbnail;
  • img_thumb_height = 120; yaitu tinggi thumbnail dalam ukuran pixel;
  • img_thumb_width = 120; artinya lebar thumbnail dalam ukuran pixel;
  • readmore merupakan tulisan readmore yang dapat diganti misalnya dengan “Baca Selengkapnya” dan apabila Sobat tidak ingin menampilkan judul dibelakang Readmore, Sobat dapat menghapus kode skrip ini .

Sumber: Cara Mudah Membuat Readmore Otomatis di Blog Terbaru

4 comments:

  1. Thanks sudah berbagi informasi sob,,,,mantap dah!

    ReplyDelete
  2. Mantap gan, ane terapin ya
    Mampir gan www.bukuqw.blogspot.com

    ReplyDelete
  3. kalo template ane untuknya udah ada readmore nya mas :)

    ReplyDelete

Comment Policies:

1. NO SPAM
2. NO LIVE LINK

Any violation will be deleted within 24 hours, thanks for your attention.

Template images by Ollustrator. Powered by Blogger.