Auto Read More With Small Thumbnail Without Javascript For Blogger Posts Read More in Blogger simply know as "jump break" in blogger. I have seen 80% blogger using JavaScript to visible some part of the ...
2018-07-31T07:46:26Z

Auto Read More With Small Thumbnail Without Javascript For Blogger Posts

Read More in Blogger simply know as "jump break" in blogger. I have seen 80% blogger using JavaScript to visible some part of the post but the content is still downloading in browser. If you want to check go to any blogger theme, disable the JavaScript and refresh the page, you can see all the content in the browser.

Auto Read More With Small Thumbnail

But there is a method to use Read More tags using blogger Layout tags. Using this techniques Page will load very fast.Before we get started your first thing need to make sure that you have backup your blogger template

Step 1: Login to your blog >> Go to Template Section >> Click "Edit HTML" Button

Step 2: Click on Template Box to Find <data:post.body/> and replace by one of these below provided code

1st-Auto read more with thumbnail:-
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-image' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

2nd-Auto read more with thumbnail and display default images if there is no images in that posts
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-image' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
<b:else/>
<img class='post-image' alt='no image' src='http://1.bp.blogspot.com/-RqKvZTT_gGY/VVjvSQxK85I/AAAAAAAAAuM/iTdZ8KYSgiU/s1600/images9.png' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Step 3: Now its time to Customize post image.

Display image on left add this before ]]></b:skin>
.post-image {float: left; margin-right: 12px}

Display the image on right add this before ]]></b:skin>
.post-image {float: right; margin-left: 12px}

If you want any help I am Happy to help you Just comment it out.....
Share it:

Blogger

Blogging

Tutorial

Post A Comment:

0 comments: