Blogger's read more link plays quite an important role in the navigation of our blogs.It helps visitors to navigate through the blog quite well on the hompage and at the end of every post.
But navigating the visitors isn't quite enough, Right ?
It needs to be well blended with your blog's appearance too. And that is just what i'll be blogging about today in this post.
I'll let you know you can get your blog's Older, Newer and Home links customized in the homepage and in the post footer so that they make the best contribution possible to your blog's appearance.
So Let's get Going....
1.How to Replace Newer Posts, Older Posts and Home Links with Images :
1.Go to blogger dashboard and select your blog.
2.Navigate to the template section of the blog and click on Edit Template.
3.Press CTRL + F to get the search bar.
Replace Newer Posts link with Image :
Search for this code <data:newerPageTitle/> and replace it with this code
<img src='Image Url' alt='Newer Posts'>
Replace Older Posts link with Image :
Search for this code <data:olderPageTitle/> and replace it with this one
<img src='Image Url' alt='Older Posts'>
Replace Home Link with an Image :
Search for this code <data:homeMsg/>
Note :
You may found this code twice in your template.If that was the case with you then try replacing the first code with the following code, if the first code didn't worked for you then replace the second one with the code given below.
Replace the code with this one <img src='Image Url' alt='Home'>
Note:
Don't forget to paste in the Url of the images with the text highlighted in Pink. Other wise the images won't appear on your blog.
Tip :
You can use online tools like Ipiccy to create images and icons online for your blog for free.
Recommended Posts :-Add Code Snippets In Posts | The Cool Way
Recommended Posts :-How to Remove Showing Posts with Label Message
2.How to change the text on Newer Posts, Older posts and Home links :
If you wish to change the ancher text of Newer Posts, Older Posts and Home links then don't worry you can do it in no time too.Here's how....
For Home Link : Find and Delete <data:homeMsg/> and type in whatever text you'd like to appear instead of Home.
For Newer Posts Link : Find and Delete <data:newerPageTitle/> and type in whatever text you'd like to appear instead of Newer Posts.
For Older Posts Link : Find and Delete <data:olderPageTitle/> and type in whatever text you'd like to appear instead of Older Posts.
Customizing The Text :
Changing the Font family and the Colour of the Text :
You can change the color and font-family of the Newer Posts, Older Posts and Home links by the style attribute.Here's how....
For Newer Posts Link : Find <data:newerPageTitle/> and replace it with this tag
<p style='color:red;font-family:courier;'>Newer Posts</p>
For Older Posts Link : Find <data:olderPageTitle/> and replace it with this tag
<p style='color:red;font-family:courier;'>Older Posts</p>
For Home Link : Find <data:homeMsg/> and replace it with this tag
<p style='color:red;font-family:courier;'>Home</p>
<p style='color:red;font-family:courier;'>Home</p>
For Newer Posts Link : Find <data:newerPageTitle/> and replace it with this tag
<p style='color:red;font-family:courier;'>Newer Posts</p>
For Older Posts Link : Find <data:olderPageTitle/> and replace it with this tag
<p style='color:red;font-family:courier;'>Older Posts</p>
Note:
I have provided red color and an font family of courier to the links in the above code just for tutorial purpose.You can change the values in pink that will look suitable with your blog's appearance.
Share Your Creations :
Share your new Older posts, Newer Posts and home links with me.Drop a link to your blog in the comment box where I can see links.You can also share your links with via Google Plus or on Facebook :)
No comments:
Post a Comment