Monday, April 14, 2014

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

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:

Other posts published:

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