Cara Membuat Animasi Loading Blogger Keren

Cara Membuat Animasi Loading Blogger Keren
Membuat Animasi Loading Blogger bisa dengan menggunakan Gambar Gif maupun Animasi CSS yang saya gunakan ini, mungkin kalian sudah melihat Animasi Loading yang hanya tampil pada bagian Home saja dan bertulisan Welcome dengan animasi berputar.

Kalian juga bisa loh pakai animasi loading yang sama dengan blog ini dan caranya juga gampang banget ngak susah untuk menerapkan kode kodenya sob, jadi tunggu apalagi buat blog kalian menjadi lebih menarik dan keren dengan tambahan Animasi Loading ini.

Cara Membuat Animasi Loading Blogger


1. Buka Blogger > Klik Template/Tema > Tambahkan kode dibawah ini sebelum kode </head> or </header>

<style>
#kang-iyan{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>

2. Berikutnya Tambahkan kode dibawah ini, letakkan kode tepat dibawah <body>

<div id='kang-iyan'>
<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>WELCOME</strong>
</div>
<strong><p class='loader-job' id='loader-job'>Mohon Tunggu Sebentar</p></strong>
</div></div></div>

3. Tambahkan kode dibawah ini diatas kode </body>

<script src='https://rawgit.com/Txmvp/Animation/master/main.js' type='text/javascript'></script>

4. Simpan Template

5. 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='kang-iyan'>
<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>WELCOME</strong>
</div>
<strong><p class='loader-job' id='loader-job'>Mohon Tunggu Sebentar</p></strong>
</div></div></div>
</b:if>

Tampilan loading hanya akan tampil dibagian Home saja jika menggunakan tag khusus seperti 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)

Cara Membuat Animasi Loading Blogger Keren

Cara Membuat Animasi Loading Blogger Keren

Cara Membuat Animasi Loading Blogger Keren

Berlangganan update artikel terbaru via email:

Show comments
Hide comments

7 Responses to "Cara Membuat Animasi Loading Blogger Keren"

Selin said...

apa sudah pasang js yang saya kasih diatas?

Iman Ridhwan Syah said...

saya udah mengikuti semua langkah diatas, tapi kok belum animasinya nggak hilang" yah?

BLOGMONYZA CHANNEL said...

keren gan, work

Selin said...

coba gunakan kode html yang bawahnya atau jsnya tarus dengan benar

jaja sumantri04 said...

Mas saya udah coba dab berhasil, tetapi padahal loading udah selesai animasi loadingnya kagak hilang juga?
www.tutorial-isun.blogspot.com

Selin said...

You are welcome

Admin - Charten said...

Thanks

Post a Comment

Centang kotak "NOTIFT ME" agar mendapatkan notifikasi melalui email ketika ada yang membalas komentar kamu.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Δ