Wednesday, April 16, 2014

Replace Older, Newer And Home Blogger links with an image or text alphause

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