Cara Membuat Readmore Otomatis Di Blog

Cara Membuat Readmore Otomatis Di Blog

Readmore atau Baca selengkapnya, sangat dibutuhkan untuk membuat post di homepage blog tidak terlalu panjang [ menapilkan semua isi post ] yang akan membuat proses loading blog semakin berat apakagi di dalamnya ada beberapa post yang menampilkan Image. Nah di sini saya akan memberikan tutorial cara membuat readmorenya otomatis. Saya bikin post ini karena waktu utu ada temen saya yang bertanya.

[Teman] Mas gimana cara agar tampilan awal blog postnya supaya ga terlalu panjang?
[Si Tamvan]Untuk membuat readmore bisa menggunakan Inset Jump Break yang ada pada menu postingan blog.
[Teman] Tapi kalo pake itu tidak rata dan harus manual emang ga bisa yang otomatis?
[Si Tamvan] Nanti saya carikan caranya, follow aja blog saya nanti kalo ada post baru ada pemberitahuannya.
[Teman] Ah si akang, Oke lah. Kalo bisa sama videonya biar nanti tidak bertanya-tanya lagi.
[Si Tamvan] Tut tut tut terputus RTO

Jangan lupa baca tutor lainnya di :

Tutorial Blogger Lainnya :

• Animasi Loading Halaman Jam Digital Di Blog

• Memasang Syntax Highlighter Pre Code Di Blogger

• Membuat Menu Bar Blogger With CSS Effect Whirling

Nah untuk tutorial cara membuat readmore otomatis, silahkan simak tutorial di bawah ini.

Cara membuat readmore otomatis di blog

• Login ke Blogger.com

• Pilih Template -> Edit HTML, Cari Kode

• </head>

• (gunakan CTRL+F atau F3 untuk mempermudah pencarian)

• Lalu masukan script di bawah ini tepat di atas kode </head>

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

• Selanjutnya, cari kode <data:post.body/>

• Biasanya lebih dari satu, Tergantung templatenya.

• Coba aja Satu per satu. Ganti dengan Script di bawah ini.

• Ingat, Bukan Di Tambah Tapi Di Ganti!!

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

• Kalo Sudah. Tinggal Save Templatenya dan Lihat Hasilnya.

Kalo ada yang tidak jelas, silahkan Untuk lebih jelasnya, lihat di video tutorial cara membuat readmore otomatis ini.

Video Tutorial Membuat Readmore Otomatis Di Blog

Ok, selamat mencoba. Apabila ada kata yang tidak di mengerti atau membingungkan, silahkan bertanya di kolom komentar saja ya.

Cukup sekian dan terimakasih artikel tentabf tutorial cara membuat readmore otomatis ini dari Mas Tamvan, semoga bermabfaat.