Skip to main content

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.

Comments

Popular posts from this blog

How to Fix Error 0xc004d307 to Maximize Allowed re-arms

Learn how to fix Error 0xc004d307 or a maximum number of rearms exceeded windows 7 fix or the maximum number of rearms has been exceeded windows 7 fix or SLRMGR rearm not working after restart.




Error 0xc004d307: The maximum allowed number of re-arms has been exceeded.
While converting your not genuine windows to genuine, you may get an Error message like this Error 0xc004d307. You get this error because you have used the command for more than three times. You can use SLMGR - REARM only three times. To avoid this error, you have to reinstall OS (Operating System). Even without reinstalling OS you can solve this problem. Just follow the procedure.

Learn Programming:Find the Grade of a Student Using Switch Case in C Language

After using command SLMGR -REARM for three times, “SkipRearm” registry key will become “0”.You need to change the “SkipRearm” registry key to “1”.

You can find “SkipRearm” by going to the following location from “Registry editor”.

Path:- HKEY_LOCAL_MACHINE/SOFTWARE/Mi…

5 Best SEO Friendly and Fast Loading Blogger Templates

Today, I have made a list of top 5 free blogger templates which are Highly SEO Optimized, Fast loading, Adsense ready, responsive and mobile-friendly or SEO friendly fast loading blogger template or fastest loading blogger template or fast loading responsive blogger template or fast blogger template or supreme v2 blogger template or free blogger template fast loading or free blogger templates for Adsense or best SEO optimized blogger template or SEO hub blogger template or smart SEO blogger template or SEO hub fast loading blogger template



Blogger Is One Of The Top And bests Free Blogging Platform. After creating a blog on Blogger.com.

The next question is which template to choose?

No need to worry, I have selected 5 best SEO friendly, Adsense friendly, Fast loading, Free blogger template. so you can select one of the best templates for your blog from here.

These templates have special features which will help you to improve search rankings in Google.

Free Responsive and SEO Optimized…

10 Best PPD Pay Per Download Sites With or Without Survey

In this post, I have listed top 9 best rated and reliable PPD sites ( pay per download sites ) with or without a survey to earn money online or best ppd sites for india or pay per download affiliate or pay per download india or pay per download app or upload and earn per download or pay per download android or upload ocean or uploadocean review or pay per download app or pay per download without survey or best pay per download sites or upload and earn per download or pay per download india or best ppd sites for india or best ppd sites without survey 2017 or earn money by downloading songs




One can earn money easily by uploading files on PPD websites, be sharing links to social sites, their blogs and get paid whenever someone downloads that file. It is an easy way to earn money online from home by using Top PPD Networks.

As you may know, there are lots of PPD websites on the web, most of them promise high pay per download, unfortunately only a very few of them actually fulfill their pr…