Cara Membuat Readmore Otomatis Ringan di Blog
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 </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/> ( jika sebelumnya anda telah memasang readmore 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'><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.
27 Komentar untuk "Cara Membuat Readmore Otomatis Ringan di Blog"

makasih sobat, blog ini sangat membantu. tar gw sebari blog ini buat temen gw yang juga ngeblog. makasih bangak ya.

wah work... terima kasih buat tutornya mas... Terima kasih juga buat mas yang berkomentar di atas saya (Ahmad Riyanto), permasalahan saya sama dengan mas yang diatas :D

Karena mas ahmad meninggalkan komentar spam maka saya menghapusnya. Oh iya untuk membuat readmore otomatis di blog kadang kode <data:post.body/> yang ada di blog lebih dari satu, Jika kode di template anda ada lebih dari satu, biasanya yang cocok ada di kode kedua, atau kalau belum berhasil di coba satu persatu, oh iya untuk mencoba tutorial Cara membuat readmore otomatis di blog seperti diatas sebaiknya template Blog di backup( simpan di notepad) dahulu.

Ok sob terimakasih juga atas kunjungannya

Bro, ini pakai java script, kan? Nah, apa tidak bikin loading blog semakin berat sebab blog saya sudah banyak java scriptnya ? Btw, apa rahasia blog ini punya ranking Alexa yang sangat bagus ? Kalau berkenan memberitahukan caranya, tolong kirim ke email saya atau via Google Plus saya. Terima kasih.

kok saya gk bsa ya? tolong bantuannya mas
gw search "" muncul dan ane paste tu kode di bawahnya
nah, yang "" ane kaga nemu ;(( gmna ya mas??

gan,tlong dong kesini
http://tegno-sites.blogspot.com/
disitu ane pake template dari agan,tp readmoenya kok kyanya bermasalah ya..
tlong dibantu ya gan..
trims...

Itu karna judulnya hanya itu aja gan

permisi mas, saya pake Template SIMINISEO Template Blogger Responsive Seo Friendly 2014 . Yang mau saya tanyakan, bagaimana cara menghilangkan label yang ada di bawah judul postingan blog?
Terima Kasih

saya coba pasang berkali-kali tp tetap gagal, mohon bantuannya, thanks..

x-)

makasih Gan Izin Copas yah. Aku pasang Kok Sumbernya makasih (y)

Makasih mas bro
Ijin Copas ya..?
:)

code nya dikasih atas nya atau gmna sih??


kode ini kok gk ada di blogku ya ?

Permisi gan , ini demonya nggak ada tha ? COba dikasih demo pasti pengunjung lebih senang dan lebih yakin nyobanya , Terima kasih

makasih gan masih work ternyata,
kunbal ya gan
www.zammyarmstrong.blogspot.com

cara buat ratakan texnya gimana gann masih bingung nih

Subhanallah, nyari info kesana kemari nggak ada yang work, pas dapet disini baru berfungsi

syukron tipsnya gan ;)

Wah Thx Sob :D, Blog Saya Awalnya Ada Read Morenya, Eh Pas Saya Vacum NgeBlog Read Morenya Diculik :3 , Ternyata Jawabannya Ada Disini Toh :v

Thx Bgt Sob :v, Oh Iye, Saya Make Template Droidlist Om :3 :v

Hatur nuwun kaka,,,, bermanfaat sekali...
Setelah mondar-mandir di beberapa blog, tips kaka paling manjur sekali....