Friday 1 May 2015

Auto Read more with Thumbnail



Assalamualaikum and Hello guys...Tadi ada orang request tutorial pasal post summary with thumbnail..

Thanks for the request,Tiara...
Okay,let's get started...
  • 1. Log in your blogger account.
  • 2. Go to Dashboard > Design > Edit HTML.
  • 3. Back up your template. ( Optional = In case you want to save your previous code )
  • 4. Click ctrl + F and look for </head> code.
  • 5. Add the Read More code below right before that line.

<!-- Auto read more script Start -->
<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 150;
img_thumb_width = 180;
</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, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script End -->


  • 6. After that, find this line: <data:post.body/>
  • 7. Delete the code and replace it with below code

<!-- Auto read more Start -->
<!-- http://www.BloggerSentral.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
<!-- Auto read more End -->

If you want to use image instead of the read more text :

Replace Read more ...  with :

<img src='IMAGE URL' style='border:none;box-shadow:0px 0px #ffffff;margin-top:10px;margin-right:10px;'/>

The Notes :

Blue Text : Specify the number of characters (including spaces) you want to show in the summary, with thumbnail.
Red Text : Specify the number of characters (including spaces) you want to show in the summary, when there is no thumbnail.
Fuchsia Text : Specify the thumbnail height.
Green Text : Specify the thumbnail width.
Orange Text : You can change the words “Read more” with your own.


Okay, Done... Preview and save
Do comment...

6 comments:

  1. kak, gimana cara tambah angka2 diblog kakak itu?
    yang buat pindah page itu

    ReplyDelete
  2. Blogskin macam mana? Saya guna blogskiin ni1

    ReplyDelete
  3. I'll try it. Btw, jom singgah blog saya :)

    http://zulfaonlinediary.blogspot.my/

    ReplyDelete