How to add Read More Button in Blogger blog with Pictures

Hello friends welcome to the Techtspot blog, today I will show you how to add or insert Read More Button in the Blogger blog with pictures.

What is Read More Button?

Read more button or link means an option that enables continue reading or jump break or read more link in the published article when we publish an article in the blogger blog and we add read more option in starting paragraph then it creates a read more button or link in the published article that is visible on the blogger blog home page and if our visitors are interested to read our article then they click Read more link and continue reading link or button to access our complete article.

Why we need to add Read More Button in the blog?

When we publish an article in our blogger blog and it opens a full article view on our blogger blog home page and in the blogger blog default, the maximum post-show on the main page is only 7 and we can also change it according to our blog layout, when we published at least 10 posts in our blogger blog then the 7 posts fully show up on the blog homepage and it like awkward to blog design, so we can use jump break, read more link, continue reading option in our blog post before we publishing our article.

Now here when you are creating a read more button or jump break in your blog post and it's so good to our blog design but if you want to replace the read more button to continue reading link and you can add different types of read more button or continue reading button like different background color, font size, location, etc..., so here I give you the solution to customize your read more link or button and nowhere are the solutions to create customise read more button or link, now let's start.

These are the Following Steps:-

Step 1: First we create read more link in our article, here we click edit blog post and click the paragraph where we want to add read more link or continue reading button and in the blog editor menu we can see 3 dot option and we click it then we click insert jump break option and you can see the line will appear between the paragraph where you click the cursor.

Solution 1 >> adding Read More image button in our blogger blog post.

Step 2: Now go to the blogger blog Theme option and click customise dropdown button then click the Edit HTML option.

Step 3: Now here you can click anywhere in the code and press the Ctrl+F button and find out the "<data:post.jumpText/>" code, now you can replace this code with the image button option, continue reading text, and whatever you write here will appear in Read more link place, but here I will replace Read more link with Read more image button then at last click the Save button.

Now replace "<data:post.jumpText/>" code with "<img alt='read more' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFkuhbQUmzfomVV36F9scIaCNFamdKkBgJhhKLcmStZ8Tu0JxYKj3PdhBvooAhvJl7-ppxz6gwZr7ejqzctna5JeL0k2YR-LZzGXJYBpvs3yfUWzH4g35U6nfTn9bnr1pAYK568Yk3Mt4/s100/ReadMore1-+techtspot.png'/>".

Here are some Read More image buttons code, you can replace the image RED URL with these below image URL code and you can also create your image Read More button you just create an image and upload it in your blogger blog and copy the image URL then replace it with RED URL with your image URL.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFkuhbQUmzfomVV36F9scIaCNFamdKkBgJhhKLcmStZ8Tu0JxYKj3PdhBvooAhvJl7-ppxz6gwZr7ejqzctna5JeL0k2YR-LZzGXJYBpvs3yfUWzH4g35U6nfTn9bnr1pAYK568Yk3Mt4/s100/ReadMore1-+techtspot.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaSXEEMBjEVLOurzTMEMbOCniFYO18SNWgH9n0j1Xvn_H0jaO5OL9QiRAUW7-T05d-aPLRc3VnY7kAiZzR1FasrwZYMw9Ej_WBRh6AqM6MeKXZp-NCXMkDaln3fJvk72lp64L-z0s2ecY/s100/ReadMore2-+techtspot.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9XU2s8kq8iD9zXV7ZHaWrajvqZLTNHMH4FMwZ1LbgUTiDl_jThEZRfaKebYDzLUOhcTrLj2bEU_FuuHU4hwShcTFUb1Tk5BHINBz4yKsjJ088xIi4OrU8nlxyy1dw8W87XKGb6F1X6ms/s100/ReadMore3-+techtspot.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifMiPEej5UxpSFVNcMfOqLphyokNRj6A5SMLxF7PPYmPUxTRqDmzpxwLlc1zZVhVWes6-mPwJ9tdTXUxp_9FFQLPE3eT0E4DAb6Y9bpoWOYsfidgN0ZLuzzIL64igtT92CWHP0kdNRb7w/s100/ReadMore4-+techtspot.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCuF45BoRFkSLJh-jdgTsyUmpVJCIXxr_74pgzwt_JHi9LSGQXsJLdM03SewFRCl6Z_ul63fSjTa9KxVFgXttN6DvPnZFTBB63zBrWDZzwedHUEHOfVOgCJp8zpn_GtLDft1koZPZbt6Q/s0/ReadMore5-+techtspot.png

Solution 2 >> we can customise our Read More option.

Step 4: In this step you can only add CSS code to your blog theme it will improve your read more button or link, now press the Ctrl+F button and find out the "]]></b:skin>" code and you just copy CSS code and paste it above the ]]></b:skin> code and click the Save button, but if you want to replace your Read More link just find out the "<data:post.jumpText/>" code, now you can replace this code with "Continue Reading" text.

Read More Button CSS Code >>

.jump-link {

text-align: left;

padding-top: 15px;}

.jump-link a {

font-size: 15px;

padding: 10px;

border: 1px solid;

font-weight: bold;}

Step 5: Now open the Blogger blog to check the results.

Read More:- 
Add Animated Download Buttons in Blogger
How to Schedule Post on Blogger blog
Disable Comment Box on Blogger blog Posts
Add Flipboard Magazine to Blogger blog

I hope you enjoy this Post. If any problem comment it.