Helplogger
Home
Blog DesignWidgets SEO Menus Po ...
Fading Box With Newer/Older Posts Links and Titles for Blogger
3 comments
The navigation links are those that appear at the bottom of the page that says "Older Posts", "Newer Posts" and "Home" and help us to move through the blog posts. This tutorial will show you how to change the word "Older Posts" and "Newer Posts" for post titles and make these to appear in a box "fading" when you scroll down the page.
You can see it in action on this demo blog- when you scroll down, the navigation links will appear showing the post titles for the older/newer entries.
This way to display the navigation links will be seen only in individual entries, while those on the homepage and other parts of the blog will still be displayed as usual.
How to Add Navigation Box with Newer & Older Posts on BloggerStep 1.From your Blogger Dashboard, go toTemplate>Edit HTML, click anywhere inside the code area and search - using CTRL + F - for this line:
Screenshot:
Step 2.REPLACE the code above with this one:
Note: you can change the "Other posts published" title with your own
Step 3.Now add just abovethe following code:
Note that this gadget uses jQuery, so try to have only one version.
Customization:
- There are three URLs in blue, the first is the paper background image for the box, the other two are the icons that correspond to the arrows. You can replace these with your own.
- In green you can see where to change the text colors.
- The red number is the distance in pixels that activates the gadget, this means that the box will appear when you scroll down the 100px. You can use a higher value if your posts are usually long and therefore the "height" of the scroll is greater.
Step 4.Now, Save the Template and that's it!
You can also change the "Older Posts" and "Newer Posts" links with posts titlesor images.
Like
5
Random Posts
CSS3 Transition Property Basics23/02/2014 - 4 Comments
How to create Google Adsense Account10/03/2012 - 31 Comments
Numbered comments on threaded comments for Blogger/Blogspot02/06/2012 - 56 Comments
Related Posts:
Add A CSS Animated Share Button on ...
Orbit - jQuery Image Slider Plugin ...
How to Add Numbered Page Navigation...
Add a Custom jQuery Lightbox To Blo...
How to Add CSS code To Blogger usin...
3 comments:
Mohammad Yaseen M.Y.B 5/25/2013
oh this great budy, good work surely gone use it, will it effect on loading or not?
Reply
Yvonne 11/22/2013
This is fantastic! Thanks for your advice, but can you think of an option to click away the box if it is not needed! ;-)
Reply
Poky 1/09/2014
It looks old fashioned , can you post a creative one that looks cool. 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,784 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
irsah imihar
Customizing will always be easy with jquery and javascript. Even...
Missy G
Yay! Thank you for making this so easy! This is just what I...
divakar sivashankar
admin i have a problem even if i add the tag the ad is showing up...
Anonymous
I don't understand the instructions you have given :(
Nanette Benablo
your site is very helpful and easy to follow tutorials. thank you...
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
5
Like
No comments:
Post a Comment