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 != "item"'>
<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 + "#more"' expr:title='data:post.title'>
<data:post.jumpText/>
</a>
</div>
</b:if>
Step 2: Remove + "#more" 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.
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 != "item"'>
<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 + "#more"' expr:title='data:post.title'>
<data:post.jumpText/>
</a>
</div>
</b:if>
Step 2: Remove + "#more" 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.
Awesome and interesting article. Great things you've always shared with us. Thanks. Just continue composing this kind of post. Read more
ReplyDeleteIt is very good, but look at the information at this address. read more
ReplyDeletewow this saintly however ,I love your enter plus nice pics might be part personss negative love being defrent mind total poeple , grossiste fleurs
ReplyDeleteAuto Read More In Blogger With Thumbnail Using Jump Break - Blog Revisited >>>>> Download Now
ReplyDelete>>>>> Download Full
Auto Read More In Blogger With Thumbnail Using Jump Break - Blog Revisited >>>>> Download LINK
>>>>> Download Now
Auto Read More In Blogger With Thumbnail Using Jump Break - Blog Revisited >>>>> Download Full
>>>>> Download LINK
Auto Read More In Blogger With Thumbnail Using Jump Break - Blog Revisited >>>>> Download Now
ReplyDelete>>>>> Download Full
Auto Read More In Blogger With Thumbnail Using Jump Break - Blog Revisited >>>>> Download LINK
>>>>> Download Now
Auto Read More In Blogger With Thumbnail Using Jump Break - Blog Revisited >>>>> Download Full
>>>>> Download LINK rf
हेलो एडमिन सर,
ReplyDeleteआपकी वेबसाइट प् काफी बढ़िया जानकारी है , Link to HTML Code Generator its ग्रेट