Fading Box With Newer/Older Posts Links and Titles for Blogger

Navigation links are the links that appear at the bottom of the page labeled "Old Posts", "New Posts" and "Home" and help us navigate through blog posts. This tutorial shows how to change the words "Old Posts" and "New Posts" for post titles and have them appear in the fade box as you scroll down the page.

You can see it in action on this demo blog . As you scroll down, navigation links will appear showing the titles of the old and newer posts.

This way of displaying navigation links will only be visible on individual posts, while links to the home page and other parts of the blog will display as usual.

How to add a navigation block in Blogger with new and old posts

Step 1 – In the Blogger control panel, go to Template > Edit HTML , click anywhere in the code area, and using CTRL+F, find this line:

Screenshot:

Step 2: REPLACE the above code with:

Other published articles:

Note: You can replace the title " Other Posts " with your own title.

Step 3: Now add some more height the following code:

Please note that this widget uses jQuery, so try to have only one version.

personalization

- There are three URLs highlighted in blue, the first one is the box poster background image, the other two are the arrow icons. You can replace them with your own.
- The green color shows where to change the color of the text.
- The red number is the distance in pixels that the tool is activated, which means that the window will appear when you scroll 100 pixels down. You may want to use a higher value if your posts tend to be long and therefore the scroll "height" is higher.
Step 4: Now save the template and you're done.

You can also edit the Old Posts and New Posts links to insert titles or images .