Πως θα το εφαρμόσουμε στο blog μας
Από το αριστερό μενού του Blogger επιλέγουμε το [Θέμα] και στο αναπτυσσόμενο μενού [Προσαρμογή] επιλέγουμε [επεξεργασία HTML].
Κάνουμε μία φορά κλικ μέσα στο πλαίσιο του κώδικα έτσι ώστε να πάρει την εστίαση.
Με Ctrl + F μέσα στο πλαίσιο του κώδικα, αναζητούμε το </b:skin>
Ακριβώς επάνω από το ]]></b:skin> επικολλούμε το παρακάτω:
#loader{background-color:#000;position:absolute;top:0;left:0;width:100%;height:100%;z-index:10000}.circle-bottom-line,.circle-top-line{padding:0;width:100%;height:5px;display:block;z-index:100;position:relative}.circle-top-line{margin-top:60px;margin-bottom:-60px;-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;-webkit-box-shadow:0 2px 2px #000;-moz-box-shadow:0 2px 2px #000;box-shadow:0 2px 2px #000}.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:700;z-index:90;-webkit-border-radius:150px;-moz-border-radius:150px;border-radius:150px}.circle-inner{width:180px;height:180px;margin:0;padding:5px;-webkit-border-radius:150px;-moz-border-radius:150px;border-radius:150px}.circle{width:150px;height:150px;margin:5px;/*padding:5px;*/-webkit-border-radius:150px;-moz-border-radius:150px;border-radius:150px}.circle img{width:150px;height:150px}#tiempo{text-shadow:0 2px 2px #252525;color:#dadada}.circle-main{background:#eb4646;border:10px inset #a04141;-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;-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;-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}.circle-bottom-line,.circle-top-line{-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{-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{-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{-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}}
Δεύτερον: Βρείτε με Ctrl + F την ετικέτα <body> και ακριβώς από κάτω επικολλήστε αυτό:
<b:if cond='data:view.isHomepage'>
<div id='loader'>
<div class='circle-main'>
<div class='circle-inner'>
<div class='circle' id='time'>0 %</div>
</div>
</div>
</div>
</b:if>
Με τον παραπάνω κώδικα το εφέ φόρτωσης εμφανίζεται μόνο στην αρχική σελίδα του blog μας. Εάν θέλετε να εμφανίζεται σε όλες τις σελίδες αρκεί να αφαιρέσετε το
<b:if cond='data:view.isHomepage'> και το </b:if>
Τρίτον: Βρείτε με Ctrl + F το </body> και ακριβώς από επάνω επικολλήστε αυτό:
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js'/>
<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
start = 0;
end = 100;
$(window).ready(function(){
tmp = setInterval(countUp,5);
});
function countUp(){
start++;
time = $("#time");
time.html( start + "%");
if (start === end){
clearInterval(tmp);
p = $("#loader");
p.fadeOut('fast',function(){
$('body').append('');
});
}}
</script>
Επιλέξτε [Προεπισκόπηση προτύπου] και αν σας αρέσει το αποτέλεσμα,
πατήστε [Αποθήκευση προτύπου] και τελειώσατε.
