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

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.

Şimdi blogger preloader eklentisinin renkli ve animasyonlu olan farklı bir önyükleme ekranı hakkında bilgiler paylaşıyoruz.

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>

ÖNİZLEME

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.