Tutorial Untuk Membuat Readmore Otomatis Pada Blogspot

Ini biasanya digunakan pada template-template yang bernuansa news, akan tetapi para blogger mulai menggunakannya pada blog-blog personal agar lebih terkesan profesional dan praktis.

Pada cara lama, kita masih melakukannya dengan cara manual dengan terlebih dahulu harus memenggal artikel seperti code fungsi <div class="fullpost">....</div> atau <span class="fullpost">....</span> agar tidak tampil sepenuhnya di halaman depan blog.

Bagi sobat blogger yang sudah memasang Read More versi lama sebaiknya kembalikan dahulu seperti semula dengan cara menghapus kode berwarna biru di bawah ini.
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>
-----------------------------------------
Selanjutnya silahkan menuju menu DESIGN -> Edit HTML, Cari kode
</head> kemudian letakan script dibawah ini di atas kode </head> jangan lupa untuk menyimpan template terlebih dahulu.
<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 Merah berfungsi agar halaman statis tidak ikut terpenggal sebagaimana pada halaman HOME.
Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>

Ganti kode <data:post.body/> dengan 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>

Dan simpan template sobat.

Keterangan:

var thumbnail_mode = "float"; posisi thumbnail
summary_noimg = 250; banyaknya karakter yang ditampilkan tanpa thumbnail /gambar
summary_img = 250; banyaknya karakter yang ditampilkan dengan thumbnail /gambar
img_thumb_height = 120; tinggi thumbnail dalam pixel
img_thumb_width = 120; lebar thumbnail dalam pixel

No comments:

Powered by Blogger.