Cara Membuat Readmore di Blogspot

Dengan cara membuat Readmore di Blogspot, maka tampilan home di Blog anda akan dipersingkat atau tampilan tidak terlalu memanjang kebawah. Anda dapat membuat Readmore di Blogspot dengan cara memasang kode di bagian Edit HTML Template, dan secara otomatis tampilan Readmore akan muncul di tampilan Home blog anda. Untuk menampilkan beberapa judul artikel di tampilan Home secara ringkas dan hanya bagian depan/awal paragraf saja yang ditampilkan, selanjutnya akan disambung dengan Readmore. Untuk cara membuatnya, mari kita simak, langkah-cara membuat readmore di blogspot selengkapnya.


Cara membuat Readmore di Blogspot:

~ Masuk ke dasboard Blog anda.
~ Masuk ke  Tata Letak, pilih Edit HTML , pilih Lanjutkan.
~ Beri centang pada  expand template widget.
~ Cari kode berikut  </head>
~ Copy Paste kode di bawah ini, tempatkan 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>


~ Selanjutnya carilah kode ini  <data:post.body/>
~ Kemudian ganti kode <data:post.body/>  dengan kode berikut:


<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>


~ Klik pratinjau dahulu sebelum di simpan.
~ Jika sudah benar, klik Simpan Template.

Jika takut terjadi kesalahan anda dapat menyimpan terlebih dahulu kode script anda, agar nanti bisa dikembalikan lagi atau jika terjadi eror anda dapat batalkan dengan pilih abaikan semua perubahan yang tidak disimpan.

Anda juga dapat mencoba merubah sebagian kodenya (angka).

var thumbnail_mode = "float";   kode "float";  bisa di ganti dengan   “no-float”;
summary_noimg = 430;: Jumlah karakter yang tampil tanpa thumbnail;
summary_img = 340;: Jumlah karakter yang tampil dengan thumbnail;
img_thumb_height = 100;: Tinggi thumbnail dalam ukuran pixel;
img_thumb_width = 120;: Lebar thumbnail dalam ukuran pixel;
readmore  bisa diganti dengan kalimat lain misal selanjutnya.


Sampai jumpa lagi di info berikutnya, sekian tips Cara Membuat Readmore di Blogspot, salam sukses.