Blogger Özel Önyükleme Ekranı Oluşturma 2

Arlina Design: Blogger Özel Önyükleme Ekranı Oluşturma 2 13.12.16
Preloader

Blogger Özel Önyükleme Ekranı Oluşturma 2 - Blogunuz açılışında ve sayfalar arası geçişlerinde bir efekt görünümü vermektedir. Bunu neden yaptığımızı;

Bakınız: "Blogger Özel Önyükleme Ekranı Oluşturma" bir önceki yazımızda bu konu hakkında daha geniş bilgiler paylaşmıştık.

Blogger Özel Önyükleme Ekranı Oluşturma 2 Kurulumu


1. Blogger hesabınızla ile otum açın ve blogunuzun kumanda panelinde Şablon > HTML'i Düzenle yolunu takip ederek blogunuzun şablon kodlarının bulunduğu sayfayı açın. Öncelik aşağıdaki CSS kodları eklemek için şablon kodları sayfasında CTRL+F yardımıyla </head> kodunu bulun ve aşağdaki CSS kodlarını </head> kodunun bir satır üzerine ekleyin.

<style type='text/css'>
#preloader-show{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000}
#loader{display:block;position:relative;left:45%;top:50%;width:200px;height:200px;margin:-50px 0 0 -50px;border-radius:50%;border:20px solid transparent;border-top-color:#ea1414;-webkit-animation:spin 2s ease infinite;animation:spin 2s ease infinite;z-index:1001}
#loader2{display:block;position:relative;left:20%;top:20%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:30px solid transparent;border-top-color:#8840da;-webkit-animation:spin 1s ease infinite;animation:spin 1s ease infinite;z-index:1001}
#loader2:before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:1px solid transparent;border-top-color:#316fcb;-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}
#loader:before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:40px solid transparent;border-top-color:#31d36e;-webkit-animation:spin 3s ease-in infinite;animation:spin 3s ease-in infinite}
#loader:after{content:"";position:absolute;top:15px;left:15px;right:15px;bottom:15px;border-radius:50%;border:50px solid transparent;border-top-color:#ffc600;-webkit-animation:spin 5s ease-out infinite;animation:spin 5s ease-out infinite}
#preloader-show .loader-section{position:fixed;top:0;width:51%;height:100%;background:#222;z-index:1000;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
#preloader-show .loader-section.section-left{left:0}
#preloader-show .loader-section.section-right{right:0}
.loaded #preloader-show .loader-section.section-left{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1);transition:all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1)}
.loaded #preloader-show .loader-section.section-right{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);-webkit-transition:all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1);transition:all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1)}
.loaded #loader{opacity:0;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out}
.loaded #preloader-show{visibility:hidden;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:all 0.3s 1s ease-out;transition:all 0.3s 1s ease-out}
.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}
@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}
@keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}
@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,100%{-webkit-animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}0%{opacity:0;-webkit-transform:scale3d(0.3,0.3,0.3);transform:scale3d(0.3,0.3,0.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(0.9,0.9,0.9);transform:scale3d(0.9,0.9,0.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(0.97,0.97,0.97);transform:scale3d(0.97,0.97,0.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
@keyframes bounceIn{0%,20%,40%,60%,80%,100%{-webkit-animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}0%{opacity:0;-webkit-transform:scale3d(0.3,0.3,0.3);transform:scale3d(0.3,0.3,0.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(0.9,0.9,0.9);transform:scale3d(0.9,0.9,0.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(0.97,0.97,0.97);transform:scale3d(0.97,0.97,0.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
</style>

2. Yine </head> kodunun hemen bir satır üzerine yukarıdaki css-loader kodlarının hemen altına aşağıdaki jQuery kodunu ekleyin.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    setTimeout(function(){
        $('body').addClass('loaded');
        $('h1').css('color','#222');
    }, 2000);
});
//]]>
</script>

3. Önyükleme Ekranının çalışması için aşağıdaki HTML kodu blogunuzun <body> kodunun hemen altına ekleyin.

<div id="preloader-show">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>


Yukarıdaki HTML kodu da ekledikten sonra şablonu kaydedin ve önyükleme sayfa eklentisini kontrol etmek için, blogunuzun anasayfasını açın ve klavye tuşlarından F5 yada CTRL+F5 tuşlarına basın ve nasıl çalıştığını kontrol edin. Yayınlarımız hakkında görüşlerinizi bizimle paylaşmak için lütfen bir yorum bırakın.

Yorum Gönder