How to Edit "Home", "Older Posts" & "Newer Posts" Links in Blogger?
If you're a Blogger user, you must have noticed the "Home" button or link at the bottom of most blogs on almost all pages. And when you are on a post page, you may also have noticed "Older Posts" and "Newer Posts" links or buttons.
These are Blogger's default navigation buttons, and serve to facilitate the user/reader for moving to the homepage or next or previous post of the blog. Technically, they're known as Blog Pager.
But what if you don't like these buttons as such?
You may want to edit them, or remove them altogether. So, here we are with a simple tutorial about How to Edit "Home", "Older Posts" & "Newer Posts" Links in Blogger?
Steps
:
1. Navigate to Blogger Dashboard.
2. Click on your Blog Title.
3. Navigate to Template tab.
4. Click on Edit HTML button.
a) How to Hide "Home", "Older Posts" & "Newer Posts" Links (at the bottom of the pages) in Blogger/Blogspot?
Here we are gonna edit CSS style corresponding to Blog Pager.
i. Find CSS style named .blog-pager in your template.
ii. Add display:none; style attribute into CSS style as below.
.blog-pager { background: $(paging.background); display: none;}
b) How to Edit/Change "Home", "Older Posts" & "Newer Posts" Links (at the bottom of the pages) in Blogger/Blogspot?
All you have to do is finding layout data tags corresponding to each link and replacing them with whatever you wanna display instead of current link text.
i. Find the layout data tag corresponding to each link in your template.
Home -
<data:homeMsg/>
Older Posts -
<data:olderPageTitle/>
Newer Posts -
<data:newerPageTitle/>
ii. Now replace the layout data tag with the text or image you wanted to appear.
Note: You may wonder by having two results for each layout data tag. Just select the first resulting tag when you gonna modify.
i.e: If you need to change Older Posts link with text or image, just find corresponding layout tag, which is <data:olderPageTitle/> in your template.
... expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
Then replace it with your text
... expr:title='data:olderPageTitle'>[Your Text]</a>
Or else with your image
... expr:title='data:olderPageTitle'><img src='[Your Image URL]' title='[Title of Your Image]'/></a>
Color Indication Information
- The text you wanna replace with
- The URL of the image you gonna use to appear instead of existing link
- Add title for the image if you prefer and it will be displayed whenever an user points their mouse over your image
6. After changing or hiding Home, Older Posts and Newer Posts links, Preview your blog and click on Save template button.
Enjoy :-)
0 comments :
Post a Comment