Cara Membuat Read More Otomatis Yang Ringan Di Blog

Pagi Sobat Blogger Kali ini Saya Akan Berbagi Pengetahuan Tentang Cara Membuat Read More Otomatis Di Blog . 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 Read More Otomatis 

Jika Anda Berminat Silahkan Mengikuti Langkah-Langkah Berikut :

1. Login blogger sobat Disini
2. Pilih template -> klik edit html
3. Cari kode </head> (gunakan CTRL+F atau F3 untuk mempermudah pencarian)
4. Letakkan kode dibawah ini diatas kode </head>, Angka yang bewarna merah merupakan ukuran gambar postingan, bisa anda ubah sesuai keinginan

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

Keterangan Kode Bewarna Merah

Summary_Noimg Adalah Banyaknya Huruf Jika Tidak Ada Gambar

Summary_Img Adalah Banyaknya Huruf Jika Ada Gambar

Img_Thumb_Height Adalah Ukuran Tinggi Gambar

Img_Thumb_Width Adalah Ukuran Lebar Gambar

               

5.Selanjutnya cari kode <data:post.body/> 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'><b>Readmore</b> &#8594; <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>

6. Tulisan Readmore bisa anda ganti sesuai dengan keinginan anda.
7. Simpan template dan Lihat hasilnya.

Sekian mengenai Cara Membuat Readmore Otomatis Ringan di Blog -  CaraMembuat Readmore Otomatis di Blog semoga bermanfaat dan Selamat Mencoba ...