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.