Oleh Bardil

27 Juni, 2014

Bagikan :

Tweet

Cara Membuat Readmore Otomatis Ringan di Blog

Cara Membuat Readmore Otomatis Ringan 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 Readmore Otomatis

1. Login blogger
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 berwarna merah:

• summary_noimg =  banyaknya huruf jika tidak ada gambar
• summary_img = banyaknya huruf jika ada gambar
• img_thumb_height = Ukuran tinggi gambar
• img_thumb_width = 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 -  Cara Membuat Readmore Otomatis di Blog semoga bermanfaat.

Tag : Belajar menjadi bloger keren