Jquery Preloader για γρήγορη φόρτωση του blog σας

Ένα όμορφο κολπάκι, όπου δείχνει στον αναγνώστης σας ότι το blog φορτώνει. Μετράει από το 1% έως το 100% και εμφανίζει το blog σας έτοιμο για ανάγνωση χωρίς να πρέπει να περιμένουμε πότε θα εμφανιστούν οι φωτογραφίες και τα widget σας.

Δείτε demo

Το script δουλεύει σε Firefox, Safari, Opera, Chrome, IE7, IE8. Στον IE6 δεν δουλεύει και απλά θα αγνοηθεί.

Εφαρμογή στο blog σας






Από το αριστερό μενού του Blogger επιλέγουμε το [Πρότυπο] και [επεξεργασία HTML].
Κάνουμε μία φορά κλικ μέσα στο πλαίσιο του κώδικα έτσι ώστε να πάρει την εστίαση.
Με Ctrl + F μέσα στο πλαίσιο του κώδικα, αναζητούμε το </head>

Ακριβώς από επάνω του επικολλούμε το παρακάτω:

<script class='cssdeck' src='//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js'/>  
 <style type='text/css'>/*<![CDATA[*//*===================  Basic structure===================*/#loader {  background-color: #000;  position:absolute;  top:0%;  left:0%; width:100%;  height:100%;  z-index:10000;}.circle-top-line,.circle-bottom-line{  padding:0;  width:100%;  height:5px;  display:block;  z-index:100;  position:relative;}.circle-top-line{  margin-top:60px;  margin-bottom:-60px;
  /*box-shadow*/  -webkit-box-shadow:0 2px 3px #111;     -moz-box-shadow:0 2px 3px #111;          box-shadow:0 2px 3px #111;}.circle-bottom-line{  margin-top:-58px;
  /*box-shadow*/  -webkit-box-shadow:0 2px 2px black;     -moz-box-shadow:0 2px 2px black;          box-shadow:0 2px 2px black;}.circle-line{  width:100%;  height:250px;  margin:60px auto;  padding:10px;}.circle-main{  width:200px;  height:200px;  margin:200px auto ;  display:block;  padding:15px;  text-align:center;  line-height:150px;  font-size:40px;  font-weight:bold;  z-index:90;
  /*border-radius*/  -webkit-border-radius:150px;     -moz-border-radius:150px;          border-radius:150px;}.circle-inner{  width:180px;  height:180px;  margin:0;  padding:5px;
  /*border-radius*/  -webkit-border-radius:150px;     -moz-border-radius:150px;          border-radius:150px;}.circle{  width:150px;  height:150px;  margin:5px;  padding:5px;
  /*border-radius*/  -webkit-border-radius:150px;     -moz-border-radius:150px;          border-radius:150px;}.circle img{  width:  150px;  height: 150px;}
/*===================  Basic colors===================*/#tiempo{  text-shadow:0 2px 2px #252525;  color:#DADADA;}.circle-main{  background:#EB4646;  border:10px inset #A04141;
  /*box-shadow*/  -webkit-box-shadow:0 1px 10px #490000,inset 0 0 5px 3px #942828;     -moz-box-shadow:0 1px 10px #490000,inset 0 0 5px 3px #942828;          box-shadow:0 1px 10px #490000,inset 0 0 5px 3px #942828;}.circle-inner{  background:#FC7979;  border:5px inset #D13030;
  /*box-shadow*/  -webkit-box-shadow:0 0 10px #750D0D,inset 0 0 2px 4px #AA3131;     -moz-box-shadow:0 0 10px #750D0D,inset 0 0 2px 4px #AA3131;          box-shadow:0 0 10px #750D0D,inset 0 0 2px 4px #AA3131;}.circle{  background:#DF7070;  border:5px inset #D52D2D;
  /*box-shadow*/  -webkit-box-shadow:0 2px 3px #D14242,inset 0 0 9px 3px #8D1B1B;     -moz-box-shadow:0 2px 3px #D14242,inset 0 0 9px 3px #8D1B1B;          box-shadow:0 2px 3px #D14242,inset 0 0 9px 3px #8D1B1B;}/*===================  Basic sequences===================*/.circle-top-line,.circle-bottom-line{  /*animation*/  -webkit-animation:circleLine 13s infinite ease-in-out;     -moz-animation:circleLine 13s infinite ease-in-out;      -ms-animation:circleLine 13s infinite ease-in-out;       -o-animation:circleLine 13s infinite ease-in-out;          animation:circleLine 13s infinite ease-in-out;}@-webkit-keyframes circleLine{  from{width:0;background-color:#DF7070;}  to{width:100%;background-color:#46BDEB;}}@-moz-keyframes circleLine{  from{width:0;background-color:#DF7070;}  to{width:100%;background-color:#46BDEB;}}@-ms-keyframes circleLine{  from{width:0;background-color:#DF7070;}  to{width:100%;background-color:#46BDEB;}}@-o-keyframes circleLine{  from{width:0;background-color:#DF7070;}  to{width:100%;background-color:#46BDEB;}}@keyframes circleLine{  from{width:0;background-color:#DF7070;}  to{width:100%;background-color:#46BDEB;}}
.circle-main{  /*animation*/  -webkit-animation:main 20s infinite ease-in-out;     -moz-animation:main 20s infinite ease-in-out;      -ms-animation:main 20s infinite ease-in-out;       -o-animation:main 20s infinite ease-in-out;          animation:main 20s infinite ease-in-out;}@-webkit-keyframes main{  0%{-webkit-transform: rotate(360deg);background:#DF7070;border-color:#8D1B1B;}  50% {background:#E9D925; border-color:#70C0DF;}  100%{background:#DF7070;border-color:#8D1B1B;}}@-moz-keyframes main{  0%{-webkit-transform: rotate(360deg);background:#DF7070;border-color:#8D1B1B;}  50% {background:#E9D925; border-color:#70C0DF;}  100%{background:#DF7070;border-color:#8D1B1B;}}@-ms-keyframes main{  0%{-webkit-transform: rotate(360deg);background:#DF7070;border-color:#8D1B1B;}  50% {background:#E9D925; border-color:#70C0DF;}  100%{background:#DF7070;border-color:#8D1B1B;}}@-o-keyframes main{  0%{-webkit-transform: rotate(360deg);background:#DF7070;border-color:#8D1B1B;}  50% {background:#E9D925; border-color:#70C0DF;}  100%{background:#DF7070;border-color:#8D1B1B;}}@keyframes main{  0%{-webkit-transform: rotate(360deg);background:#DF7070;border-color:#8D1B1B;}  50% {background:#E9D925; border-color:#70C0DF;}  100%{background:#DF7070;border-color:#8D1B1B;}}
.circle-inner{  /*animation*/  -webkit-animation:inner 15s infinite ease-in-out;     -moz-animation:inner 15s infinite ease-in-out;      -ms-animation:inner 15s infinite ease-in-out;       -o-animation:inner 15s infinite ease-in-out;          animation:inner 15s infinite ease-in-out;}@-webkit-keyframes inner{  0%{-webkit-transform: rotate(-360deg);background:#DF7070;border-color:#8D1B1B;}  50% {background:#70DF82;border-color:#E9D925;}  100%{background:#DF7070;border-color:#8D1B1B;}}@-moz-keyframes inner{  0%{-webkit-transform: rotate(-360deg);background:#DF7070;border-color:#8D1B1B;}  50% {background:#70DF82;border-color:#E9D925;}  100%{background:#DF7070;border-color:#8D1B1B;}}@-ms-keyframes inner{  0%{-webkit-transform: rotate(-360deg);background:#DF7070;border-color:#8D1B1B;}  50% {background:#70DF82;border-color:#E9D925;}  100%{background:#DF7070;border-color:#8D1B1B;}}@-o-keyframes inner{  0%{-webkit-transform: rotate(-360deg);background:#DF7070;border-color:#8D1B1B;}  50% {background:#70DF82;border-color:#E9D925;}  100%{background:#DF7070;border-color:#8D1B1B;}}@keyframes inner{  0%{-webkit-transform: rotate(-360deg);background:#DF7070;border-color:#8D1B1B;}  50% {background:#70DF82;border-color:#E9D925;}  100%{background:#DF7070;border-color:#8D1B1B;}}

.circle{  /*animation*/  -webkit-animation:circle 10s infinite ease-in-out;     -moz-animation:circle 10s infinite ease-in-out;      -ms-animation:circle 10s infinite ease-in-out;       -o-animation:circle 10s infinite ease-in-out;          animation:circle 10s infinite ease-in-out;}@-webkit-keyframes circle{  0%{-webkit-transform: rotate(360deg);border-color:#8D1B1B;}  50% {border-color:#70DF82; background:#70C0DF;}  100%{border-color:#8D1B1B; }}@-moz-keyframes circle{  0%{-webkit-transform: rotate(360deg);border-color:#8D1B1B;}  50% {border-color:#70DF82; background:#70C0DF;}  100%{border-color:#8D1B1B; }}@-ms-keyframes circle{  0%{-webkit-transform: rotate(360deg);border-color:#8D1B1B;}  50% {border-color:#70DF82; background:#70C0DF;}  100%{border-color:#8D1B1B; }}@-o-keyframes circle{  0%{-webkit-transform: rotate(360deg);border-color:#8D1B1B;}  50% {border-color:#70DF82; background:#70C0DF;}  100%{border-color:#8D1B1B; }}@keyframes circle{  0%{-webkit-transform: rotate(360deg);border-color:#8D1B1B;}  50% {border-color:#70DF82; background:#70C0DF;}  100%{border-color:#8D1B1B; }}    /*]]>*/</style>

Δεύτερον: Βρείτε με Ctrl + F την ετικέτα <body> και ακριβώς από κάτω επικολλήστε αυτό:

<div id='loader'>
 <div class='circle-main'>  <div class='circle-inner'>   <div class='circle' id='time'>0 %</div>  </div> </div>     </div>

Τρίτον: Βρείτε με Ctrl + F το </body> και ακριβώς από επάνω επικολλήστε αυτό:

<script type='text/javascript'>start = 0;end = 100;$(window).ready(function(){ tmp = setInterval(countUp,5);}); function countUp(){ start++; time = $(&quot;#time&quot;); time.html( start + &quot;%&quot;); if (start === end){  clearInterval(tmp);  p = $(&quot;#loader&quot;);  p.fadeOut(&#39;fast&#39;,function(){   $(&#39;body&#39;).append(&#39;&#39;);  }); }}      </script>

Επιλέξτε [Προεπισκόπηση προτύπου] και αν σας αρέσει πατήστε [Αποθήκευση προτύπου] και τελειώσατε.

[Πηγή: digitalhubinc.com ]

0 σχόλια:

Δικά μου

Larissakid

Χρησιμοποιώ