You are bored with default Read more>> link in blogger, that’s why you are here. Don’t worry ! After reading this whole article you’ll feel happy. Here we’ll see How to change the Default Read more>> text, change the Default style of that link, Set alignment to that link, Use fancy Read more picture instead of Text etc. Here you’ll learn more on CSS and Template Editing. As usual, Go to the Blogger Dashboard 😉 and follow the Required steps to spice up your blog.
Change Read more>> text in blogger:
Inside blogger Dashboard click on Layout on the Left side panel, move inside that and here you’ll find Large Rectangle named ‘Blog Posts’. Edit on that which allows you to Edit the Default Read more Text. Name it ‘Continue Reading>>’ or anything you want. Save it and You are done with Name change.
Change the Read more Style:
You can change the size and style of the Read more Text by customizing the css. Inside dashboard, click on Template> Customize> Advanced> Add CSS. Here add the style code for which you want. Let’s See how to add the Style code for Read more Link. Read more is named as jump link in our template code. So we’ll add style with that name.
.jump-link {font-size: 130%; color: #274e13; font-weight:bold; font-family:verdana; }
In the Above line I’ve used the Text color as Green and Font-weight as bold and font style as verdana. which looks as Read More>> . You can add more styles to Text.
If you want to add Text With Background, Use below code.
.jump-link a {background: #33aaff; color: #ffffff; padding: 2px;}
I’ve used the Blue background and white text to link, which looks as Read More>>
You can Set Alignment to Read more Text.
Add Below code to move your text to ‘Right’ and ‘center’ respectively.
.jump-link {text-align: right;}
.jump-link {text-align: center;}
You can change color of link on Mouse Hover.
Add color on Hover to the Read more>> link. On mouse hover to the Read more link, changes the color of text and background also.
.jump-link a:hover {background: #999999; color: #ffffff; padding: 2px;}
Here I’ve used Gray background and white Text color on hover. You can use any desired color.
Use Read More Image instead of Plain text Link:
For adding the Read More image or button to blog for more fancy look, we need to customize the Template. Before doing any changes to HTML code, Backup Template First. After that click on Edit HTML. Inside the HTML code Press ctrl+f to find the following jump link code.
<data:post.jumpText/>
Replace the above code with the Image Tag as mentioned below
<img border=”0″ src=”URL Of The Image” />
Where “URL of the Image” is the Full URL of image which you have uploaded anywhere on the web.
Click on the Preview to see the changes. Save template and you’re Done.
Thanks and state your views by comment !