Baca juga

Stylish Css3 Preloader For Blogger

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.

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.

That is the discussion about Stylish Css3 Preloader For Blogger

Thank you for visiting the article Stylish Css3 Preloader For Blogger hopefully always provide useful information, see you in another article.

the article you are reading is about Stylish Css3 Preloader For Blogger with the link as follows https://www.booknagar.com/2015/03/stylish-css3-preloader-for-blogger.html

How to gain organic keyword or traffic from Google Search Engine manually. There is a lot of competitors in the internet business th...

Tag: how to create a free blog, how to create a website, how to create a blog website, how to create a blog for free, how to make a blog, wordpress, how to create a wordpress blog, how to create a blog page, how to start a blog, blogger, how to create a blog in wordpress, how to create a blog account, how to create a blog on wordpress, how to create a blog and make money, how to create a blog in google, how to create a successful blog