Sudah lama saya ingin share tentang hal ini. Namun karena aktifitas PKL, saya jadi jarang buka blog. Baru sekarang saya sempat memposting artikel ini. Sekarang read more sudah banyak macamnya. Ada yang biasa, peek a boo, read more yang simple (
seperti yang di bahas kang rohman), read more otomatis bergambar, dan yang lainnya. Langkah - langkah untuk membuat read more pun beragam sekali. Klik disini untuk membaca artikel read more yang biasa, Klik disini untuk read more peek a boo, Klik disini untuk read more yang simple. Nah pada artikel kali ini saya akan sedikit share tentang bagaimana caranya untuk membuat read more otomatis plus gambar seperti yang ada di blog ini.
Pertama masuk ke blog kamu, dan klik Tata Letak / Layout
Kemudian klik Edit HTML, dan centang expand template
Setelah itu cari kode
<p><data:post.body></p> atau <data:post.body>
yang letaknya di atas kode
<div style="clear: both;"><span class="fullpost"> <!-- clear for photos floats -->
Lihat kode di bawah ini yang berwarna Merah
<div class="post-body entry-content">
<data:post.body>
<div style="clear: both;"> <!-- clear for photos floats -->
</div>
Kemudian hapus kode <data:post.body> tadi dan ganti dengan kode bawah 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>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div style='float:left; margin-right:10px;'>
</div>
<data:post.body/>
</b:if>
Sehingga kode nya menjadi seperti 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>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div style='float:left; margin-right:10px;'>
</div>
<data:post.body/>
</b:if>
<div style="clear: both;"> <!-- clear for photos floats -->
</div>
Nah setelah itu taruh kode di bawah ini, diatas kode <body>
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 530;
summary_img = 420;
img_thumb_height = 150;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px; margin-right:5px; border: 1px solid #E9E9E9;background-"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
Kemudian taruh kode dibawah ini, dibawah kode
<div class='post-footer-line post-footer-line-2'>
<b:if cond='data:blog.pageType != "item"'>
<div class='more'>
<span class='rmlink' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgIJj1MroH0jWdS4Ks-UX2917ZZISrbCpYf-YlFEwLzLscIy9tDspir7psvyC8f4qogMTYih54zCmCCAk-QPId1BwWi8agy4I89jTsHZ6pTWaM6HyHZXDWhm0AczePvKmFv4YTF1eqjv0/s1600/arrow_next.png) no-repeat; padding-left:18px; float:right'><a expr:href='data:post.url'>Baca Selanjutnya !!</a></span>
<span class='comment-link' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlqhDhLm_JMfGTAnADBD8mfUFdazhOlueb4bKs5m4DNdcqQrK54tga1Kl4TiHBoPyDHWwziWSSwpQ8N6UKbtOx9o8QR89xGnzotIrZKStRHbxMFz3cXxhfoInCDIEujWK7s88bfSNOakjD/s1600/27.png) no-repeat; padding-left:18px; float:left'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
</div>
</b:if>
Simpan deh. Kata baca selanjutnya bisa kamu ganti.
