Cara Membuat Read More Otomatis Pada Blog

Posted by Zona Komputer Posted on 14:12

Cara membuat read more otomatis pada blog

Apa kabar? semoga baik baik saja, kali ini saya akan berbagi cara membuat read more otomatis pada blog. Langsung saja tanpa basa basi:

1. Masuk blogger anda terlebih dahulu
2. Pilih templateklik "edit html"
3. Cari kode </head> (gunakan Ctrl+F untuk mempermudah pencarian)
4. Letakkan kode berikut ini diatas kode </head>
5. Angka berwarna merah adalah ukuran gambar (bisa anda kreasikan sendiri)

<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

6. Selanjutnya cari kode <data:post.body/> (jika sebelumnya anda telah memasang readmore maka hapus kode readmore yang lama dan jika ada lebih dari satu <data:post.body/> silahkan anda ganti semua / satu persatu) dan ganti kode tersebut dengan kode berikut:

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

7. Tulisan readmore bisa anda ganti sesuai dengan keinginan anda
8. Simpan template dan lihat hasilnya

Ok sekian tutorial kali ini semoga bermanfaat dan membuahkan hasil :D Salam Blogger