Cara Memasang/Mengubah Loading Page Dengan CSS

Semua-Niche|Cara Memasang/Mengubah Loading Page Dengan CSS,Apakah pernah
memperhatikan efek loading page saat anda pergi ke suatu blog dan meng-klik artikel mereka
dan ingin seperti mereka?,Atau anda juga sudah bosan dengan loading page yang
default bawaan dari template anda,Tenang saja, hari ini saya akan membagikan
tutorial untuk membuat loading page dengan CSS yang tentu saja keren dan widget ini juga tidak
akan membuat berat blog anda.

Langkah Pembuatan :

1.Masuk ke dalam blog anda

2.Silahkan klik bagian template,Pilih Edit Template

3.Cari kode ]]><b:skin> dalam blog anda

4.Letakan kode dibawah ini diatas kode tersebut

 #sliderloadingwrapper {width:100%;height:100%;
position:fixed;z-index: 999999999999999999999999999999;
background: rgba(95, 130, 187, 0.2);top: 0px;
left: 0px;-webkit-animation: fadeOut 15s linear forwards;
-moz-animation: fadeOut 15s linear forwards;
-o-animation: fadeOut 15s linear forwards;
-ms-animation: fadeOut 15s linear forwards;
animation: fadeOut 15s linear forwards;}
/* Semua-Niche https://semuaniche.blogspot.com/ */
#sliderloader {
width: 500px;
height: 85px;
overflow: hidden;
background-color: #8CA5CE;
border: 1px solid #5F82BB;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
margin-bottom: 30px;
border-radius: 5px;
box-shadow: inset 0 0px 20px rgba(0, 0, 0, 0.2), 0 0px 0 #5E524F;
border-bottom: 1px solid #222;
margin: auto;
margin-top: 200px;}
#progressbg {
width:460px;
margin:auto;
height:5px;
background-color:#ddd;
top:65px;
position:relative;
}
/* Semua-Niche https://semuaniche.blogspot.com/ */
#loader {
width:1px;
height:5px;
background-color:#ffd000;
-moz-animation:johanesloader 70s infinite;
-webkit-animation:johanesloader 70s infinite;
position:relative;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
/* Semua-Niche https://semuaniche.blogspot.com/ */
#sliderloader ul {
width:2630px;
list-style:none;
padding:0;
margin:0;
position:relative;
left:0px;
}
/* Semua-Niche https://semuaniche.blogspot.com/ */
#sliderloader li {
display:inline;
width:500px;
height:100px;
margin:0;
padding:0;
float:left;
position:relative;
}
/* Semua-Niche https://semuaniche.blogspot.com/ */
#sliderloader li a {
display:block;
text-decoration:none;}
#sliderloader li span {
display: block;
width: 460px;
padding: 10px 20px;
text-shadow: 1px 1px 1px #362c30;
pointer-events: none;
text-align: left;
float: left;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
/*Semua-Niche https://semuaniche.blogspot.com/ */
#sliderloader ul li span h2 {
font-size:13px;
line-height:24px;
color:#fff;letter-spacing: 1px;
font-weight:normal;
text-shadow:1px 1px 2px #362c30;
text-transform:uppercase;
}
/* Semua-Niche https://semuaniche.blogspot.com/ */

@-webkit-keyframes johanesloader {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:460px; opacity:1;}
22.5% {width:460px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:460px; opacity:1;}
47.5% {width:460px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:460px; opacity:1;}
72.5% {width:460px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:460px; opacity:1;}
98% {width:460px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes johanesloader {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:460px; opacity:1;}
22.5% {width:460px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:460px; opacity:1;}
47.5% {width:460px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:460px; opacity:1;}
72.5% {width:460px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:460px; opacity:1;}
98% {width:460px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes fadeOut {
0% { opacity: 1;top:0px;}
10% { opacity: 1;top:0px; }
90% { opacity: 1; -webkit-transform: translateY(0px);top:0px;}
99% { opacity: 0; -webkit-transform: translateY(-30px);top:0px;}
100% { opacity: 0;top: -980px;}
}
@-moz-keyframes fadeOut {
0% { opacity: 1;top:0px; }
10% { opacity: 1;top:0px; }
90% { opacity: 1; -moz-transform: translateY(0px);top:0px;}
99% { opacity: 0; -moz-transform: translateY(-30px);top:0px;}
100% { opacity: 0;top: -980px;}
}

@-o-keyframes fadeOut {
0% { opacity: 1;top:0px; }
10% { opacity: 1;top:0px; }
90% { opacity: 1; -o-transform: translateY(0px);top:0px;}
99% { opacity: 0; -o-transform: translateY(-30px);top:0px;}
100% { opacity: 0;top: -980px;}
}

@-ms-keyframes fadeOut {
0% { opacity: 1;top:0px;}
10% { opacity: 1;top:0px;}
90% { opacity: 1; -ms-transform: translateY(0px);top:0px;}
99% { opacity: 0; -ms-transform: translateY(-30px);top:0px;}
100% { opacity: 0;top: -980px;}
}

@keyframes fadeOut {
0% { opacity: 1;top:0px; }
10% { opacity: 1;top:0px; }
90% { opacity: 1; transform: translateY(0px);top:0px;}
99% { opacity: 0; transform: translateY(-30px);top:0px;}
100% { opacity: 0;top: -980px; }
}

5.Cari kode </body> dalam blog anda
6.Letakan kode dibawah ini diatas kode tersebut :

 <!--  Opened Loading Page Semua-Niche--><div id='sliderloadingwrapper'><div id='sliderloader'><ul><li><span><h2>Loading Page . . .</h2></span></li></ul><div id='progressbg'><div id='loader'></div></div></div></div><!--  Closed Loading Page By Semua-Niche  -->

Untuk mengubah kata,Silahkan anda ganti "Loading Page..." dengan kata yang anda suka

7.Loading ini muncul di semua postingan blog anda,Jika anda ingin hanya muncul di home page
  silahkan anda gunakan HTML Tag Conditional

<b:if cond='data:blog.url == data:blog.homepageUrl'><!--  Opened Loading Page  Semua-Niche --><div id='sliderloadingwrapper'><div id='sliderloader'><ul><li><span><h2>Loading Page . . .</h2></span></li></ul><div id='progressbg'><div id='loader'></div></div></div></div><!--  Closed Loading Page By  Semua-Niche  --></b:if>