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->Theme and 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'/>Step 5: Search for </header>.
<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 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'/>To Show Preloader only on Homepage:
<div class='loader-section section-left'/> <div class='loader-section section-right'/>
</div> </div>
</body>
<b:if cond='data:blog.url == data:blog.homepageUrl'><body class='demo'><div id='demo-content'><div id='loader-wrapper'> <div id='loader'/>To Show Preloader only in posts:
<div class='loader-section section-left'/> <div class='loader-section section-right'/>
</div> </div> </body></b:if>
<b:if cond='data:blog.pageType == "item"'><body class='demo'><div id='demo-content'><div id='loader-wrapper'> <div id='loader'/>To Show Preloader only in pages(contact,about,sitemap):
<div class='loader-section section-left'/> <div class='loader-section section-right'/>
</div> </div> </body></b:if>
<b:if cond='data:blog.pageType == "static_page"'><body class='demo'><div id='demo-content'><div id='loader-wrapper'> <div id='loader'/>To hide or show preloader on specific pages:
<div class='loader-section section-left'/> <div class='loader-section section-right'/>
</div> </div> </body></b:if>
<b:if cond='data:blog.url != "Link of page"'><body class='demo'><div id='demo-content'><div id='loader-wrapper'> <div id='loader'/>Replace Link of page with the link of the page on which you want to hide preloader.
<div class='loader-section section-left'/> <div class='loader-section section-right'/>
</div> </div> </body></b:if>
Step 7: Click on save and you are done!
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 ).
Sharing Is Caring! Share if you like :)
No comments:
Post a Comment