Auto Read More in Blogger With Thumbnail Using Jump Break

Learn how to add automatic read more button in your blogger with thumbnail using jump break or how to add read more button in blogger or customize read more blogger or how to show post summary in blogger or blogger post summary with thumbnail or auto read more with thumbnail for blogger blogspot posts or how to change post thumbnail in blogger or read more button blogger or how to set featured image in blogger or read more widget for blogger or auto read more blogger or how to change read more button in blogger or read more button css code or blogger jump break not working or automatic read more for blogger or continue reading button blogger or blogger read more

Auto Read More in Blogger simply knows 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 the browser. If we use JavaScript then definitely it will increase your blog loading time so it can increase your blog bounce rate.

In this post, I am going to share a trick to add auto read more button to blogger post without using javascript.

Blogger provides JUMP BREAK option to show only some part of a blog post with reading more link so we can use jump break to show the summary of the post with reading more button.

Before we get started your first thing need to make sure that you have backup your blogger template.

How To Add Jump Break To Your Blog Post

Step 1: Edit your existing post or Create a new post,

Step 2: In the composer box, place your cursor where you want to put the “Read More” link

Step 3: Click Insert Jump Break

Auto Read More in Blogger Using Jump Break

Step 4: Update/Publish Post

If you want to add read more button in all of your blog post then you need to do this with each post.

This is tricky so once you add jump break successfully in one post then you can add it to all your blog posts.

How To Hide Post Footer When Post Is Displaying On Home Page

Step 1: Go to Template → Edit HTML and find </head>

Step 2: Add the following above </head> tag

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display:none;}
</style>
</b:if>

Step 3: Save Your Template

How To Style Read More Link With CSS

To keep the link but make it suit your blog design

Step 1: Go to Template → Edit HTML and find ]]></b:skin>

Step 2: Add the following above ]]></b: skin> and add your styling in between the brackets.

.feed-links {display:none !important;}
.post {margin-bottom: 10px; border-bottom: 0px dotted #E6E6E6; padding-bottom: 10px;}
.jump-link { margin: 0 auto; font-size: 14px; letter-spacing: 2px; text-align: center; padding-top: 30px;}
.jump-link a { text-decoration: none;  border: 1px solid; padding: 10px;}
.jump-link a:hover {text-decoration: none; background-color:#3778cd; padding: 10px;color:#ffffff;}

Step 3: Save Your Template.

Remove The Auto-Jump To After Jump-Break

After clicking “read more”, the page reloads and jumps to the line after the jump-break. If you want to remove this so it loads the post normally,

Step 1: Go to Template → Edit HTML → Search for jump-link and find the following code

<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>

Step 2: Remove + &quot;#more&quot; so you are left with the following code…

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'>
<data:post.jumpText/>
</a>
</div>
</b:if>

Step 3: Save your template.

How to Change Read More Text with Continue Reading or any other text

Step 1: Go to Layout → Edit Post widget

Step 2: Change Read more with Continue Reading

Step 3: Save your blog.

I hope this post is helpful to you so please share it with your friends.

Ghanendra Yadav

Hi, I’m Ghanendra Yadav, SEO Expert, Professional Blogger, Programmer, and UI Developer. Get a Solution of More Than 500+ Programming Problems, and Practice All Programs in C, C++, and Java Languages. Get a Competitive Website Solution also Ie. Hackerrank Solutions and Geeksforgeeks Solutions. If You Are Interested to Learn a C Programming Language and You Don't Have Experience in Any Programming, You Should Start with a C Programming Language, Read: List of Format Specifiers in C.
Follow Me

Share this post