.comment-form #url{ display:none; }

Top 5 Beautiful Read more link customize for Blogger

 

 

5 Beautiful Read more link customize for Blogger
5 Beautiful Read more links customize for Blogger

In this post, we will explain 5 beautiful Read more links customized over the default read more link in blogger blogs to give it a beautiful and stylish look. Read more is available below each post either in summary or we can put using page break or Line break command.

Why we need read more link Attractive ?

While We write your Content long enough at that time We can open the full post by clicking that read more link. The default read more link in blogger is not organized in a good manner, However, 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 links 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 the template option.
  • Select the Edit HTML option Under Customization (click on the arrow of the Customization tab).
  • Press Ctrl+F from Keyboard to search
  • In the template code find ]]></b:skin>
  •  Paste one of the following codes of your choice just above ]]></b:skin> .
  • Click on the Save icon to save codes in the template.

  •  

Design -1

 

Code
.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


 

Code
.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

 

Code
.jump-link { margin-top:20px; } .jump-link a { background:#1223df; color:#ffffff; padding:10px; text-decoration:none; font:14px verdana; }

 

Design -4

 

Code
.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

 

Code
.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 the background color of the read more link by changing the background property in the given code. 
  • Text color can be changed by modifying the value of the Color property in the code. 
  • Similarly, you can change the font of the Read more text by changing the Font property.

Leave a Comment