Desain Template Blogger SEO Friendly, Fast Loading, dan Responsive dengan Bootstrap

September 20, 2016

Automatic Thumbnail and Read More Function for Blogger

 Automatic Thumbnail and Read More Function for Blogger
FUNGSI readmore digunakan untuk meringkas tulisan di halaman depan, menjadi gambar thumbnail, judul, dan kutipan bagian awal tulisan.

Auto Read More disebut juga Jump Break Otomatis karena memotong artikel di halaman depan secara otomatis dengan menggunakan kode.

Demo atau contohny di halaman depan blog ini atau di blog pada umumnya.

Read more function is used to cut our post on homepage, post will appear fully when we click read more link. It's cut automatically and if we insert image, it appears thumbnail.

This is automatic read more function with thumbnail. We just need to set up our HTML code.

Cara Memasang Auto Readmore di Halaman Depan Blogger

Follow steps:
1. Go to "Design" click "Edit HTML"
2. Tick on "Expand Widget Templates"
3. Find this code: <data:post.body/>

4. Replace with this code below

<b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" +'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<>"); </script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>read more</a></span> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> </b:if>

5. Now, search for </head> and paste the following section of code immediately before it:

 <script type='text/javascript'>var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </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 10px 5px 0px;"><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>

Clarification Code Above:
  • summary_noimg = 430; is post cut height without image
  • summary_img = 340; is post cut height with image
  • img_thumb_height = 100; is thumbnail image height
  • img_thumb_width = 120; is thumbnail image width 

Jika cara dan kode di atas tidak berfungsi, gunakan cara dan kode berikut ini:

1. Simpan di atas kode </head>

<!-- Auto Read More Body Script Start -->
<script type='text/javascript'>
no_thumb_sum = 300;
thumb_sum = 200;
thumb_h = 220;
thumb_w = 300;
<script type='text/javascript'>
function removeHtmlTag(t,e){if(-1!=t.indexOf("<")){for(var n=t.split("<"),i=0;i<n.length;i++)-1!=n[i].indexOf(">")&&(n[i]=n[i].substring(n[i].indexOf(">")+1,n[i].length));t=n.join("")}for(e=e<t.length-1?e:t.length-2;" "!=t.charAt(e-1)&&-1!=t.indexOf(" ",e);)e++;return t=t.substring(0,e-1),t+"..."}function createSummaryAndThumb(t,e,n){var i=document.getElementById(t),m="",r=i.getElementsByTagName("img"),s=no_thumb_sum;r.length>=1&&(m='<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+e+'" title="'+n+'"><img src="'+r[0].src+'" width="'+thumb_w+'px" height="'+thumb_h+'px" /></a></span>',s=thumb_sum);var g=m+"<div>"+removeHtmlTag(i.innerHTML,s)+"</div>";i.innerHTML=g}
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.jump-link {float: right; }
.jump-link a {text-decoration: none; }
<!-- Auto Read More Body Script End -->

2. Ganti kode <data:post.body/> yang kedua dengan kode berikut ini:

<!-- Auto Read More Body Start -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div expr:id='&quot;summary&quot; +'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
<span class='jump-link' style='float:right;'><a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a></span>
<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>
<div style='clear: both;'/> <!-- clear for photos floats -->
<!-- Auto Read More in Body End -->
3. Save!


No comments:

Post a Comment