Replace Newer, Home and Older Post with your Images in Blogger

There is one problem with blogger for people with no knowledge of CSS and html. I am no expert in these but I join classes everyday to learn them. The problem I was talking about was that the newer posts, home and older posts buttons are not easily visible because of their smaller size and lighter colors. I will teach you here, how to replace them with your own images like the following example.

new, old, home button images


1. First of all, create some images using Photoshop or gimp. I used Microsoft power point to add white text and highlight it with black to create a simple style and used snipping tool to capture them. Totally depends on your imagination!

2. Now we need to upload them to any image hosting site or You can create a dummy blog and upload images there and then get their url.

3. Go to Blogger>YOUR BLOG> template>Backup/Restore and download your template to prevent any loss.
new, old, home button images



4. Now click on "Edit HTML".

5. Now choose "Expand Widget Templates" on top.


6. Press ctrl+f and enter this in the search box.

<data:newerPageTitle/>

7. Replace it with <img src = 'URL of your image for Newer Posts' />

Example <img src = 'http://2.bp.blogspot.com/-7Zwn5a8mLYI/UT1Y6SQLJTI/AAAAAAAAAhA/VbZYgae8UL4/s1600/cssc.JPG' />

8. Now search for the following.

<data:olderPageTitle/>

9. Replace it with <img src = 'URL of your image for older posts' />


10. Now search for the following.

<data: homeMsg/>

11. Replace it with <img src = 'URL of your image for Home' />


Save template and Visit your blog.


Popular Posts