Cara Membuat Readmore Otomatis Ringan di Blogger

Cara Membuat Readmore Otomatis di Blogger. Sebenarnya banyak cara pemasangan readmore otomatis pada blog, ada yang hanya menggunakan kata-kata, gambar, dll. Tetapi kali ini saya akan share tentang cara membuat readmore otomatis yang hanya menggunakan kata-kata agar tidak mengurangi loading blog kita.

Read more dalam bahasa indonesia yaitu " Baca Selengkapnya " dan fungsi read more itu sendiri adalah meminimalis penggunaan halaman blog agar terlihat lebih rapi dan menarik. Read more otomatis ini akan memotong tampilan depan artikel yang panjang dan anda bisa menentukan berapa banyak huruf yang akan ditampilkan di halaman depan
Cara Membuat Readmore Otomatis di Blog

1. Di Blog Bloggernya sobat
2. Pilih template => klik edit html
3.Cari kode <data:post.body/> ( jika sebelumnya anda telah memasang readmore yang lama maka hapus kode readmore yang lama dan jika kode <data:post.body/> silahkan di coba satu persatu  ) dan Ganti kode tersebut dengan kode dibawah ini.

<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'> <a expr:href='data:post.url + &quot;#more&quot;'><div class='button' style='position:relative; text-align: center;'><b>Readmore  </b> &#8594; </div></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>

1. Sobat juga bisa mengganti kata "Readmore" yang berwarna Merah dengan kata-kata sobat.
2. Yang berwarna Kuning menandakan posisinya yang relatif

4. Selanjutnya cari kode ]]</b:skin> dan letakkan kode dibawah ini (diatas kode ]]</b:skin>)

.button
{      
display: inline-block;
white-space: nowrap;
background-color: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
background-image: -webkit-linear-gradient(top, #eee, #ccc);
background-image: -moz-linear-gradient(top, #eee, #ccc);
background-image: -ms-linear-gradient(top, #eee, #ccc);
background-image: -o-linear-gradient(top, #eee, #ccc);
background-image: linear-gradient(top, #eee, #ccc);
border: 1px solid #777;
padding: 0 1.5em;
margin: 0.5em;
font: bold 1em/2em Arial, Helvetica;
text-decoration: none;
color: #333;
text-shadow: 0 1px 0 rgba(255,255,255,.8);
-moz-border-radius: .2em;
-webkit-border-radius: .2em;
border-radius: .2em;
-moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}
 

5. Setelah itu, cari kode </head> , lalu letakkan kode dibawah ini (letakkan diatas kode </head>)

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

summary_noimg =  250; //banyaknya huruf jika tidak ada gambar
summary_img = 250; //banyaknya huruf jika ada gambar
img_thumb_height = 120; //Ukuran tinggi gambar
img_thumb_width =120; //Ukuran lebar gambar

6. Save Template
7. Taraa ! , lihatlah hasilnya

Terima Kasih, sobat telang mengunjungi post ini untuk yang masih kebingungan silahkan berkomentar di bawah.