How to Add Read More in Blogger Using Jump Break [5 Steps]

In this article, we will learn How to Add Read More in Blogger Using Jump breaks. How to add a read more button in your blogger or customize read more blogger or blogger post summary with a thumbnail or auto read more with thumbnail for blogger posts. Read More in Blogger. Auto Read More in Blogger simply known as “jump break” in blogger.

I have seen 80% of bloggers using JavaScript to visible some parts 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 an auto-read more button to blogger posts without using javascript.

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

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

How to Add Read More in Blogger Using Jump Break

If you want to add a Read More button in all of your blog posts 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.

• Edit your existing post or Create a new post.
• In the composer box, place your cursor where you want to put the “Read More” link.
• Click Insert Jump Break, Auto Read More in Blogger Using Jump Break.
• Update/Publish Post.

Read: Top 5 Best Blogging Platform For Writers to Make Money

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 in Blogger 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.

Read: Top 10 Best Domain Registrars For Small Business

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

1. Go to Layout → Edit Post widget
2. Change Read More with Continue Reading
3. Save your blog.

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