Stylish Css3 Preloader For Blogger
Hello there! I am dorsum amongst a novel gadget for your blog. It volition brand your weblog to a greater extent than impressive together with fashionable thus if yous bring tried many fashionable together with impressive themes inwards your weblog but withal couldn't attain your finish of achieving the most impressive blueprint together with withal seeking for something that volition stone your weblog thus yous are absolutely at correct place. I don't mean value its a gadget but I telephone telephone it a gadget equally it is added from other blog(out of your blog). Its a preloader. Don't know what a preloader is? allow me say you, similar its name(pre) it loads earlier your blogs content, merely similar a loading ikon but it is designed amongst CSS3 together with javascript. It makes your weblog await to a greater extent than impressive yous tin run across a demo of preloader here. I promise yous similar it. Give me your feedback past times leaving a comment below.
Features:
- Very impressive together with fashionable look!
- Loads faster together with doesn't impact weblog speed.
- Minified javascript together with CSS codes are used.
- Easy to install(2 minuted integration).
- Free of terms together with customizable.
Its real piece of cake to add together preloader inwards your blog. In the starting fourth dimension the java/css codes were likewise long together with it could brand your weblog slow, thus I bring hosted these codes on Google campaign together with reduced the size of code thus yous tin add together this preloader inwards your weblog inwards merely a few steps together with it won't impact your weblog speed. To add together this pre-loader inwards your weblog follow below steps:
Step 1: Go to blogger dashboard together with 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 together with glue 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 i of the below code,according to your needs together with glue it merely inwards a higher identify </header>:
To present Preloader on every page of your blog(it volition present upwards fifty-fifty if some i 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 alone 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 alone inwards 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 alone inwards 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 cover or present 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 yous desire to cover preloader.
Step 7: Click on salve together with yous are done!
Read to a greater extent than nearly hiding or showing gadgets inwards specific pages inwards blogger here.
Customization:
You tin customize this gadget past times making changes inwards the css code, yous tin alter the color of moving coils together with also background color but I volition present yous alone how to suit fourth dimension of this preloader according to your blog. The default fourth dimension is seven seconds yous tin increase or decrease it past times making changes inwards highlighted percentage of code inwards measuring publish 4( 7000 ). If yous bring whatsoever query nearly customizing this preloader yous tin inquire me inwards comments.
If yous bring whatsoever occupation related to this postal service or yous bring whatsoever suggestions experience costless to contact me or inquire me inwards comments. Follow together with subscribe to teach latest tidings nearly blogger gadgets.
Search Tags: Preloader for blogger,Stylish CSS3 preloader for blogger,Stylish blogger template,101helper blogger gadgets,Impressive blogger gadgets, Impressive blogger themes.
Belum ada Komentar untuk "Stylish Css3 Preloader For Blogger"
Posting Komentar