How To Create Effect Loader Like A Arlina Design

Ever see right? when you open a blog, will appear a loading on the blog? however many blogs loader version that can be used there are several loaders using jquery or do not

This time I'll give you how to create a loader on the blog, but we just use a little jquery, so not too burdensome blog, this loader is similar to his blog arlina design, many are asking how to create effects such as blogs Arlina loading design? follow the tutorial below

How to create a similar effect loader Arlina design

1. Login to blogger > template > edit HTML

2. find the code </ style> put this code in the above code before

.cssload-loader{position:absolute;bottom:0;left:0;right:0;margin:auto;z-index:1000}
myloader [role="progressbar"][aria-busy="true"]{position:absolute;top:0;left:0;padding-bottom:3px;width:100%;background-color:#159756;-webkit-animation:preloader-background linear 3.5s infinite;animation:preloader-background linear 3.5s infinite}
myloader [role="progressbar"][aria-busy="true"]::before,myloader [role="progressbar"][aria-busy="true"]::after{display:block;position:absolute;top:0;z-index:2;width:0;height:3px;background:#afa;-webkit-animation:preloader-front linear 3.5s infinite;animation:preloader-front linear 3.5s infinite;content:''}
myloader [role="progressbar"][aria-busy="true"]::before{right:50%}
myloader [role="progressbar"][aria-busy="true"]::after{left:50%}
@-webkit-keyframes preloader-background{0%,24.9%{background-color:#159756}25%,49.9%{background-color:#da4733}50%,74.9%{background-color:#3b78e7}75%,100%{background-color:#fdba2c}}
@keyframes preloader-background{0%,24.9%{background-color:#159756}25%,49.9%{background-color:#da4733}50%,74.9%{background-color:#3b78e7}75%,100%{background-color:#fdba2c}}
@-webkit-keyframes preloader-front{0%{width:0;background-color:#da4733}24.9%{width:50%;background-color:#da4733}25%{width:0;background-color:#3b78e7}49.9%{width:50%;background-color:#3b78e7}50%{width:0;background-color:#fdba2c}74.9%{width:50%;background-color:#fdba2c}75%{width:0%;background-color:#159756}100%{width:50%;background-color:#159756}}
@keyframes preloader-front{0%{width:0;background-color:#da4733}24.9%{width:50%;background-color:#da4733}25%{width:0;background-color:#3b78e7}49.9%{width:50%;background-color:#3b78e7}50%{width:0;background-color:#fdba2c}74.9%{width:50%;background-color:#fdba2c}75%{width:0%;background-color:#159756}100%{width:50%;background-color:#159756}}

3. then look again the code <body> place the following code under the code before

<div class='cssload-loader' id='loader'><myloader>
<div aria-busy='true' aria-label='Loading, please wait.' role='progressbar'></div>
</myloader></div>
<div class='page-loader' id='pagingx'></div>

the above code in place in the free anywhere

4. find the code </ body> put the following code above the code before

<script type='text/javascript'>
//<![CDATA[
// Loader
$(document).ready(function(){$("body").removeClass("page-isload"),$("#pagingx").fadeOut(8000),$("#loader").fadeOut(8000)});
//]]>
</script>

save the template and see the results
the rest can be your own creations

thanks

How To Put a Banner Ads On The Right And Left Floating Blog

To increase revenue right click your ad, his usual no ads put it in the post, or create its ads with the effect of sticky so that when in its ad scrool remain visible, it is a matter of course, how his ad we created floated? so wherever remain visible, if a visitor could feel disturbed at the click close at his side? it's easy, right?

advertising that we will make this drift is not just one, but two ads that float on the left and right side of the blog

see the example below

how to use it, follow the tutorial below

How to put a banner ad on the right and left floating blog

1. Log in to Blogger> Then click Layout> Create new widget> Then copy the code below in it

<style scoped='' type="text/css">
#iklankirikanan{position:fixed;_position:absolute;top:0;right:0;width:160px;clip:inherit;_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth)}
</style>
<script type="text/javascript">
function get_cookie(Name){var search=Name+"="var returnvalue="";if(document.cookie.length>0){offset=document.cookie.indexOf(search)if(offset!=-1){offset+=search.length end=document.cookie.indexOf(";",offset);if(end==-1)end=document.cookie.length;returnvalue=unescape(document.cookie.substring(offset,end))}}return returnvalue}function close1(){if(persistclose)document.cookie="remainclosed=1"document.getElementById("iklankirikanan").style.visibility="hidden"}if(window.addEventListener)window.addEventListener("load",staticbar,false)else if(window.attachEvent)window.attachEvent("onload",staticbar)else if(document.getElementById)window.onload=staticbar
</script>
<br />
<div class="clear">
</div>
<div id="iklankirikanan">
<div style="text-align: right;">
<a href="" onclick="close1(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj2qwCnd5Vv4gI96AFt3nSO4aA8qlpHELAiW8ToNC3zas2Kc7ZYAXhUhifxe7nR5fncSOJo1PaspIud4tWMsQmxDrAIAidRHLKLLSun2k1Z6mGmxt0laAoBMjax8YhbJI-eBYgZXvH_hvs/s1600/close-btn.png" /></a></div>
<div onclick='close1()'>
<div style="background: #fff;">
<a target="_blank" href="this link"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijXUQc8uv4Oja0jISDTn5okf2B6xzCNSlIR1B8cLXJFSF5sqKblQHYlUTgyywBuz5ZqeQNcCZpIMQLogchFKxGufnGba-znL2t8-YqNniPqFhXveAJ2VGWkW4yVCmd6jwHLSEZQ-S7QNSr/s1600/ban-melayang.gif" style="border: none;" alt="Iklan Melayang" /></a></div>
</div></div>
<style scoped='' type="text/css">
#iklankirikanan1{position:fixed;_position:absolute;top:0;left:0;width:160px;clip:inherit;_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth)}
</style>
<script type="text/javascript">
function get_cookie(Name){var search=Name+"="var returnvalue="";if(document.cookie.length>0){offset=document.cookie.indexOf(search)if(offset!=-1){offset+=search.length end=document.cookie.indexOf(";",offset);if(end==-1)end=document.cookie.length;returnvalue=unescape(document.cookie.substring(offset,end))}}return returnvalue}function close11(){if(persistclose)document.cookie="remainclosed=1"document.getElementById("iklankirikanan1").style.visibility="hidden"}if(window.addEventListener)window.addEventListener("load",staticbar,false)else if(window.attachEvent)window.attachEvent("onload",staticbar)else if(document.getElementById)window.onload=staticbar
</script>
<br />
<div class="clear">
</div>
<div id="iklankirikanan1">
<div style="text-align: left;">
<a href="" onclick="close11(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj2qwCnd5Vv4gI96AFt3nSO4aA8qlpHELAiW8ToNC3zas2Kc7ZYAXhUhifxe7nR5fncSOJo1PaspIud4tWMsQmxDrAIAidRHLKLLSun2k1Z6mGmxt0laAoBMjax8YhbJI-eBYgZXvH_hvs/s1600/close-btn.png" /></a></div>
<div onclick='close11()'>
<div style="background: #fff;"><a target="_blank" href="this link"><img style="border: none;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijXUQc8uv4Oja0jISDTn5okf2B6xzCNSlIR1B8cLXJFSF5sqKblQHYlUTgyywBuz5ZqeQNcCZpIMQLogchFKxGufnGba-znL2t8-YqNniPqFhXveAJ2VGWkW4yVCmd6jwHLSEZQ-S7QNSr/s1600/ban-melayang.gif" width="160" height="600"/></a><p></p></div></div></div>

instead of the code marked with a description of your blog

2. save the template

• DEMO

much for it

Hover Effect On Image

you'd never see the blog, when his picture in a hover / cursor point, the image will turn into a black and white effect, or darkening. How come? because the blog is already applying these effects, there are some effects that I share this time, you can select as needed

To apply this effect is very easy. Please enter the following CSS and adjust to the needs of your blog. If it is determined please login to blogger> templates> edit HTML and CSS to add her to the field of image you want given effect

The following examples for each CSS hover effects on the image:

#efek-gambar a img:hover { -webkit-filter:none; /*Returns to default*/; }
#efek-gambar a img.brightness:hover { -webkit-filter:brightness(0); }
.blur { -webkit-filter:blur(3px); }
.contrast { -webkit-filter:contrast(160%); }
.grayscale { -webkit-filter:grayscale(100%); }
.huerotate { -webkit-filter:hue-rotate(180deg); }
.invert { -webkit-filter:invert(100%); }
.opacity { -webkit-filter:opacity(50%); }
.saturate { -webkit-filter:saturate(3); }
.sepia { -webkit-filter:sepia(100%); }
.brightness { -webkit-filter:brightness(0.25); }

Examples of its application:

<div id="efek-gambar">
<img class="blur" src="Here your image link" />
</div>

examples of his results:

Blur

Contrast

Grayscale

Huerotate

Invert

Opacity

Saturate

Sepia

Brightness

Similarly, this time blogger tutorial on the various hover effect on the image. May be useful for your blog.

http://www.seocips.com/2015/11/9-efek-hover-sederhana-pada-gambar-di-blogspot.html