X Close
T Monday, March 30, 2015

Stylish Css3 Preloader For Blogger

fahim raza 4 Comments so far
Stylish CSS3 preloader for blogger | 101helper

Hello there! I am back with a new gadget for your blog. It will make your blog more impressive and stylish so if you have tried many stylish and impressive themes in your blog but still couldn't reach your goal of achieving the most impressive design and still seeking for something that will rock your blog then you are absolutely at right place. I don't think its a gadget but I call it a gadget as it is added from other blog(out of your blog). Its a preloader. Don't know what a preloader is? let me tell you, like its name(pre) it loads before your blogs content, just like a loading image but it is designed with CSS3 and javascript. It makes your blog look more impressive you can see a demo of preloader here. I hope you like it. Give me your feedback by leaving a comment below.


Features:
  • Very impressive and stylish look!
  • Loads faster and doesn't affect blog speed.
  • Minified javascript and CSS codes are used.
  • Easy to install(2 minuted integration).
  • Free of cost and customizable.
How to add stylish Preloader in blogger blog: 

Its very easy to add preloader in your blog. In the beginning the java/css codes were too long and it could make your blog slow, so I have hosted these codes on Google drive and reduced the size of code so you can add this preloader in your blog in just a few steps and it won't affect your blog speed. To add this pre-loader in your blog follow below steps:


Step 1: Go to blogger dashboard and switch to template page.



How to add stylish Preloader in blogger blog | 101helper

Step 2: Click on Edit Html.



Stylish gadgets for blogger | 101helper

Step 3: Search for <head> by using Ctrl+F on your keyboard.


Step 4: Copy below codes and paste it below <head>.


  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link href="https://rawgit.com/fahimraza/FK/master/preloader1.css" rel='stylesheet'/>

<link href="https://rawgit.com/fahimraza/FK/master/preloader2.css" rel='stylesheet'/>
<script src="https://rawgit.com/fahimraza/FK/master/preloader1.js"/>
<script src="https://rawgit.com/fahimraza/FK/master/preloader2.js"/>
<script>$(document).ready(function() {

setTimeout(function(){
$('body').addClass('loaded');
$('h1').css('color','#222222');
},  7000 );

});</script>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>

Step 5: Search for </header>.


Step 6: Copy one of the below code,according to your needs and paste it just above </header>:



how to add codes in blogger template | 101helper

To show Preloader on every page of your blog(it will show up even if some one search something using search box):

<body class='demo'>

<div id='demo-content'>
<div id='loader-wrapper'>
<div id='loader'/>

<div class='loader-section section-left'/>

            <div class='loader-section section-right'/>

</div>

    </div>

    </body>

To Show Preloader only on Homepage:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<body class='demo'>
<div id='demo-content'>
<div id='loader-wrapper'>
<div id='loader'/>

<div class='loader-section section-left'/>
            <div class='loader-section section-right'/>

</div>
    </div>
    </body>
</b:if>

To Show Preloader only in posts:

<b:if cond='data:blog.pageType == "item"'>
<body class='demo'>
<div id='demo-content'>
<div id='loader-wrapper'>
<div id='loader'/>

<div class='loader-section section-left'/>
            <div class='loader-section section-right'/>

</div>
    </div>
    </body>
</b:if>

To Show Preloader only in pages(contact,about,sitemap):

<b:if cond='data:blog.pageType == "static_page"'>
<body class='demo'>
<div id='demo-content'>
<div id='loader-wrapper'>
<div id='loader'/>

<div class='loader-section section-left'/>
            <div class='loader-section section-right'/>

</div>
    </div>
    </body>
</b:if>

To hide or show preloader on specific pages:

<b:if cond='data:blog.url != "Link of page"'>
<body class='demo'>
<div id='demo-content'>
<div id='loader-wrapper'>
<div id='loader'/>

<div class='loader-section section-left'/>
            <div class='loader-section section-right'/>

</div>
    </div>
    </body>
</b:if>

Replace Link of page with the link of the page on which you want to hide preloader.

Step 7: Click on save and you are done!

Read more about hiding or showing gadgets in specific pages in blogger here.

Customization:

You can customize this gadget by making changes in the css code, you can change the color of moving coils and also background color but I will show you only how to adjust time of this preloader according to your blog. The default time is 7 seconds you can increase or decrease it by making changes in highlighted part of code in step number 4( 7000 ). If you have any question about customizing this preloader you can ask me in comments.


If you have any problem related to this post or you have any suggestions feel free to contact me or ask me in comments. Follow and subscribe to get latest news about blogger gadgets.


Search Tags: Preloader for blogger,Stylish CSS3 preloader for blogger,Stylish blogger template,101helper blogger gadgets,Impressive blogger gadgets, Impressive blogger themes.


4 comments :

  1. I have pasted the second code before ending of head tag but it showed me "body should not appear inside of head". What can I do now?

    ReplyDelete
  2. Don't paste it before head paste it before header

    ReplyDelete
  3. I want to reduce the loading time for it

    ReplyDelete
    Replies
    1. Its already optimized for fast loading, you can't make it faster than it is.

      Delete