Mengapa saya sebut palsu?
karena menggunakan trik ini bukan benar" loading konten yang ada di blog kita,tetapi hanya membuat pengunjung bertahan selama kurang lebih dari 15 detik~xDD.
Oia,sebelumnya saya ingatkan,untuk memasang loader page ini,lebih baik diterapkan pada blog yang beban-nya belum terlalu berat,karena menggunakan trik ini akan menambah sedikit beban pada blog anda,dan itu juga tergantung pada konten" pada blog anda,dan jangan lupa untuk selalu membackup template anda agar tidak terjadi sesuatu yang tidak diinginkan~
mau dicoba? ikuti langkah' dibawah ini :
CSS
Buka blogger=>template=> Edit HTML, copy css dibawah ini,lalu letakan tepat diatas code ]]></b:skin>
#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;}
/* Blog johanes djogzs.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;
}/* Blog johanes djogzs.blogspot.com */
#johanesloader {
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;
}/* Blog johanes djogzs.blogspot.com */
#sliderloader ul {
width:2630px;
list-style:none;
padding:0;
margin:0;
position:relative;
left:0px;
}/* Blog johanes djogzs.blogspot.com */
#sliderloader li {
display:inline;
width:500px;
height:100px;
margin:0;
padding:0;
float:left;
position:relative;
}/* Blog johanes djogzs.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;
}/* Blog johanes djogzs.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;
}/* Blog johanes djogzs.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; }
}
HTML
Sedangkan untuk Kode Html ini diletakan dibawah kode <body>
<div id='sliderloadingwrapper'><div id='sliderloader'>
<ul><li><span><h2>Loading Page . . .</h2></span></li></ul>
<div id='progressbg'><div id='johanesloader'>
</div></div></div></div>
Oia,jika kamu ingin mengganti warna background dan loadernya,kamu tinggal mencari css dibawah ini,dan mengganti kode warnanya (hex dan rgba)
#sliderloadingwrapper{
yang diganti :
background: rgba(95, 130, 187, 0.2);
dan
#sliderloader {
yang diganti :
background-color: #8CA5CE;
Menggunakan trik ini,akan berpengaruh pada seluruh postingan blog anda,jika hanya ingin tampil di halaman depan/homepage saja,gunakan html tag conditional yang diletakan di luar html loader ini.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Isi HTML
</b:if>
untuk lebih lengkapnya,bisa dibaca disini
#Trik ini sudah teruji pada browser Google Chrome dan mozilla Firefox versi terbaru.
Selamat mencoba,semoga bermanfaat,Arigatou gozaimasu minna-san~ xD
No comments:
Post a Comment