Breaking News:

latest

How to Show Post Excerpts With Thumbnail in Blogger

Hello and Welcome to GetWebInfo.Com. Here on this post you can be able to find out Latest Article are about How to Show Post Excerpts With ...

Hello and Welcome to GetWebInfo.Com. Here on this post you can be able to find out Latest Article are about How to Show Post Excerpts With Thumbnail in Blogger. You could do this by manually adding jump links while writing posts, but this is a way to automatically add a "read more" button to each post on your blog. It can make your homepage appear neat, load faster and can help help readers easily scan through multiple posts and see what grab their attention. 



Change Post Layout / Show Post Excerpt / Summary with Featured image

Step 01: Go to Template > Edit HTML and find </head>, paste the following right above it.

<script type='text/javascript'>
var thumbnail_mode = "yes";
summary_noimg = 300;
summary_img = 350;
img_thumb_height = 200;
img_thumb_width = 300;
</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 = '<div class="xopostimg"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height +'px"/></div>';
summ = summary_img;
}
var summary = imgtag + '<div class="xopostsummary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Step 02: Now find <data:post.body/>, skip the first one which is for mobile and go to the next. You'll see something similar to this.

<b:if cond='data:blog.metaDescription == &quot;&quot;'>
 <!-- Then use the post body as the schema.org description,
for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
<data:post.body/>
<div style='clear: both;'/>
<!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear: both;'/>
<!-- clear for photos floats -->
</div>
</b:if>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>
<data:post.jumpText/>
</a>
</div>
</b:if>
<div class='post-footer'>

Step 03: Now Replace <data:post.body/> with the code given below. If you have two <data:post.body/> in your template within this section, you may need to replace them both.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>
<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> <div class='jump-link' ><a expr:href='data:post.url'>Read more "<data:post.title/>"</a></div>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

Step 04: The image is wrapped with class xopostimg and text is wrapped with class xopostsummary. You can use these selectors to style that section further in the CSS.

/* Style Post Excerpt - XOMISSE */
.xopostimg { /* Style Post Excerpt Image - ADD CSS BELOW */
}
.xopostsummary { /* Style Post Excerpt Text - ADD CSS BELOW */
}
4. To style the read more button to suit your blog design go to Template > Edit HTML and find ]]> </b:skin>. Add the following code above ]]> </b:skin>
/* Style Read More Link - XOMISSE */
.jump-link { /* Style Entire Jump Link - ADD CSS BELOW */
}
.jump-link a { /* Style Jump Link Text Link - ADD CSS BELOW */
}
.jump-link a:hover { /* Style Jump Link Text Link On Hover Over - ADD CSS BELOW */
}

Add your styling in between the brackets. Check out this link for more ways to customize the read more link.

To change the read more text link you'll need to edit the section of the above code that looks like.

<div class='jump-link' ><a expr:href='data:post.url'>Read more "<data:post.title/>" </a></div>

Check out this tutorial to customize the read more jump link on blogger. To use an image instead of text -  replace read more "<data:post.title/>" with the image code as shown in the this tutorial.

Step 05: To change the height and width of the thumbnail you can alter the numbers in this section of the code.

img_thumb_height = 200;
img_thumb_width = 300;
If your thumbnails image are looking a little squished, alter the values below.

summary_noimg = 300;
summary_img = 350;
img_thumb_height = 200;
img_thumb_width = 300; 
To change the height and width of the summary & images. You can also make the images full width and automatic height.

Step 06: You can make some adjustments to the tutorial to change the style or layout (image size, image position, read more button style, read more button positions, etc.) or if you don't want to do it yourself or aren't sure what to change, check out our custom coding service to get this style, a featured post layout or a Pinterest Style grid layout installed.

No comments