Cara Membuat Baca Selengkapnya Di Blogspot

Setelah berpikir dan putar puter ngelilingi sama mbah google, akhirnya ketemu juga cara otomatis membuat "Read More" atau tulisan "Baca selengkapnya" pada postingan blog. Tujuannya agar postingan terlihat lebih hemat dan tidak panjang kebawah.

Sebelumnya saya pernah menggunakan cara manual untuk membuat Read More, tapi ribet juga harus mensetting setiap kali habis posting. Kali ini saya ingin berbagi bagaimana cara untuk membuat Read More otomatis.

• Login Ke Blogger
• Kemudian pilih Edit HTML
• Jangan lupa mencentang Expand Template Widget, karena ini untuk menampilkan semua kode, baik yang disembunyikan.
• Cari kode </head>, kemudian letakan kode dibawah ini diatas kode </head>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 280;
summary_img = 250;
img_thumb_height = 70;
img_thumb_width = 100;
</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 2px 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>
</b:if>
</b:if>
 

• Kode Warna Biru berfungsi agar halaman statis tidak ikut terpenggal seperti halaman HOME.
• Kemudian cari <data:post.body/>

• Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script
type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE -
<data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

• Kemudian lihat hasilnya.

Referensi: http://googlegratisdownload.blogspot.com



 
 

Artikel Yang Terkait: