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.
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.
Step 2: Click on Edit Html.
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>:
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.
Comments
Post a Comment