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

Bir blog sitesi tasarlıyorsanız veya blog sitesi kullanıcısı iseniz, blog sayfalarınızın yüklenmesi ve sayfalar arası geçiş süreleri arasına özel yüklenme ekranı ekleyerek blogunuzun kalitesini artırabilirsiniz.

Dürüst olmak gerekirse, bir blog veya web site sayfaları için her şeyi optimize ettiğinizde bile oldukça hantal hale gelebilir.

Kullanıcılarınızın hayal kırıklığını azaltmak için bir seçenek olarak, güzel bir özel önyükleyici ekranı eklemektir.

Bu yazıda, önceden oluşturulan CSS3 önyükleyicimize CSS3 geçişleri ekleyerek blogger sitelerinde kullanılması için hazır hale getirdik.

Sayfanın içeriği yüklendikten sonra, önyükleme ekranını güzel bir geçişle birlikte görüntüleme aracının dışına hareketlendiriyoruz.

Önyükleme hakkında kısa bilgiler

• CSS3 geçişleri nasıl kullanılır?
• Tam ekran önyükleyiciyi nasıl canlandırır?
• Bu teknik için CSS3'ü JavaScript ile nasıl birleştiririm?

Tüm bu soruları cevaplamak için, Blogger hesabınız ile oturum açın ve aşağıdaki adımları takip edin.

Blogger Özel Önyükleme Ekranı Nasıl Oluşturulur?

1. Blogger sitenizde blogunuzun kumanda panelinden Şablon > HTML'yi Düzenle yolunu takip ederek şablon kodları sayfasını açın.
Bilgi: Index.html'de beyaz arka planda bir CSS3 önyükleyici #loader var, ancak ön yükleme ekranı ve içerik arasında yüksek bir kontrast yaratmak istiyoruz. Bunun için #loader-wrapper önyükleme ekranının çalışması için üç parçasını şablon kodları arasına eklemeniz gerekir.

2. Şimdi @keyframes dönüş bildirimi için main.css'e bazı CSS kodları ekleyeceğiz. Bloguzun şablon kodları sayfasında CTRL+F yardıyla </head> kodunu bulun ve aşağıdaki CSS kod grubunu </head> kodunun bir satır üzerine ekleyi.

<style>
#layout #loader-wrapper {display: none;}
#loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000}
#loader{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:#3498db;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite;z-index:1001}
#loader:before{content:&quot;&quot;;position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:#e74c3c;-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite}
#loader:after{content:&quot;&quot;;position:absolute;top:15px;left:15px;right:15px;bottom:15px;border-radius:50%;border:3px solid transparent;border-top-color:#f9c922;-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}
@-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)}}
#loader-wrapper .loader-section{position:fixed;top:0;width:51%;height:100%;background:#fff;z-index:1000}
#loader-wrapper .loader-section.section-left{left:0}
#loader-wrapper .loader-section.section-right{right:0}
.loaded #loader-wrapper .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.000);transition:all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000)}
.loaded #loader-wrapper .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.000);transition:all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000)}
.loaded #loader{opacity:0;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out}
.loaded #loader-wrapper{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}
</style>

Bu, tam ekran karanlık bir kaplama oluşturur, ancak maalesef aynı zamanda dönen #loader de kapsar ve sayfa başlığını okumasını zorlaştırır. Bu durumun blogunuza olumsuz herhangi bir sorun çıkarmaz.

#loader z-index'sini koyu renkli kaplamamızın üzerine getirmek ve başlığımızın rengini açık griye çevirmek için çimdiklemeniz gerekecek. Stil sayfasında yada yukarıdaki CSS kodları arasına #loader'ı bulun ve aşağıdaki stili ekleyin, ayrıca h1 stilini varsayılan p stillerinin hemen altına ekleyin.

#loader {
    z-index: 1001;
}
h1 {
    color: #eee;
}

Güzel, bu çok daha iyi görünüyor.

3. CSS3 animasyonlarını ve geçişlerini sağlanması için, aşağıdaki javaScript kodlarını </head> kodunun bir satır üzerine ekleyin.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
    //<![CDATA[
$(document).ready(function() {
 
    setTimeout(function(){
        $('body').addClass('loaded');
        $('h1').css('color','#333');
    }, 3000);
 
});
    //]]>
</script>

JavaScript yok, endişelenmeye gerek yok;
JavaScript'in açık olmasa bile içeriğimize hâlâ erişilebilir olmasını sağlamak için .no-js geri dönüşünü de dahil edebiliriz.

.no-js #loader-wrapper {
    display: none;
}
.no-js h1 {
    color: #222;
}

4. Son olarak önyükleme ekranının görünümünü sağlayan aşağıdaki HTML kodları da blogunuzun <body> kodunun hemen altına ekleyin ve şablonu kaydedin.

<div id='loader-wrapper'>
<div id='loader'/>
<div class='loader-section section-left'/>
<div class='loader-section section-right'/>
</div>

Örnek: Yukarıdaki HTML kodu aşağıdaki örnek HTML koda uygun alarak blogunuza ekleyin.

</head>
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
<div id='loader-wrapper'>
<div id='loader'/>
<div class='loader-section section-left'/>
<div class='loader-section section-right'/>
</div>

Ve hepsi bu, yapmışsınız!

CSS3 animasyonlarını ve geçişlerini kullanarak güzel bir animasyonlu ön yükleme ekranı oluşturdunuz.