Po ...
Replace Older, Newer And Home Blogger links with an image or text
21 comments
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 toTemplate>Edit HTML
2.Click anywhere inside the code area and find - using CTRL + F keys - the following code:
Or find in this code the following fragments which corresponds to each page links
represents Newer Posts link
represents Older Posts link
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:
replacewith, for example NEXT POST
replacewith, for example PREVIOUS POST
replace(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.
So it should look like this:
Note: ReplaceURL Addresstext 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:
...just replaceURL ADDRESS, with the URL of your hosted picture
...and in code, REPLACE the original link code for text with picture code
replacewith the pic for newer (next) posts
replacewith the pic for older (previous) posts
replace(only the first one) with the pic for homepage
Screenshot
3.That's it! Preview and Save the Template.
Like
6
Random Posts
Top Commentators Widget with Avatars for Blogger21/10/2013 - 5 Comments
How to Add a Tiny jQuery Circleslider to Blogger28/10/2013 - 3 Comments
Create a Background Slideshow for Blogger19/09/2013 - 5 Comments
Related Posts:
How to Create Magazine Style with P...
How to Create a Sitemap or Table of...
Recent Rotating Post Gadget with Ex...
4 Different Styles For the Popular ...
How to Add Numbered Page Navigation...
21 comments:
Abhishek sony 6/20/2012
what if i want to place images at the top of the post ? becuase it shows at the end of the post ?
Please reply asap i really need it ... my blog http://nannu4u.blogspot .in/ Reply
V.RAGU NATHA SETHU PATHI 2/08/2013
how to change sir. Please reply Reply
mydokumentasi 4/09/2013
Is this show up on search by label? Reply
Ace Vergell Catig 5/08/2013
i cannot find.. Reply
हिंदी गाने 5/27/2013
thx i was searching for this...would implement this on my blog soon. Reply
Elou Shannen Neri 6/01/2013
sorry i don't get it. please explain it thoroughly. I want this tutorial. Reply
Replies
Admin 6/01/2013
Ok, I've updated my post and added some screenshots. I hope it will help:)
Thanks for the visit!
Elou Shannen Neri 6/01/2013
it didn't work? :(((( Reply
Mike 6/01/2013
Awesome tutorial. Thank you!
Reply
StickyMon 6/03/2013
Is there a way to switch the positions of the links so that "Older" shows up on the Left and "Newer" shows up on the right? I'd rather switch the actual links than just change the names. Reply
Taha Farooqui 6/08/2013
Thanks Bro ... Reply
Nicola Thomas 6/20/2013
Hiya thanks for that it worked a treat however the images are huge how do I alter the code to include thumbnail images and not full size ones ?? Reply
Jeanie (Inspired Wish) 6/23/2013
Thank you for this tutorial. I placed images instead of the words. However the previous post image seems to have a title attached with it. When you hover over the image with a mouse it comes up with "older posts". The other side does that too, but at least that says "Newer Posts". That's not so bad. I can't work out how to change "older posts" to previous. Any ideas? My blog: http://www.inspiredwish .com Thanks, Jeanie Reply
Top Scam Reviews 9/07/2013
Thank you for this info Reply
GoogleGeorge 1/03/2014
Likewise... Reply
Adil Muhammad Yousuf 1/10/2014
Thanks for sharing such a informative article. Reply
Contoh Paragraf Narasi 1/24/2014
i think this tutorial so helpfull. i am finish my work now... Reply
Rebecca 1/27/2014
When I control F the only thing is close to data:newerPageTitle/ is title
#blog-pager {display: none;}
I hope this will work for you. Thanks for visiting!
Pieraksti 2/19/2014
Thanx, I this like and I change my links with pictures. Reply
Add comment
Comment as: Sign out
Notify mePublishPreview
Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED
Search
Search
Follow on Facebook
Helplogger
Like
2,786 people like Helplogger .
Facebook social plugin
Follow on Blogger
Subscribe via Email
Receive Quality Tutorials Straight in your
Inbox by submitting your Email below.
Submit
Or subscribe via RSS Feed
Recent Posts
How to Add Numbered Page Navigation Widget for Blogger
5 Easy Ways to Improve the SEO of a blog & Boost Traffic
What is the difference between padding and margins?
Add a Custom jQuery Lightbox To Blogger
How to Use Cookies in Javascript
Recent Comments
She and Me
Thank you so much,It worked perfectly. You make it all so easy to...
Junkyo No Hikari
Thanks its work really well ^__^
Junkyo No Hikari
Hye... Thanks to your tuto its work ^__^ btw I'm delete the...
Eliza Lincy
How to increase the number of posts shown in Home page after...
Varad Parab
That was one awsome post...it really helped!!!
Popular Posts
Simple Recent Posts Widget for Blogger/Blogspot
Create A Rollover Image Effect (change image on mouseover)
Recent Comments Widget For Blogger
How to remove Blogger Picture/Image Shadow and Border
Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger
6
Like
No comments:
Post a Comment