Membuat Animasi Loading Blogger dapat dengan memakai Gambar Gif maupun Animasi CSS menyerupai yang aku gunakan ini, mungkin kalian sudah melihat Animasi Loading yang hanya tampil pada dikala masuk ke Home (beranda) saja dan bertulisan "Selamat datang" dengan animasi berputar.
Kalian juga dapat loh pakai animasi loading yang sama dengan blog ini dan caranya juga cukup mudah, tidak susah untuk menerapkan scriptnya, jadi eksklusif saja buat blog kalian menjadi lebih keren dengan pelengkap Animasi Loading ini.
Cara Membuat Animasi Loading Blogger
Sebelumnya aku beritahu dulu, sebelum kalian paste di tema (edit html), kalian paste dulu ke notepad. Karena pada blog ini sudah aku kasih sumber dikala di copas, sehabis di paste di notepad kalian copy lagi scriptnya, jangan sama sumbernya.
- Buka Blogger > Klik Template / Tema > Tambahkan arahan dibawah ini sebelum arahan </head> or </header>
<style>
#4hmad-tantowi{position:relative;max-width:100%;}
canvas{background-position:center;transition:background 3s;}
canvas:active{background-color:#039BE5;background-size:100%;transition:background 0s;}
#page-loader{width:100%;height:100%;background:#2980b9;color:#2980b9;opacity:.99;position:fixed;top:0;left:0;z-index:9999;}
.loading-wrapper{width:250px;position:fixed;top:40%;left:50%;margin-left:-125px;}
.container,.loader,.tp-loader{position:relative;}
.tp-loader{z-index:10000;}
.tp-loader.spinner{width:30px;height:30px;margin:0 auto 10px;background-color:#fff;box-shadow:0 0 20px 0 rgba(0,0,0,.15);-webkit-box-shadow:0 0 20px 0 rgba(0,0,0,.15);-webkit-animation:tp-rotateplane 1.2s infinite ease-in-out;animation:tp-rotateplane 1.2s infinite ease-in-out;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}
.loader-job,.loader-name{font-weight:200;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;text-align:center;}
.loader-name{color:#fafafa;opacity:.9;font-size:32px;letter-spacing:-2px;padding-left:2px;padding-right:2px;margin-top:12px;transition:all .4s ease-in-out;}
.loader-job{margin-bottom:40px;margin-top:5px;color:#d8d8d8;font-size:12px;transition:all .4s ease-in-out;}
.loader-left{-webkit-transform:translateX(-40px);-moz-transform:translateX(-40px);-o-transform:translateX(-40px);transform:translateX(-40px);opacity:0;}
.loader-right{-webkit-transform:translateX(40px);-moz-transform:translateX(40px);-o-transform:translateX(40px);transform:translateX(40px);opacity:0;}
.loader-up{-webkit-transform:translateY(-80px);-moz-transform:translateY(-80px);-o-transform:translateY(-80px);transform:translateY(-80px);opacity:0!important;}
.loader-down{-webkit-transform:translateY(80px);-moz-transform:translateY(80px);-o-transform:translateY(80px);transform:translateY(80px);opacity:0;}
.loader-hide{opacity:0;}
.loader{display:inline-block;text-align:center;margin:0 auto;width:30px;height:30px;border:4px solid #Fff;top:50%;animation:loader 2s infinite ease;}
.loader-inner{vertical-align:top;display:inline-block;width:100%;background-color:#fff;animation:loader-inner 2s infinite ease-in;}
.loader-animation{text-align:center;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;transition:all .4s ease-in-out;}
.footer-social-icons a,.social-icons a{-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;color:#fff;}
@keyframes loader{0%{transform:rotate(0);}25%,50%{transform:rotate(180deg);}100%,75%{transform:rotate(360deg);}}
@keyframes loader-inner{0%,100%,25%{height:0%;}50%,75%{height:100%;}}
</style>
- Setelah itu tambahkan arahan dibawah ini, letakkan script sempurna dibawah <body>
<div id='4hmad-tantowi'>
<div class='loader-container' id='page-loader'>
<div class='loading-wrapper'>
<div class='loader-animation' id='loader-animation'>
<span class='loader'><span class='loader-inner'></span></span>
</div>
<div class='loader-name' id='loader-name'>
<strong>Selamat datang</strong>
</div>
<strong><p class='loader-job' id='loader-job'>Di 4hmad tutorial, mohon tunggu sebentar</p></strong>
</div></div></div>
Note*tulisan yang aku warnai merah dapat kalian ganti
- Tambahkan script dibawah ini, taruh diatas arahan </body>
<script src='https://rawgit.com/Txmvp/Animation/master/main.js' type='text/javascript'></script>
- Setelah itu simpan
- Selesai
Agar tampilan Loading Blogger hanya tampil di Home tambahkan arahan <b:if cond='data:blog.url == data:blog.homepageUrl'> pada bab htmlnya maka alhasil akan menyerupai ini
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='4hmad-tantowi'>
<div class='loader-container' id='page-loader'>
<div class='loading-wrapper'>
<div class='loader-animation' id='loader-animation'>
<span class='loader'><span class='loader-inner'></span></span>
</div>
<div class='loader-name' id='loader-name'>
<strong>Selamat datang</strong>
</div>
<strong><p class='loader-job' id='loader-job'>di 4hmad tutorial, mohon tunggu sebentar</p></strong>
</div></div></div>
</b:if>
Tampilan loading hanya akan tampil dibagian Home saja bila memakai tag yang ada diatas.
Untuk lebih jelasnya kalian dapat lihat gambar berikut, biar lebih terang alasannya ialah bila masih belum paham niscaya sulit, dan arahan diatas sudah aku coba dibeberapa blog aku dan berhasil bekerja tanpa adanya hambatan sama sekali. Jika gambar kurang terang dapat klik kanan > View Image (Untuk melihat gambar biar jelas)
Yah, itu saja postingan kali ini. Jangan lupa untuk update dan kunjungi tutorial yang lain. Silahkan komen di bawah.
Source : kangiancom
Komentar