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

blogger auto read more with thumbnail


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.

Subscribe to the latest article updates via email:

6 Responses to "Auto Read More in Blogger With Thumbnail Using Jump Break"

  1. Awesome and interesting article. Great things you've always shared with us. Thanks. Just continue composing this kind of post. Read more

    ReplyDelete
  2. It is very good, but look at the information at this address. read more

    ReplyDelete
  3. wow this saintly however ,I love your enter plus nice pics might be part personss negative love being defrent mind total poeple , grossiste fleurs

    ReplyDelete
  4. Auto Read More In Blogger With Thumbnail Using Jump Break - Blog Revisited >>>>> Download Now

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

    ReplyDelete
  5. Auto Read More In Blogger With Thumbnail Using Jump Break - Blog Revisited >>>>> Download Now

    >>>>> 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
  6. हेलो एडमिन सर,
    आपकी वेबसाइट प् काफी बढ़िया जानकारी है , Link to HTML Code Generator its ग्रेट

    ReplyDelete

Top Adverts Articles

Middle Advertisements Article 1

Middle Advertisements Article 2

Bottom Ad Article