Powered by Blogger.

Ads Top

Facebook

Popular Posts

Cat-1

Cat-2

Cat-3

Cat-4

» » » » Page Loading Effect for Blogger

Page Loading Effect for Blogger

Hi, I am here with a cool effect for blogger. The Page Loading Effect increases the beauty of your blog, And your blog design will look premium. 


To get this effect follow the steps below:


1. Go to blogger dashboard.

2.  Click on "Template" and select "Edit HTML".
3. Search for the tag  </body> by pressing Ctrl + F.
4. Add the code given below just above </body>.
5. Click "Save Template".


<style>
#techdio {
        position: fixed!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background:#000 url('http://3.bp.blogspot.com/-sW166HTPK4U/UY2kVNdjsFI/AAAAAAAAEHk/fIO-B-mOeCE/s200/load6.gif') no-repeat 50% 30%;
        color: #FFF;
        display: none;
        font: 0/0 a;
        text-shadow: none;
        padding: 1em 1.2em;
}
</style
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="techdio">Loading...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#techdio').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>

</script>
That's It, Now You can see the page loading effect on your blog.

If you want to change the loader image, select one from below and copy the link by Right-click--> Copy image URL, and replace the code in the highlighted area.

























If You Find This Tutorial Helpful

Please Support Us On Facebook @TechDio And Twitter @TechDioOfficial

Because Your Support Gives Us Encouragement.


If you have any doubts, please leave it in the comment box. I will try to answer it at the earliest.
«
Next
Newer Post
»
Previous
Older Post

No comments

Leave a Reply

Cat-5

Cat-6