Customize Read More Link In Blogger

5 ways to customize read more link in blogger

In this post we will explain how to customize the default read more link in blogger blogs to give it a beautiful and stylish look. Read more link is available below each and every post summary. We can open full post by clicking that read more link. The default read more link in blogger is very ugly but the good thing is that it can be easily customized by using CSS code. In this post there are 5 different designs  provided for customizing the read more link in blogger.

 

Customizing Read more link in blogger

• Navigate to your blogger dashboard.
• Select your blog.
• Select template option.
• Select Edit HTML option.
• In the template code find ]]></b:skin>
• Just above it paste one of the following codes of your choice and click on save template.

Design 1:

 

.jump-link

{

margin-top:20px;




}

.jump-link a

{

background:#333333;

color:#ffffff;

padding:10px;

border-radius:30px;

text-decoration:none;

font:14px verdana;




}

.jump-link a:hover

{

background:#666666;




}

 

Design 2:

.jump-link

{

margin-top:20px;




}

.jump-link a

{

border-bottom:6px solid #1289df;

border-top:1px solid #1289df;

border-right:2px solid #1289df;

border-left:1px solid #1289df;

color:#1289df;

padding:10px;

border-radius:20px;

text-decoration:none;

font:14px verdana;

}

.jump-link a:hover

{

color:#1289df;

border-bottom:3px solid #1289df;

border-right:1px solid #1289df;

}

 

Design 3:

.jump-link

{

margin-top:20px;




}

.jump-link a

{

background:#1223df;

color:#ffffff;

padding:10px;




text-decoration:none;

font:14px verdana;

}

 

Design 4:

.jump-link

{

margin-top:20px;




}

.jump-link a

{

padding:10px;

border-left:7px solid #493990;

border-top:1px solid #493990;

border-bottom:1px solid #493990;

border-right:1px solid #493990;

border-bottom-right-radius: 20px;

border-top-right-radius: 20px;

color:#493990;

text-decoration:none;

font:14px verdana;

}

.jump-link a:hover

{

color:#ffffff;

background:#493990;

}

 

Design 5:

.jump-link

{

margin-top:20px;




}

.jump-link a

{

background:green;

padding:10px;

border:1px solid green;

border-bottom-right-radius: 30px;

border-top-left-radius: 30px;

color:ffffff;

text-decoration:none;

font:14px verdana;




}

Instructions:

• You can change background color of the read more link by changeBackground property in the given code. 
• Text color can be changed by modifying the value of Color property in the code. 
• Similarly you can change font of the Read more text by changing theFont property.