Customize and style Read More link in Blogger

Thanks to a recent reader to this blog who wanted to know how to right-align 'Read More' in Blogger which prompted me to google for answers and learned much in the process.

Hence, I'm happy to share here some related tips for those seeking to learn how to customize and style the 'Read More' or Jump link in various ways as illustrated in the image below!

To do that, you'd first need to have the 'Read More' link below your post summaries in your blogspot posts. If you don't know how, follow this tutorial to create 'Read More' with Blogger's jump break feature.

Next,
learn how-to customize and style the 'Read More' or 'Jump Link'
in these interesting ways -

A. Change the 'Read More »' default text :

1. Sign into your Blogger account. At Dashboard, selecting Design will bring you to the Page Elements page. Click the Edit button of the Blog Posts gadget.
2. The pop-up Configure Blog Posts appears to enable you to change the text to whatever you fancy.
3. Click Save to exit and effect changes.

B. Align the 'Read More' link to the right or center :
(by default, it's left-aligned)

1. Just need to add CSS (cascading style sheets) to your blog's template. Go to Design | Template Designer.
2. Click Advanced | Add CSS tab. Add the following CSS code in the field box provided and click Apply To Blog when done:
   
   .jump-link {text-align: right;}
   
   (change the word, right to center if you want to center-align the text)

C. Increase font-size and the font style of the 'Read More' link :

1. As in B. above, go to Design | Template Designer and add the following CSS code at the field located in the Advanced | Add CSS tab:
   
   .jump-link {font-size: 110%; font-family: "lucida handwriting", cursive;}
   
   (change the font size and family as desired)

D. Add a background to the 'Jump Link' and change the text color :
(this will override the default style)

1. Add CSS to the Template Designer as follows:
   
   .jump-link a {background: #b2b4b6; color: #ff0000; padding: 2px;}
   
   (I've chosen a grey background and red text but you can change the colours to match your blog and increase the px value if desired)
   

E. Add hover colours to the 'Jump Link' :
(colours of the background and text changes when a reader mouseover the 'Read More' link)

1. Add CSS to the Template Designer as follows:
   
   .jump-link a:hover {background: #000000; color: #ffffff; padding: 2px;}
   
   (this example has a black background and white text, you can change the colours and padding size as desired)
   

Note: The image below gives an example of the CSS snippets that were added to customize and style the 'Read More' or Jump link as explained in sections B to E above.

F. Add a 'Read More' linked image or button as an alternative to the plain text link :

1. Go to your blog's Dashboard | Design | Edit HTML. Before editing, download a copy of your template.
2. Tick the Expand Widget Templates. Then, use the browser's search feature (Ctrl+F in Windows or Command+F in Mac) to find the word, jump-link and locate in the next line, the following code:
   
   <data:post.jumpText/>
   
3. Replace the above code with the image tags as follows:
   
   <img border="0" src="URL OF THE IMAGE" />
   
   (where the URL OF THE IMAGE is the entire URL of your uploaded button image as stored by your photo hosting website, such as Blogger, Photobucket or Flickr)
   
4. When done, click Preview to see the changes and if satisfied, click Save Template and View Blog.
5. If you'd like to right-align the button, simply follow steps at section B above.

Other related links:

• W3Schools on CSS Examples
• W3Schools on CSS Colors
• Blogger Buster
• AllBlogTools.com

Enjoy styling the appearance of your 'Read More »' links!

Keep learning~~keep smiling~~keep sharing!!