Cara Menciptakan Readmore Otomatis Di Blog

Cara Membuat Readmore Otomatis Di Blog

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

[Teman] Mas gimana cara biar tampilan awal blog postnya supaya ga terlalu panjang?
[Si Tamvan]Untuk menciptakan readmore dapat memakai Inset Jump Break yang ada pada sajian postingan blog.
[Teman] Tapi kalo pake itu tidak rata dan harus manual emang ga dapat yang otomatis?
[Si Tamvan] Nanti aku carikan caranya, follow aja blog aku nanti kalo ada post gres ada pemberitahuannya.
[Teman] Ah si akang, Oke lah. Kalo dapat 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 menciptakan readmore otomatis, silahkan simak tutorial di bawah ini.

Cara menciptakan 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 sempurna di atas arahan </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 arahan <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 menciptakan 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 menciptakan readmore otomatis ini dari , semoga bermabfaat.