Posted by Aak
Aak-share.com Updated at: 11:17:00 PM

Cara Membuat Readmore Otomatis di Blog

No comments:
Readmore adalah rangkuman pada sebuah artikel yang menampilkan gambar pada awal postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Dengan readmore kita dapat menentukan beberapa huruf yang akan kita tampilkan dihalaman.


fungsi readmore adalah dapat meminimalis penggunaan halaman blog agar terlihat lebih rapi dan menarik, jika dihalaman blog anda masih banyak kata-kata panjang dan ingin terlihat lebih rapi berikut ini langkah-langkah membuat readmore :


1. Login keakun Blogger
2. Klik Template => Edit HTML
3. Anda cari kode </head> , gunakan CTRL+F atau F3 untuk mempermudah pencarian
4. Kalau sudah ketemu, anda tambahkan kode dibawah ini diatas 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>

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

Keterangan :
Kata Read More bisa di ganti dengan kata-kata sesuai keinginan anda contohnya : baca lagi, selanjutnya, next, berikutnya.

6. Simpan Template

Demikian cara membuar readmore otomatis di blog, Semoga bermanfaat!

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments