Fade In/Out Page Loading Effect On Blogger Posts alphause

Helplogger Home Blog DesignWidgets SEO Menus Po ... Fade In/Out Page Loading Effect On Blogger Posts 7 comments A very common effect in jQuery is the fade effect that hides or shows an element by fading it, and we can use it in many ways as for example in the blog's navigation. The following script does just that, by loading the page with a fading effect when we browse on internal links that are in the blog, such as post titles, labels links, archive, navigation links, etc.. You can see an example in this demo blog, click on the title of any post and see the fading effect when the page is loading. How To Implement the Fade In Loading Effect1) To put this fading effect on your blog, go to yourTemplate>Edit HTML: 2) Click anywhere inside the code area and search for thetag using CTRL + F keys: 3) Then, just aboveadd the following code: 4) Save the changes and that's it. In green you can see where to change the color that fades on a loading page. The original script hides the body of the page while loading, I prefer to change that property with a negative z-index to avoid problems with the search engine robots that may effect the positioning. Problems? Consider that such effects could increase the blog loading time, so I recommend using it only when your blog loads fast and does not have too many scripts. If you already use another version of jQuery remove the other, leaving only this which will be readed first. If you are using Mootools or Scriptaculous, then you have to make some modifications to the code in order to be compatible. If you have another script with a fade effect, then it could interfere with this and you might not see anything on the page except the color fading, in such cases it is better without this script. You can also use this effect only on some links, for example, if you want to appear only when you click on the post titles in the navigation links (older posts and newer posts), and on the top tabs, then replace this line: $("a").click(function(event){With this: $(".post-title a, .blog-pager-older-link, .blog-pager-newer-link, .tabs").click(function(event){In some cases, the page can load for a second and then load with the fade effect, this may be "normal" because the browser is slow to read the script on page load. Apart from these drawbacks, I think it's a very elegant way to load blog pages while browsing them, don't you think? Like 10 Random Posts Add Author's Profile Picture and Name in Multi Author Blog22/02/2014 - 2 Comments How to Add A Comment Count Bubble To Blogger Post Titles16/04/2012 - 60 Comments Simple Recent Posts Widget for Blogger/Blogspot28/04/2012 - 156 Comments Related Posts: How to Add Numbered Page Navigation... Add a Custom jQuery Lightbox To Blo... How to Add CSS code To Blogger usin... How to add custom Variable definiti... Understanding the Page Elements of ... 7 comments: matpila 6/02/2013 Awesome! Reply Ic Creem 6/04/2013 wow! another nice trick sir! you really in the tick on blogging Reply Web Money Tips 6/19/2013 Can you do this with domains hosted on blogger? Reply Silent Reader 6/21/2013 Thank you so much!! xx Reply بلوجر 7/27/2013 Thanks a lot bro :) Reply phim hay 8/29/2013 Thanks, it's nice trick Reply Petru Dolhescu 2/16/2014 This script disables the default lightbox effect for images. Is there a way to keep active lightbox effect and also use this fade in effect? 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,785 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 10 Like