Below, we have provided a step by step process carefully and completely to get a clear understanding on how to add "Read More" links into your post in blogger If any of the steps is missed, then definitely your website may get issues while saving the code.
What is "Also Read" in Blogger Post?
Also Read is an inter-linking posts method, in which it can add a group of post links in any post within the blog which in return can increase post views and also reduce bounce rate on your blog.
How Many "Also Read" On A Post?
There are no limitation but, a reasonable suggestion is to add maximum of 4 links per post and minimum 2 links. In this article, we will be using 4 Also Read links in a post
Steps to add Also Read in Blogger
Step-1: Login to your blogger website dashboard.
Step-2: Click the menu on the top right side and click on Theme.
NOTE: Click backup to copy the theme code and save it, if any problem occurs while saving the code then you can backup your code again and you will not loose changes.
 |
| Blogger Edit HTML Page |
Step-3: After backup code, click on customize and then choose Edit HTML option.
Step-4: Now your blog theme code will appear, now click on blank area and press "CTRL + F" on your keyboard, a search bar will appear, type </head> and press enter.
 |
| Search Theme Code </head> |
Step-5: Copy the below provided code-1 and paste the code above the </head> tag
Step-6: Now you need to press "CTRL + F" and then you see search bar, type "<data:post.body/>" and press enter.
|
| Search Theme Code <data:post.body/> |
Step-7: Copy the below provided code-2 and replace the code after <data:post.body/>.
Step-8: After adding the two code, click on save button, now you have successfully added Also Read in your blogger posts.
|
| Also Read Demo in Blogger Post |
Note:
If you get any error while saving the code, then you need to backup your code again and do the complete process again as told in the above steps.
Visit your blogger website and check whether the posts are visible or not, if not visible then it is due to less posts in your website, so write more articles with same labels.
In some blogger themes this code may not work properly so before adding the code, backup your complete theme.
If you have any problem, then contact us
Code-1 [Paste above </head>]
<b:if cond='data:blog.pageType != "index"'>
<style type='text/css'>
/* Multi Related Post */
.gourabdesignmultiRelated{background-color:black;border-radius:6px;color:#fff;margin:14px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;overflow:hidden;transition:all .3s}
.gourabdesignmultiRelated:hover{background-color:#222}
.gourabdesignmultiRelated .content{padding:12px 15px}
.gourabdesignmultiRelated .content .text{margin-right:5px}
.gourabdesignmultiRelated .content a{color:rgb(239 65 54);text-decoration:none;line-height:1.5em}
.gourabdesignmultiRelated .content a:hover{text-decoration:underline}
.gourabdesignmultiRelated .icon{height:auto;min-width:55px;background:#f44336 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%23fff'/%3E%3C/svg%3E") center / 40px no-repeat;transition:all .3s}
</style>
</b:if>
Code-2 [Paste the code after <data:post.body/>]
<b:if cond='data:blog.pageType != "index"'>
<style type='text/css'>
/* Multi Related Post */
.gourabdesignmultiRelated{background-color:black;border-radius:6px;color:#fff;margin:14px auto;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;justify-content:space-between;overflow:hidden;transition:all .3s}
.gourabdesignmultiRelated:hover{background-color:#222}
.gourabdesignmultiRelated .content{padding:12px 15px}
.gourabdesignmultiRelated .content .text{margin-right:5px}
.gourabdesignmultiRelated .content a{color:rgb(239 65 54);text-decoration:none;line-height:1.5em}
.gourabdesignmultiRelated .content a:hover{text-decoration:underline}
.gourabdesignmultiRelated .icon{height:auto;min-width:55px;background:#f44336 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%23fff'/%3E%3C/svg%3E") center / 40px no-repeat;transition:all .3s}
</style>
</b:if>
Conclusion
If you follow above provided steps carefully and completely then you can add Also Read in your blogger website easily without getting any issue.
If you feel this content is helpful then share this article and follow us from social media platforms.
