5 Beautiful Read more link customize for Blogger

 

5 Beautiful Read more link customize for Blogger

In this post we will explain 5 beautiful Read more link customize over 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. 

Why we need read more link Attractive ?

While We write your Content long enough at that time 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.

Method to Customizing Read more Link in Blogger

It is a simple and easy process to design Read more link for your Blog Post for this You should follow below few steps:

• Navigate to your blogger dashboard Using your Gmail Account.
• Select your blog.
• Select template option.
• Select Edit HTML option Under Customization (click on arrow of Customization tab).
• Press Ctrl+F from Keyboard for search
• In the template code find ]]></b:skin>
•  Paste one of the following codes of your choice just above ]]></b:skin> .
• Click on Save icon to save codes in 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 the Font property.