Skip to main content

Customize Read More Link In Blogger

Read more link in Blogger : 

We can see read more links in many blogs today. When you click on read more link, full post content will display. It is really good idea to add read more link to your blog post , if the post is really lengthy. In Blogger we can add read more link to your blog post with Insert jump break in your post editor. In the previous post we also discussed about how to add read more link to your blog post in Blogger. Now we are going to discuss about read more link customization on your Blogger blog.

By default read more link will not contain any graphics. It will display like"  Read more » " in your blog post. But we can change that default read more link text , we can add background and change text color and more.

How to Customize Read more link in Blogger Blog :

After adding read more link to your Blogger blog, you can see specific CSS code regarding that read more link in your Blogger template code. To make changes we have to add custom CSS code to your Blogger blog. We can see <data:post.jumpText/> on your Blogger template code. We can change read more link by making changes in <data:post.jumpText/>. 
How To change the read more link text  :
  • Click on Template and find and just replace <data:post.jumpText/> with your custom text 
  • Save your Template.
In this post I'm giving custom CSS code to customize read more link in your Blogger blog post.

Follow below steps to customize Read more link in Blogger blog

Step 1 : Go to Blogger Dashboard

Step 2 : Click on Template

Step 3 : Click on Edit HTML

Step 4 : Search ]]></b:skin>  in your Blogger template code.

Add below code just above ]]></b:skin>

.jump-link
{
margin-top:10px;
}
.jump-link a
{
background:#1B73A1;
color:#ffffff;
padding: 5px;
border-radius:20px;
text-decoration:none;
}
.jump-link a:hover
{
background:#124D6C;

}
Step 5 : Click on Save template

Now go to your Blogger and see the customized read more link on your Blogger blog. You can change background color , text color by changing the values in the above CSS code. You can also increase the text font size by adding the font:16px; line to the  above  CSS code . Like this you can customize read more link in your Blogger blog.

Comments

Popular posts from this blog

Change font size of blogger posts

Post Font size :  Even if your blog having quality content , If the post text is not easily readable , there is no use with that content. If the content not easily readable , your blog visitor can't spend more time on your blog to your posts. So increase your blog post font size until the post text is readable easily and also set good font style. In this post i'm giving the information to change the font size of your blogger posts. How to increase posts font size in blogger blog : It is easy to increasing font size of your blogger posts. By default the font size of blogger blog posts is small. Blogger template contains specific script code for the post customization , with that we can easily change the font size of posts in blogger. For easily readable it is better to use the font size between 16 to 18  for blog posts. Follow below steps to change blogger posts font size  step 1 : go to blogger dashboard
step 2 : click on template
step 3 : click on edit HTML
step 4 : searc…

Change Header Size In Blogger

How to change header size in blogger blog: We can increase or decrease header size in blogger blog.It is easy to adjust size of your blog header in blogger.
follow below steps to change header size in blogger blog step 1 : go to blogger dashboard
step 2 : click on template
step 3 : click on edit HTML and tick expand widget templates
step 4 : and find below code
/* Header ----------------------------------------------- */ .header-left{ display: inline-block; height: 30px; width: 300px; float: left; } .header-right { display:inline-block; float:right; }
and change height and width px value to resize blogger header.if you want increase blogger header increase px value or to decrease blogger header size decrease px value
step 5 : click on save template

Change post a comment text on blogger blog

How to change "post a comment" text on Blogger blogs : "Post a comment" text will appear above comment box or comment form on Blogger blog. We can customize that message as we require. We can change that post a comment text and also add/replace an image in that post a comment text place on Blogger blog. It's really good idea to customize a post a comment text on your Blogger blog. If we change post a comment message with an polite message then we can attract our blog visitors. So by changing the default post a comment text we can get more comments. In this post I'm explaining about how to change post a comment text on Blogger blogs.


Follow below steps to change "post a comment text" on your Blogger blog
step 1 : Go to Blogger dashboard

step 2 : Click on template

step 3 : Click on edit HTML

step 4 : Search below line <h4 id='comment-post-message'><data:postCommentMsg/></h4>
Now replace <data:postCommentMsg/> in above…