Blogger Tips
Newer Post, Home and Older Post are links that appear on the bottom of the posts. When a visitor click on one of these links, they will take him to the page with the list of your previous posts.
The number of the posts on these pages will be the same as the number of the posts on your main page.
What we can do:
A. Change the text of Newer, Older, Home links
B. Place a picture beside them (a small icon, arrow, or whatever...)
C. Add an image instead of the links
So let's start customizing them...
1. Log in to your Blogger Dashboard, go to Template > Edit HTML
2. Click anywhere inside the code area and find - using CTRL + F keys - the following code:
Now change these fragments of codes as it follows:
You need to REPLACE following parts in original code with ANY TEXT you like:
Add the below code just at the beginning of each of the colored fragments of codes from step 2.
<img src="URL Address"/>
So it should look like this:
You can place any kind of picture you want All you have to do is use this code for the pic:
...and in code, REPLACE the original link code for text with picture code
3. That's it! Preview and Save the Template.
- Add Author's Profile Picture And Name In Multi Author Blog
In this tutorial we will see how to add the author's profile picture and name on a Blogger blog just below the post title. This can make your blog not only look more personal but attaching an image to your blog posts in Blogger can help visitors identify,...
- How To Replace Older Posts And Newer Posts Links With Blogger Post Titles
If you have ever visited a WordPress blog, you might have noticed that the blog pager on these blogs displays the actual post titles, not just links to the older and newer posts that you find at the bottom of your Blogger blog. This links are parts...
- How To Add An Image Next To Blogger Post Title
It has often been said that a picture says a thousand words, so in the struggle for the attention of the reader, we can add a picture or an icon to our post title, as I have put in the title of the post in the screenshot above. Show Image Icon before...
- How To Remove Blogger Threaded Comments
The Blogger Threaded commenting system allows a reader to reply to other reader comments on that post. Blogger supports threaded commenting with two levels - the original comment, and the replies to that comment. If you want remove threaded comments from...
- Add Css/jquery Fixed Horizontal Menu To Blogger Blog
This navigation bar gets semi-transparent when you scroll down the page and is slightly showing up by fading out and becoming almost transparent. When the user hovers over it, the menu becomes opaque again. Inside of the navigation there are some links,...
Blogger Tips
Replace Older, Newer And Home Blogger links with an image or text
Newer Post, Home and Older Post are links that appear on the bottom of the posts. When a visitor click on one of these links, they will take him to the page with the list of your previous posts.
The number of the posts on these pages will be the same as the number of the posts on your main page.
What we can do:
A. Change the text of Newer, Older, Home links
B. Place a picture beside them (a small icon, arrow, or whatever...)
C. Add an image instead of the links
So let's start customizing them...
1. Log in to your Blogger Dashboard, go to Template > Edit HTML
2. Click anywhere inside the code area and find - using CTRL + F keys - the following code:
<b:if cond='data:newerPageUrl'>Or find in this code the following fragments which corresponds to each page links
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
- <data:newerPageTitle/> represents Newer Posts link
- <data:olderPageTitle/> represents Older Posts link
- <data:homeMsg/> represents Home link
Now change these fragments of codes as it follows:
A. Change the text of Newer Posts, Older Posts and Home Links
You need to REPLACE following parts in original code with ANY TEXT you like:
- replace <data:newerPageTitle/> with, for example NEXT POST
- replace <data:olderPageTitle/> with, for example PREVIOUS POST
- replace <data:homeMsg/> (only the first one) with, for example HOMEPAGE
B. Place a picture beside Newer Posts, Older Posts and Home links
Add the below code just at the beginning of each of the colored fragments of codes from step 2.
<img src="URL Address"/>
So it should look like this:
<img src="URL Address"/><data:newerPageTitle/>Note: Replace URL Address text with the url address of the image you want to appear
C. Replace Older Posts, Newer Posts and Home links with an image/picture
You can place any kind of picture you want All you have to do is use this code for the pic:
<img src="URL ADDRESS"/>...just replace URL ADDRESS, with the URL of your hosted picture
...and in code, REPLACE the original link code for text with picture code
- replace <data:newerPageTitle/> with the pic for newer (next) posts
- replace <data:olderPageTitle/> with the pic for older (previous) posts
- replace <data:homeMsg/> (only the first one) with the pic for homepage
Screenshot
3. That's it! Preview and Save the Template.
- Add Author's Profile Picture And Name In Multi Author Blog
In this tutorial we will see how to add the author's profile picture and name on a Blogger blog just below the post title. This can make your blog not only look more personal but attaching an image to your blog posts in Blogger can help visitors identify,...
- How To Replace Older Posts And Newer Posts Links With Blogger Post Titles
If you have ever visited a WordPress blog, you might have noticed that the blog pager on these blogs displays the actual post titles, not just links to the older and newer posts that you find at the bottom of your Blogger blog. This links are parts...
- How To Add An Image Next To Blogger Post Title
It has often been said that a picture says a thousand words, so in the struggle for the attention of the reader, we can add a picture or an icon to our post title, as I have put in the title of the post in the screenshot above. Show Image Icon before...
- How To Remove Blogger Threaded Comments
The Blogger Threaded commenting system allows a reader to reply to other reader comments on that post. Blogger supports threaded commenting with two levels - the original comment, and the replies to that comment. If you want remove threaded comments from...
- Add Css/jquery Fixed Horizontal Menu To Blogger Blog
This navigation bar gets semi-transparent when you scroll down the page and is slightly showing up by fading out and becoming almost transparent. When the user hovers over it, the menu becomes opaque again. Inside of the navigation there are some links,...