Cara Membuat Read More Otomatis Di Blogspot

Cara Membuat Read More Otomatis Di Blogspot, Banyak Cara mempercantik tampilan Blog anda menjadi menarik dan rapi, diantaranya yaitu dengan memasang Read More Otomatis pada blog anda sehingga akan terlihat rapi saat ada visitor yang berkunjung pada blog anda.

Banyak cara untuk membuat read more otomatis pada blog anda, dan salah satunya adalah yang akan Bang Rizal uraikan langkah-langkahnya di bawah ini, antara lain yaitu :

• Login/Masuk ke Blogspot anda.
• Pilih Pada Pengaturan Template.
• Backup template sebelum mendesain template anda, ini berfungsi untuk berjaga-jaga mengembalikan pengaturan anda ke default sebelum anda edit apabila terjadi kesalahan.
• Edit HTML → proses centang "Expand Template Widget" .
• Tekan Ctrl+F untuk mencari kode </head>
• Tambahkan kode dibawah ini tepat diatas kode tersebut atau dibawah kode ]]></b:skin>

<!-- kode Read More -->
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 250;
img_thumb_height = 60;
img_thumb_width = 60;
</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>

• Tekan Ctrl+F untuk mencari kode <data:post.body/>
• Tambahkan kode berikut tepat dibawah kode tersebut dan diatas kode penutup </b:if>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script><span class='rmlink' style='float:right;padding-top:20px; border:1px solid #fff;'>
<a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOnTK2cMpZg6qw5qwGm5tDcKq06WF4rU3y9VLXtqoMEkcNVaxyqebJQWgDHp8EPaPdPM1HzGOMNN975lw8xnvM6FRXG6TXZjmYrvMowZLjcDNwo-jLUH__H9GSSCNhA4002wl8J38swb8/s74/readmore_thumb.gif'/></a></span>

• Maka anda akan memperoleh hasil seperti berikut ini :

<div class='post-header'>
    <div class='post-header-line-1'/>
    </div>
    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
<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'><img src='http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif'/></a></span>
</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

• Silahkan lihat tampilan blog anda, jika anda melakukannya sesuai langkah-langkah diatas maka pasti Read More Otomatis pada blog anda akan terpasang dengan sukses.

Beberapa keterangan yang harus anda ketahui :

1. Kode <data:post.body/> tidak hanya ada satu, pilih kode pertama atau sesuaikan.
2. Untuk link gambar http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif bisa disesuaikan dengan kebutuhan
3. Summary_noimg = 230; adalah jumlah karakter yang tampil, summary_img = 250; adalah gambar yang tampil di depan konten post jika posting menggunakan gambar, img_thumb_height = 60;, img_thumb_width = 60; adalah tinggi dan lebar gambar yang tambil di depan konten post. 

Demikianlah tadi sedikit uraian tentang Cara Membuat Auto Read More Otomatis pada Blogspot, semoga bermanfaat bagi anda semuanya. :)

Advertistment

Category › Tutorial Blogspot