Membuat Animasi Loading Blogger bisa dengan menggunakan Gambar Gif maupun Animasi CSS seperti yang saya gunakan ini, mungkin kalian sudah melihat Animasi Loading yang hanya tampil pada saat masuk ke Home (beranda) saja dan bertulisan "Selamat datang" dengan animasi berputar.
Kalian juga bisa loh pakai animasi loading yang sama dengan blog ini dan caranya juga cukup mudah, tidak susah untuk menerapkan scriptnya, jadi langsung saja buat blog kalian menjadi lebih keren dengan tambahan Animasi Loading ini.
Cara Membuat Animasi Loading Blogger
Sebelumnya saya beritahu dulu, sebelum kalian paste di tema (edit html), kalian paste dulu ke notepad. Karena pada blog ini sudah saya kasih sumber saat di copas, setelah di paste di notepad kalian copy lagi scriptnya, jangan sama sumbernya.
- Buka Blogger > Klik Template / Tema > Tambahkan kode dibawah ini sebelum kode </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 kode dibawah ini, letakkan script tepat 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 saya warnai merah bisa kalian ganti
- Tambahkan script dibawah ini, taruh diatas kode </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 kode <b:if cond='data:blog.url == data:blog.homepageUrl'> pada bagian htmlnya maka hasilnya akan seperti 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 jika menggunakan tag yang ada diatas.
Untuk lebih jelasnya kalian bisa lihat gambar berikut, agar lebih jelas karena jika masih belum paham pasti sulit, dan kode diatas sudah saya coba dibeberapa blog saya dan berhasil bekerja tanpa adanya kendala sama sekali. Jika gambar kurang jelas bisa klik kanan > View Image (Untuk melihat gambar agar jelas)
Yah, itu saja postingan kali ini. Jangan lupa untuk
update dan kunjungi tutorial yang lain. Silahkan komen di bawah.
Source :
kangiancom
