Cara Memasang Animasi Loading Blog Responsive


Cara Memasang Animasi Loading Blog Simpel Dan Responsive - Hallo sobat sobat blogger mania, Yang pada kece parah , Baik Yang Ganteng Maupun Yang cantik, Saya ucapkan selamat datang kembali di Blog Bang Ariel, Khususnya Bagi kalian yang first time visitor, Saya Ucapkan selamat datang.



Hayooo mau pada ngapain baca artikel ini ?
Heheheh tentunya kalian pengen tau, Kan cara memasang Animasi Loading Blog Responsive , Adminnya Pe'a, 🤣 Udh tau malah nanya , hehehe
Maafkan sifat hamba yang seperti ini.

Ngeblog di bawa santai aja ya sob, Jangan terlalu di ambil pusing, Ok langsung saja ke intinyaintinya saya akan mengajarkan dan memberi tahu kalian cara nya,

Ada 2 cara dalam membuat animasi loading blog, Yaitu dengan Teknik Css Dan Juga Dengan Teknik Gambar animasi, Namun Disini kita akan membuat Loading Blog yang Responsive, Maka dari itu kita akan menggunakan teknik Css, Jadi kalian perhatikan ya, Tutorial yang akan saya arahkan, Agar kalian juga mudah paham.

Cara Memasang Animasi Loading Blog Simpel Dan Responsive

  1. Masuk Ke Blogger
  2. Lalu Pilih Tema
  3. Lalu pilihlah Opsi Edit Html
  4. Selanjutnya letakan Kode Di bawah ini sebelum Kode </head> Atau <header>
    <style>
    #bang-ariel{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>


  5. Selanjutnya kalian Salin Kode Di bawah ini, Letakan tepat di bawah code <body> Atau Dibawah code </head>
    <div id='bang-ariel'>
    <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>


  6. Selanjutnya letakan kode di bawah ini tepat diaatas kode </body>
    <script src='https://rawgit.com/Txmvp/Animation/master/main.js' type='text/javascript'></script> 

  7. Simpan template
  8. Selesai.
Nah seperti itulah tutorialnya, Cukup mudah bukan ?
Gk sulitlah, cuman tinggal copy paste saja.
Dengan begitu , blog kalian telah berhasil di pasang animasi loading yang keren dan responsive.

Penutup

Demikianlah artikel ini bisa saya sampaikan kepada kalian semua, semoga bermanfaat buat kalian semua, Jangan lupa untuk selalu mengunjungi blog saya jni, Cukup sekian dari saya.

Terima kasih.

0 Response to "Cara Memasang Animasi Loading Blog Responsive "

Post a Comment

Silahkan Berkomentar Dengan Baik, Dilarang !
- Sara
- Provokasi
- Menggunakan Kata Kasar
- Spam
- Phissing
- Sebar Url
- Dan Lain Lain yang melanggar ketentuan Google.

Berkomentarlah Dengan Sopan Dan Santun,

Jika komentar kalian melanggar ketentuan blog bang ariel, Dalam Sekejap Komentar Anda Akan Saya Hapus.

Terimakasih.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel