Wednesday, April 19

Customize Read More or Jump Links Blogger

Customize Read More or Jump Links Blogger

Jump Links are the links you insert on to a post using Jump Break function in post editor.
Maybe you don’t want your whole article taking up all that precious real estate on your front page. To only show some part of article on homepage and index pages we use jump links or read more links. Readers can click on them to read full article. If you have noticed blogger read more links they feel pretty basic but don't worry they can be easily customize using CSS.


How To Customize Read More Links?

Step 1: Go to Blogger>Theme>edit HTML.

Step 2: Search for ]]>< using Ctrl+F.

Step 3: Add below codes just above ]]>< and save theme.
.jump-link {
text-align:right;
}
.jump-link a {
font-size:15px;
padding:4px;
border: 1px solid #000;
background-color:#ccc;
color:#000;
font-weight:bold;
}
.jump-link a:hover {
text-decoration:none;
background-color:#bfbfbf;
color:#ffffff;
box-shadow: 2px 2px 2px 2px #000000;
}
Customization: 

  • Change blue background text to change position of link to left or center.
  • Change red background html color value to change jump link button color.
  • Change green background html color value to change jump link button color on hover.
How To Use Read More In Posts?
  • Edit post in which you want to use jump link or read more link.
  • Use function next to special character to insert jump links in a post.