Header Ads

  • Cara Memasang Loading Screen Pada Halaman Blog

    Cara Memasang Loading Screen Pada Halaman Blog


    Cara Memasang Loading Screen Pada Halaman Blog
    Membuat Loading Screen Dengan Gambar Animasi GIF atau animasi menggunakan kode CSS yang simple dan mudah. Pilihan loading screen super premium yang didapat dari hasil searching dan blogwalking. Tutorial singkat tentang cara membuat loading screen (layar pemuatan) yang bagus pada halaman blog dengan animasi GIF dan animasi CSS yang halus dan bisa anda sesuaikan dengan mudah. Scriptnya memang berukuran cukup kecil, tapi ingat jangan gunakan gambar animasi dengan ukuran besar. Pertimbangkan juga untuk membuat blog kita tetap cepat!

    Waktu pemuatan halaman jelas merupakan bagian penting dari pengalaman pengguna situs web atau blog mana pun. Sering kali developer web/blog membiarkannya meluncur untuk mengakomodasi desain estetika yang lebih baik, fungsi baru yang bagus, atau untuk menambahkan lebih banyak konten ke laman web/blog. Sayangnya, pengunjung situs web cenderung lebih mementingkan kecepatan daripada semua fitur yang ingin kami tambahkan ke situs web anda. Selain itu, waktu pemuatan halaman menjadi faktor yang lebih penting dalam hal peringkat mesin pencari.

    pikachu
    Cara Memasang Loading Screen Pada Halaman Blog
    Kecepatan sebuah halaman blog memang sangat penting namun di era ioT (internet of thing) yang akan memasuki jaringan 5G saya rasa kecepatan transfer data sebuah halaman web/blog saat ini sudah terbilang cepat dan baik, tinggal optimasi dari penggunaan script yang baik supaya browser bisa lebih cepat dan mudah untuk proses rendering halaman blog anda.

    Tak kalah pentingnya adalah bagaimana membuat tampilan blog anda bisa terlihat dinamis dan uptodate agar pengunjung bisa senantiasa terhibur ketika mengunjungi blog anda. Menggunakan loading screen yang baik merupakan salah satu solusi untuk menjaga pengunjung anda tetap sabar dan terhibur. Dengan sedikit animasi dari gambar GIF akan membuat pengunjung menjadi lebih terhibur sambil menunggu proses rendering halaman blog anda selesai dirender oleh browser pengguna.

    Informasi Singkat
    Layar pemuatan (loading screen) adalah gambar yang ditampilkan oleh program komputer, sering kali berupa permainan video, saat program sedang memuat atau menginisialisasi.

    Dalam video game awal, layar pemuatan juga merupakan kesempatan bagi seniman grafis untuk menjadi kreatif tanpa batasan teknis yang sering diperlukan untuk grafis dalam game. Utilitas penarikan juga terbatas selama periode ini. Melbourne Draw, salah satu dari sedikit utilitas layar 8-bit dengan fungsi zoom, adalah salah satu program pilihan bagi seniman.

    Saat memuat layar tetap menjadi hal yang biasa di gim video, pemuatan latar belakang sekarang digunakan di banyak gim, terutama judul dunia terbuka, untuk menghilangkan pemuatan layar saat melintasi gim secara normal, membuatnya hanya muncul saat menggunakan warps atau perjalanan cepat.
    Sumber : Wikipedia



    DAFTAR ISI
    1. Cara Pemasangan Widget Pada Blogger
    2. Pilihan Gambar Animasi GIF
    3. Pilihan Loading Screen Spinner
    4. Pilihan Loading Screen Premium
    #1 Cara Pemasangan Widget Pada Blogger


    PERINGATAN
    Perhatian ! sebelum melakukan perubahan pada kode HTML template blog, sebaiknya Anda melakukan backup kode HTML template blog terlebih dahulu, dikarenakan untuk menghindari hal-hal yang tidak diinginkan. Apabila terjadi kesalahan prosedur dalam melakukan perubahan kode HTML template blog, maka Anda dapat melakukan proses perbaikan dengan cepat dan mudah.

    Kode pemasang loading screen pada halaman web/blog secara default dibagi menjadi dua yaitu pemasangan kode di atas tag </Head> dan pemasangan kode pada bagian tag <Body>. Pada tag </Head> digunakan untuk menempatkan kode Javascript dan kode CSS sedangkan pada bagian tag <Body> digunakan untuk menaruh kode elemen HTML loading screen.

    Tujuan pemasangan kode dibagi menjadi dua bagian, yaitu pada bagian tag </Head> dan tag <Body> adalah untuk mengoptimalkan inisialisasi proses rendering browser pertama kali pada saat data sudah diterima dari web server, sehingga akan mempercepat waktu loading dan proses randering halaman web atau blog.

    Pemasangan loading screen untuk penggunaan tampilan background biru dan animasi GIF seperti yang terlihat pada contoh gambar di bawah ini.


    loading... please wait !

    Berikut contoh untuk cara pemasangan tampilan background biru dan animasi GIF.

    • Silakan login dahulu ke blog Anda.

    • Klik tombol Tema untuk masuk ke tema editor.


    • Klik tombol Edit Tema untuk menampilkan kode HTML Template Blog.


    • Geser scrollbar ke posisi paling bawah.


    • Letakan kode Javascript dan kode CSS di bawah ini tepat di atas tag </Head>.

      <!-- Code Loading Screen -->
      <style>
      body{overflow:hidden;height:100vh;}
      #preloader{width:100%;height:100vh;position:fixed;left:0;right:0;top:0;bottom:0;margin:0;padding:0;background-color:#006490;z-index:+999999999;}
      .cfl-loadnote{color:#fff;font-size:16px;display:block;padding:5px;margin:0;text-align:center;width:100%;position:absolute;top:calc(50% - 34px);}
      </style>
      <noscript><style>#preloader{display:none;z-index:-1;}body{overflow:auto;height:auto;}</style></noscript>
      <script>
      $(window).load(function(){$("#preloader").fadeOut(1000,function(){$('body').css({'overflow':'auto','height':'auto'});});});
      $(window).on('beforeunload',function(){$('#preloader').fadeIn('slow');});
      </script>
      <!-- Code Loading Screen -->

      Kemudian letakan kode elemen HTML di bawah ini tepat di bawah tag <Body>.

      <!-- Element Loading Screen -->
      <div id='preloader'><div class='cfl-loadnote'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4y6f3kU81rgRakZlw5ARZs3GkDsO9rlxWl0sbJySouaQvNroLw76vs9rzStVx_sbhEngeQ0U8EdMD953llQipoRzRvHS5gHUuwPI3nZhHshZqmo3cl3BxCaQmwBsfimyoIcAhOB1KJz4/s48/pikachu+running+pixel.gif'/><br/>loading... please wait !</div></div>
      <!-- Element Loading Screen -->


      KETERANGAN
      Pada Kode :
      background-color:#006490;

      Merupakan kode CSS untuk warna latar belakang yang digunakan, anda bisa mengganti atau merubah kode CSS tersebut untuk menyesuaikan dengan warna tema blog yang anda gunakan.

      Pada Kode :
      top:calc(50% - 34px);

      Merupakan kode variabel CSS untuk menentukan elevasi tengah, cara menentukannya adalah dengan cara menghitung tinggi dimensi gambar animasi yang digunakan kemudian dibagi dua. Contoh pada angka (34px) didapat dari perhitungan :

      Tinggi gambar : 50 pixel
      Tinggi text : 18 pixel
      -----------------------------(+)
      Total Tinggi : 68 pixel
      -----------------------------
      Variabel tinggi : 68/2 = 34 pixel

      Pada elemen HTML untuk URL gambar animasi GIF terletak pada tag <image>
      <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkDi8WuIXRxvPwTiT0q6yopBPx0T0LoCs7UmSnisxOCdiBDQbRvRYl_OdvdRMJqffgxqsL-MAoqeYn7qQX1qG8gydi3ODoyT0H5mA7RON_tXkuH1JebZLxQGlWgyVp9nqcqjOiMIhR6ko/s600/edit_HTML_Blogger_05.jpg" style="width:100%;border:1px #ccc solid;border-radius:4px;"/>;

      Jika anda ingin menggunakan gambar animasi GIF sendiri, silakan anda ganti URL gambar animasi GIF pada kode di atas dengan URL gambar animasi GIF yang ingin anda gunakan.

      Penting ! pastikan ukuran file gambar animasi GIF berukuran kecil karena untuk mempercepat tampilan loading screen tanpa ada jeda (lag).

    #2 Pilihan Gambar Animasi GIF


    Beberapa pilihan gambar animasi GIF unik dan lucu yang dapat anda gunakan untuk gambar animasi loading screen. Cara menggunakannya, pertama-tama silakan anda download terlebih dahulu, kemudian taruh gambar yang sudah di download di web server anda atau google blogspot image, salin URL gambar dan taruh pada kode input variabel untuk gambar animasi.


    #3 Pilihan Tampilan Loading Screen


    Jika dirasa kurang cocok dengan tampilan loading screen pada kode diatas, anda bisa menggunakan beberapa alternatif pilihan tampilan animasi loading screen yang menggunakan kode CSS di bawah ini. Berikut beberapa alternatif tampilan loading screen yang berhasil admin rangkum dari hasil searching dan blogwalking.
    • 1 Color Spinner


      Kode di atas tag </Head>

      <!-- Code Loading Screen -->
      <style>
      /*-- Setting --*/
      :root {
      --loadBG: #333;
      --loadBorder1: #0083da;
      --loadColor: #fff;
      }
      /*-- CSS --*/
      body{overflow:hidden;height:100vh;}#preloader{background-color:var(--loadBG);width:100%;height:100vh;position:fixed;left:0;right:0;top:0;bottom:0;margin:0;padding:0;z-index:+99999999999999999;}.loader{color:var(--loadColor);font-size:16px;display:block;padding:5px;margin:0;width:100%;position:absolute;top:calc(50% - 60px);left:calc(50% - 60px);}.loading{border:10px solid #ccc;border-radius:50%;border-top:10px solid var(--loadBorder1);width:60px;height:60px;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite;}@-webkit-keyframes spin{0% {-webkit-transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);}}@keyframes spin{0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}
      </style>
      <noscript><style>#preloader{display:none;z-index:-1;}body{overflow:auto;height:auto;}</style></noscript>
      <script>
      $(window).load(function(){$("#preloader").fadeOut(1000,function(){$('body').css({'overflow':'auto','height':'auto'});});});
      $(window).on('beforeunload',function(){$('#preloader').fadeIn('slow');});
      </script>
      <!-- Code Loading Screen -->

      Kode di bawah tag <Body>

      <!-- Element Loading Screen -->
      <div id='preloader'><div class='loader'><div class='loading'></div></div></div>
      <!-- Element Loading Screen -->

    • 2 Color Spinner


      Kode di atas tag </Head>

      <!-- Code Loading Screen -->
      <style>
      /*-- Setting --*/
      :root {
      --loadBG: #333;
      --loadBorder1: blue;
      --loadBorder2: red;
      --loadColor: #fff;
      }
      /*-- CSS --*/
      body{overflow:hidden;height:100vh;}#preloader{background-color:var(--loadBG);width:100%;height:100vh;position:fixed;left:0;right:0;top:0;bottom:0;margin:0;padding:0;z-index:+99999999999999999;}.loader{color:var(--loadColor);font-size:16px;display:block;padding:5px;margin:0;width:100%;position:absolute;top:calc(50% - 60px);left:calc(50% - 60px);}.loading{border:10px solid #ccc;border-radius:50%;border-top:10px solid var(--loadBorder1);border-bottom:10px solid var(--loadBorder2);width:60px;height:60px;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite;}@-webkit-keyframes spin{0% {-webkit-transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);}}@keyframes spin{0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}
      </style>
      <noscript><style>#preloader{display:none;z-index:-1;}body{overflow:auto;height:auto;}</style></noscript>
      <script>
      $(window).load(function(){$("#preloader").fadeOut(1000,function(){$('body').css({'overflow':'auto','height':'auto'});});});
      $(window).on('beforeunload',function(){$('#preloader').fadeIn('slow');});
      </script>
      <!-- Code Loading Screen -->

      Kode di bawah tag <Body>

      <!-- Element Loading Screen -->
      <div id='preloader'><div class='loader'><div class='loading'></div></div></div>
      <!-- Element Loading Screen -->

    • 3 Color Spinner

      Kode di atas tag </Head>

      <!-- Code Loading Screen -->
      <style>
      /*-- Setting --*/
      :root {
      --loadBG: #333;
      --loadBorder1: blue;
      --loadBorder2: red;
      --loadBorder3: green;
      --loadColor: #fff;
      }
      /*-- CSS --*/
      body{overflow:hidden;height:100vh;}#preloader{background-color:var(--loadBG);width:100%;height:100vh;position:fixed;left:0;right:0;top:0;bottom:0;margin:0;padding:0;z-index:+99999999999999999;}.loader{color:var(--loadColor);font-size:16px;display:block;padding:5px;margin:0;width:100%;position:absolute;top:calc(50% - 60px);left:calc(50% - 60px);}.loading{border:10px solid #ccc;border-radius:50%;border-top:10px solid var(--loadBorder1);border-bottom:10px solid var(--loadBorder2);border-right:10px solid var(--loadBorder3);width:60px;height:60px;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite;}@-webkit-keyframes spin{0% {-webkit-transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);}}@keyframes spin{0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}
      </style>
      <noscript><style>#preloader{display:none;z-index:-1;}body{overflow:auto;height:auto;}</style></noscript>
      <script>
      $(window).load(function(){$("#preloader").fadeOut(1000,function(){$('body').css({'overflow':'auto','height':'auto'});});});
      $(window).on('beforeunload',function(){$('#preloader').fadeIn('slow');});
      </script>
      <!-- Code Loading Screen -->

      Kode di bawah tag <Body>

      <!-- Element Loading Screen -->
      <div id='preloader'><div class='loader'><div class='loading'></div></div></div>
      <!-- Element Loading Screen -->

    • 4 Color Spinner

      Kode di atas tag </Head>

      <!-- Code Loading Screen -->
      <style>
      /*-- Setting --*/
      :root {
      --loadBG: #333;
      --loadBorder1: blue;
      --loadBorder2: red;
      --loadBorder3: green;
      --loadBorder4: gold;
      --loadColor: #fff;
      }
      /*-- CSS --*/
      body{overflow:hidden;height:100vh;}#preloader{background-color:var(--loadBG);width:100%;height:100vh;position:fixed;left:0;right:0;top:0;bottom:0;margin:0;padding:0;z-index:+99999999999999999;}.loader{color:var(--loadColor);font-size:16px;display:block;padding:5px;margin:0;width:100%;position:absolute;top:calc(50% - 60px);left:calc(50% - 60px);}.loading{border:10px solid #ccc;border-radius:50%;border-top:10px solid var(--loadBorder1);border-bottom:10px solid var(--loadBorder2);border-right:10px solid var(--loadBorder3);border-left:10px solid var(--loadBorder4);width:60px;height:60px;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite;}@-webkit-keyframes spin{0% {-webkit-transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);}}@keyframes spin{0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}
      </style>
      <noscript><style>#preloader{display:none;z-index:-1;}body{overflow:auto;height:auto;}</style></noscript>
      <script>
      $(window).load(function(){$("#preloader").fadeOut(1000,function(){$('body').css({'overflow':'auto','height':'auto'});});});
      $(window).on('beforeunload',function(){$('#preloader').fadeIn('slow');});
      </script>
      <!-- Code Loading Screen -->

      Kode di bawah tag <Body>

      <!-- Element Loading Screen -->
      <div id='preloader'><div class='loader'><div class='loading'></div></div></div>
      <!-- Element Loading Screen -->

    #4 Pilihan Loading Screen Premium


    Mau tampilan loading screen yang lebih gokil dan premium, silakan anda pilih dan gunakan tampilan loading screen di bawah ini, rasanya seperti menjadi iron man, anjim banget... Pastikan anda menggunakan loading screen dengan bijak dan seksama untuk mengoptimalkan antara kecepatan proses rendering dan keserasian dari penggunaan template yang digunakan.

    Tampilan Loading Screen Premium hanya menggunakan kode CSS untuk membuat animasi yang atraktif sehingga proses untuk pembuatan dan pemasangannya pada blog pun cukup mudah, hampir sama dengan metode pemasangan pada kode di atas, yaitu terdiri dari dua bagian kode, pemasangan kode sebelum tag </Head> dan pemasangan kode setelah tag <Body>. Monggo buat yang tertarik silakan dipilih salah satu dari tampilan loading screen super premium di bawah ini.

    • 3D Cube Loading Animation

      Menggunakan animasi 3D full kode CSS dan Browser friendly sehingga bisa ditampilkan di semua perangkat tanpa ada kendala. Loading screen 3D Cube Loading Animation memiliki tampilan yang atraktif dan dinamis sehingga website atau blog anda akan lebih terlihat modern dan up-to-date.


      Kode di atas tag </Head>

      <!-- Code Loading Screen -->
      <style>
      body{overflow:hidden;height:100vh;}
      #preloader{
      align-items: center;
      background: #333;
      display: flex;
      justify-content: center;
      min-height: 100vh;
      overflow: hidden;
      margin:0;
      padding:0;
      top:0;
      left:0;
      position:fixed;
      width:100%;
      z-index:+99999999999999999;
      }
      :root {
      --movement: 0.85;
      --stop: 0.5;
      --duration: calc((var(--movement) * (1 / var(--stop))));
      --stagger: 0.1125;
      --perspective: 500;
      --size: 50;
      --ease: cubic-bezier(1, -0.52, 0.26, 0.89);
      --bg: #e6e6e6;
      --panel: #fff;
      --color: #0d0d0d;
      --hue: 23;
      --saturation: 100;
      --lightness: 55;
      }
      @media (prefers-color-scheme: dark) {
      :root {
      --bg: #1a1a1a;
      --panel: #000;
      --color: #f2f2f2;
      }
      }
      .scene {
      perspective: calc(var(--perspective) * 1px);
      }
      .word {
      display: flex;
      transform: translate(calc(var(--size) * 0.7px), 0) rotateX(-30deg) rotateY(45deg);
      transform-style: preserve-3d;
      }
      .letter__wrap {
      -webkit-animation: jump calc(var(--duration) * 1s) calc((var(--stagger, 0) * var(--index, 0)) * 1s) var(--ease) infinite;
      animation: jump calc(var(--duration) * 1s) calc((var(--stagger, 0) * var(--index, 0)) * 1s) var(--ease) infinite;
      transform-origin: bottom center;
      transform-style: preserve-3d;
      }
      .letter__wrap .letter {
      -webkit-animation: rotate calc(var(--duration) * 4s) calc((var(--stagger, 0) * var(--index, 0)) * 1s) ease infinite;
      animation: rotate calc(var(--duration) * 4s) calc((var(--stagger, 0) * var(--index, 0)) * 1s) ease infinite;
      }
      .letter {
      color: var(--color);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      font-size: 2rem;
      font-weight: bold;
      height: calc(var(--size) * 1px);
      margin-right: calc(var(--size) * 0.2px);
      position: relative;
      text-transform: uppercase;
      transform-style: preserve-3d;
      width: calc(var(--size) * 1px);
      }
      .letter__panel {
      align-items: center;
      background: var(--panel);
      border: 5px hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%)) solid;
      display: flex;
      height: calc(var(--size) * 1px);
      justify-content: center;
      left: 50%;
      position: absolute;
      top: 50%;
      width: calc(var(--size) * 1px);
      box-sizing: border-box;
      transition: all 0.15s ease 0s;
      }
      .letter__panel:nth-of-type(1) {
      transform: translate3d(-50%, -50%, 0) translate3d(0, 0, calc(var(--size) * 0.5px));
      }
      .letter__panel:nth-of-type(2) {
      transform: translate3d(-50%, -50%, 0) rotateX(90deg) translate3d(0, 0, calc(var(--size) * 0.5px));
      }
      .letter__panel:nth-of-type(3) {
      transform: translate3d(-50%, -50%, 0) rotateX(180deg) translate3d(0, 0, calc(var(--size) * 0.5px));
      }
      .letter__panel:nth-of-type(4) {
      transform: translate3d(-50%, -50%, 0) rotateX(-90deg) translate3d(0, 0, calc(var(--size) * 0.5px));
      }
      .letter__panel:nth-of-type(5) {
      transform: translate3d(-50%, -50%, 0) rotateY(-90deg) translate3d(0, 0, calc(var(--size) * 0.5px));
      }
      @-webkit-keyframes rotate {
      0%, 30.625% {
      transform: rotateX(0deg);
      }
      33.125%, 81.625% {
      transform: rotateX(90deg);
      }
      83.125%, 100% {
      transform: rotateX(180deg);
      }
      }
      @keyframes rotate {
      0%, 30.625% {
      transform: rotateX(0deg);
      }
      33.125%, 81.625% {
      transform: rotateX(90deg);
      }
      83.125%, 100% {
      transform: rotateX(180deg);
      }
      }
      @-webkit-keyframes jump {
      0%, 50%, 100% {
      transform: scaleX(1) scaleY(1) translate(0, 0);
      }
      15% {
      transform: scaleX(1.2) scaleY(0.8) translate(0, 0);
      }
      25% {
      transform: scaleX(0.9) scaleY(1.1) translate(0, -100%);
      }
      }
      @keyframes jump {
      0%, 50%, 100% {
      transform: scaleX(1) scaleY(1) translate(0, 0);
      }
      15% {
      transform: scaleX(1.2) scaleY(0.8) translate(0, 0);
      }
      25% {
      transform: scaleX(0.9) scaleY(1.1) translate(0, -100%);
      }
      }
      </style>
      <noscript><style>#preloader{display:none;z-index:-1;}body{overflow:auto;height:auto;}</style></noscript>
      <script>
      $(window).load(function(){$("#preloader").fadeOut(1000,function(){$('body').css({'overflow':'auto','height':'auto'});});});
      $(window).on('beforeunload',function(){$('#preloader').fadeIn('slow');});
      </script>
      <!-- Code Loading Screen -->

      Kode di bawah tag <Body>

      <!-- Element Loading Screen -->
      <div id="preloader">
      <div class="scene" style="--hue: 260; --saturation: 87; --lightness: 73">
      <div class="word">
      <div class="letter__wrap" style="--index: 0">
      <div class="letter" data-letter="L"><span class="letter__panel" aria-hidden="true">L</span><span class="letter__panel" aria-hidden="true">W</span><span class="letter__panel" aria-hidden="true">L</span><span class="letter__panel" aria-hidden="true">W</span><span class="letter__panel"></span></div>
      </div>
      <div class="letter__wrap" style="--index: 1">
      <div class="letter" data-letter="o"><span class="letter__panel" aria-hidden="true">o</span><span class="letter__panel" aria-hidden="true">a</span><span class="letter__panel" aria-hidden="true">o</span><span class="letter__panel" aria-hidden="true">a</span><span class="letter__panel"></span></div>
      </div>
      <div class="letter__wrap" style="--index: 2">
      <div class="letter" data-letter="a"><span class="letter__panel" aria-hidden="true">a</span><span class="letter__panel" aria-hidden="true">i</span><span class="letter__panel" aria-hidden="true">a</span><span class="letter__panel" aria-hidden="true">i</span><span class="letter__panel"></span></div>
      </div>
      <div class="letter__wrap" style="--index: 3">
      <div class="letter" data-letter="d"><span class="letter__panel" aria-hidden="true">d</span><span class="letter__panel" aria-hidden="true">t</span><span class="letter__panel" aria-hidden="true">d</span><span class="letter__panel" aria-hidden="true">t</span><span class="letter__panel"></span></div>
      </div>
      <div class="letter__wrap" style="--index: 4">
      <div class="letter" data-letter="i"><span class="letter__panel" aria-hidden="true">i</span><span class="letter__panel" aria-hidden="true">.</span><span class="letter__panel" aria-hidden="true">i</span><span class="letter__panel" aria-hidden="true">.</span><span class="letter__panel"></span></div>
      </div>
      <div class="letter__wrap" style="--index: 5">
      <div class="letter" data-letter="n"><span class="letter__panel" aria-hidden="true">n</span><span class="letter__panel" aria-hidden="true">.</span><span class="letter__panel" aria-hidden="true">n</span><span class="letter__panel" aria-hidden="true">.</span><span class="letter__panel"></span></div>
      </div>
      <div class="letter__wrap" style="--index: 6">
      <div class="letter" data-letter="g"><span class="letter__panel" aria-hidden="true">g</span><span class="letter__panel" aria-hidden="true">.</span><span class="letter__panel" aria-hidden="true">g</span><span class="letter__panel" aria-hidden="true">.</span><span class="letter__panel"></span></div>
      </div>
      </div>
      </div>
      </div>
      <!-- Element Loading Screen -->

    • Text Loading Animation

      Menggunakan animasi teks loading dengan perpaduan penggunaan efek skala dan warna sehingga memberikan animasi yang unik pada tampilan halaman blog anda. Penggunaan kode CSS yang sederhana sehingga dapat dengan mudah di modifikasi untuk menyesuaikan dengan tampilan template blog yang anda gunakan.

      l

      o

      a

      d

      i

      n

      g


      Kode di atas tag </Head>

      <!-- Code Loading Screen -->
      <style>
      :root {
      --effect: hover 1s linear infinite;
      }
      body{overflow:hidden;height:100vh;}
      #preloader{
      align-items: center;
      background: #333;
      display: flex;
      justify-content: center;
      min-height: 100vh;
      overflow: hidden;
      margin:0;
      padding:0;
      top:0;
      left:0;
      position:fixed;
      width:100%;
      z-index:+99999999999999999;
      }

      #preloader p {
      display: inline-block;
      text-transform: uppercase;
      text-align: center;
      font-size: 4em;
      font-family: arial;
      font-weight: 600;
      transform: scale(.5);
      color: #121212;
      -webkit-text-stroke: 2px gray;
      }

      #preloader p:nth-child(1) {
      animation: var(--effect);
      }

      #preloader p:nth-child(2) {
      animation: var(--effect) .125s;
      }

      #preloader p:nth-child(3) {
      animation: var(--effect) .25s;
      }

      #preloader p:nth-child(4) {
      animation: var(--effect) .375s;
      }

      #preloader p:nth-child(5) {
      animation: var(--effect) .5s;
      }

      #preloader p:nth-child(6) {
      animation: var(--effect) .675s;
      }

      #preloader p:nth-child(7) {
      animation: var(--effect) .75s;
      }

      @keyframes hover {
      0% {
      transform: scale(.5);
      color: #121212;
      -webkit-text-stroke: 2px gray;
      }

      20% {
      transform: scale(1);
      color: pink;
      -webkit-text-stroke: 3px red;
      filter: drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 3px red)drop-shadow(0 0 5px red)hue-rotate(10turn);
      }

      50% {
      transform: scale(.5);
      color: #121212;
      -webkit-text-stroke: 2px gray;
      }
      }
      </style>
      <noscript><style>#preloader{display:none;z-index:-1;}body{overflow:auto;height:auto;}</style></noscript>
      <script>
      $(window).load(function(){$("#preloader").fadeOut(1000,function(){$('body').css({'overflow':'auto','height':'auto'});});});
      $(window).on('beforeunload',function(){$('#preloader').fadeIn('slow');});
      </script>
      <!-- Code Loading Screen -->

      Kode di bawah tag <Body>

      <!-- Element Loading Screen -->
      <div id="preloader">
      <div>
      <p>l</p>
      <p>o</p>
      <p>a</p>
      <p>d</p>
      <p>i</p>
      <p>n</p>
      <p>g</p>
      </div>
      </div>
      <!-- Element Loading Screen -->

    • Bar Loader Animation

      Menggunakan animasi bar loading dengan perpaduan penggunaan efek skala dan warna sehingga memberikan animasi yang unik pada tampilan halaman blog anda. Penggunaan kode CSS yang sederhana sehingga dapat dengan mudah di modifikasi untuk menyesuaikan dengan tampilan template blog yang anda gunakan.


      Kode di atas tag </Head>

      <!-- Code Loading Screen -->
      <style>
      body{overflow:hidden;height:100vh;}
      #preloader{
      align-items: center;
      background: #333;
      display: flex;
      justify-content: center;
      min-height: 100vh;
      overflow: hidden;
      margin:0;
      padding:0;
      top:0;
      left:0;
      position:fixed;
      width:100%;
      z-index:+99999999999999999;
      }
      .loader {
      margin: 0 auto;
      width: 60px;
      height: 50px;
      text-align: center;
      font-size: 10px;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translateY(-50%) translateX(-50%);
      }
      .loader > div {
      height: 100%;
      width: 8px;
      display: inline-block;
      float: left;
      margin-left: 2px;
      -webkit-animation: delay 0.8s infinite ease-in-out;
      animation: delay 0.8s infinite ease-in-out;
      }
      .loader .bar1 {
      background-color: #754fa0;
      }
      .loader .bar2 {
      background-color: #09b7bf;
      -webkit-animation-delay: -0.7s;
      animation-delay: -0.7s;
      }
      .loader .bar3 {
      background-color: #90d36b;
      -webkit-animation-delay: -0.6s;
      animation-delay: -0.6s;
      }
      .loader .bar4 {
      background-color: #f2d40d;
      -webkit-animation-delay: -0.5s;
      animation-delay: -0.5s;
      }
      .loader .bar5 {
      background-color: #fcb12b;
      -webkit-animation-delay: -0.4s;
      animation-delay: -0.4s;
      }
      .loader .bar6 {
      background-color: #ed1b72;
      -webkit-animation-delay: -0.3s;
      animation-delay: -0.3s;
      }

      @-webkit-keyframes delay {
      0%, 40%, 100% {
      -webkit-transform: scaleY(0.05);
      }
      20% {
      -webkit-transform: scaleY(1);
      }
      }
      @keyframes delay {
      0%, 40%, 100% {
      transform: scaleY(0.05);
      -webkit-transform: scaleY(0.05);
      }
      20% {
      transform: scaleY(1);
      -webkit-transform: scaleY(1);
      }
      }
      </style>
      <noscript><style>#preloader{display:none;z-index:-1;}body{overflow:auto;height:auto;}</style></noscript>
      <script>
      $(window).load(function(){$("#preloader").fadeOut(1000,function(){$('body').css({'overflow':'auto','height':'auto'});});});
      $(window).on('beforeunload',function(){$('#preloader').fadeIn('slow');});
      </script>
      <!-- Code Loading Screen -->

      Kode di bawah tag <Body>

      <!-- Element Loading Screen -->
      <div id="preloader">
      <div class="loader">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
      <div class="bar4"></div>
      <div class="bar5"></div>
      <div class="bar6"></div>
      </div>
      </div>
      <!-- Element Loading Screen -->

    • Illuminati Rainbow Animation

      Menggunakan animasi segitiga dengan perpaduan penggunaan efek skala dan warna sehingga memberikan animasi yang unik pada tampilan loading blog anda. Penggunaan kode CSS yang sederhana sehingga dapat dengan mudah di modifikasi untuk menyesuaikan dengan tampilan template blog yang anda gunakan.

      Loading


      Kode di atas tag </Head>

      <style>
      @keyframes grow-and-fade {
      0% {
      opacity: 0;
      transform: scale(0.1) translatez(0);
      }
      40% {
      opacity: 1;
      }
      60% {
      opacity: 1;
      }
      100% {
      opacity: 0;
      transform: scale(1) translatez(0);
      }
      }
      @keyframes pulsing-fade {
      0% {
      opacity: 0;
      }
      20% {
      opacity: 0;
      }
      40% {
      opacity: 0.8;
      }
      60% {
      opacity: 0;
      }
      }
      #preloader{
      align-items: center;
      background: #333;
      display: flex;
      justify-content: center;
      min-height: 100vh;
      overflow: hidden;
      margin:0;
      padding:0;
      top:0;
      left:0;
      position:fixed;
      width:100%;
      z-index:+99999999999999999;
      }
      .triangle {
      animation: grow-and-fade 2000ms linear infinite;
      height: 150px;
      left: 0;
      opacity: 0;
      width: 150px;
      position: absolute;
      top: 0%;
      transform: translatez(0);
      transform-origin: 50% 60%;
      will-change: opacity, transform;
      }
      .triangle-wrapper {
      height: 150px;
      position: absolute;
      width: 150px;
      top: calc(50% - 75px);
      left: calc(50% - 75px);
      }
      .triangle-loading {
      animation: pulsing-fade 6000ms ease infinite;
      color: white;
      font-family: 'Helvetica Neue', Helvetica, sans-serif;
      font-size: 12px;
      font-weight: 300;
      left: 50%;
      letter-spacing: 8px;
      margin-left: 4px;
      margin-top: 10px;
      opacity: 0;
      position: absolute;
      top: 100%;
      transform: translate3d(-50%, -50%, 0);
      text-transform: uppercase;
      width: 100%;
      display: inline-block;
      text-align: center;
      }
      .triangle-svg {
      margin-top: -20px;
      opacity: 0.5;
      overflow: visible;
      }
      .triangle-polygon {
      stroke-width: 5px;
      }
      .triangle-1 {
      animation-delay: 0ms;
      }
      .triangle-1 .triangle-polygon {
      stroke: hotpink;
      }
      .triangle-2 {
      animation-delay: 400ms;
      }
      .triangle-2 .triangle-polygon {
      stroke: aqua;
      }
      .triangle-3 {
      animation-delay: 800ms;
      }
      .triangle-3 .triangle-polygon {
      stroke: cornflowerblue;
      }
      .triangle-4 {
      animation-delay: 1200ms;
      }
      .triangle-4 .triangle-polygon {
      stroke: yellow;
      }
      .triangle-5 {
      animation-delay: 1600ms;
      }
      .triangle-5 .triangle-polygon {
      stroke: white;
      }
      </style>
      <noscript><style>#preloader{display:none;z-index:-1;}body{overflow:auto;height:auto;}</style></noscript>

      Kode di bawah tag <Body>

      <div id="preloader">
      <div class="triangle-wrapper">
      <div class="triangle triangle-1"></div>
      <div class="triangle triangle-2"></div>
      <div class="triangle triangle-3"></div>
      <div class="triangle triangle-4"></div>
      <div class="triangle triangle-5"></div>
      <p class="triangle-loading">Loading</p>
      </div>
      </div>

      <script>
      (() => {
      const $triangles = document.querySelectorAll('.triangle');
      const template = `<svg class="triangle-svg" viewBox="0 0 140 141">
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <polygon class="triangle-polygon" points="70 6 136 138 4 138"></polygon>
      </g>
      </svg>`;

      Array.prototype.forEach.call($triangles, ($triangle, index) => {
      $triangle.innerHTML = template;
      });
      })();
      $(window).load(function(){$("#preloader").fadeOut(1000,function(){$('body').css({'overflow':'auto','height':'auto'});});});
      $(window).on('beforeunload',function(){$('#preloader').fadeIn('slow');});
      </script>

    • Flat Circle Animation

      Menggunakan animasi lingkaran datar dengan perpaduan penggunaan efek warna cyberpunk sehingga memberikan animasi yang unik pada tampilan loading blog anda. Penggunaan kode CSS yang sederhana sehingga dapat dengan mudah di modifikasi untuk menyesuaikan dengan tampilan template blog yang anda gunakan.


      Kode di atas tag </Head>

      <style>
      #preloader{
      align-items: center;
      background: #333;
      display: flex;
      justify-content: center;
      min-height: 100vh;
      overflow: hidden;
      margin:0;
      padding:0;
      top:0;
      left:0;
      position:fixed;
      width:100%;
      z-index:+99999999999999999;
      }

      .spinner {
      position: relative;
      margin: auto;
      box-sizing: border-box;
      background-clip: padding-box;
      width: 200px;
      height: 200px;
      border-radius: 100px;
      border: 4px solid rgba(255, 255, 255, 0.1);
      -webkit-mask: linear-gradient(rgba(0, 0, 0, 0.1), #000000 90%);
      transform-origin: 50% 60%;
      transform: perspective(200px) rotateX(66deg);
      animation: spinner-wiggle 1.2s infinite;
      }
      .spinner:before,
      .spinner:after {
      content: "";
      position: absolute;
      margin: -4px;
      box-sizing: inherit;
      width: inherit;
      height: inherit;
      border-radius: inherit;
      opacity: .05;
      border: inherit;
      border-color: transparent;
      animation: spinner-spin 1.2s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, spinner-fade 1.2s linear infinite;
      }

      .spinner:before {
      border-top-color: #66e6ff;
      }

      .spinner:after {
      border-top-color: #f0db75;
      animation-delay: 0.3s;
      }

      @keyframes spinner-spin {
      100% {
      transform: rotate(360deg);
      }
      }
      @keyframes spinner-fade {
      20% {
      opacity: .1;
      }
      40% {
      opacity: 1;
      }
      60% {
      opacity: .1;
      }
      }
      </style>
      <noscript><style>#preloader{display:none;z-index:-1;}body{overflow:auto;height:auto;}</style></noscript>

      Kode di bawah tag <Body>

      <div id="preloader">
      <div class="spinner"></div>
      </div>

      <script>
      $(window).load(function(){$("#preloader").fadeOut(1000,function(){$('body').css({'overflow':'auto','height':'auto'});});});
      $(window).on('beforeunload',function(){$('#preloader').fadeIn('slow');});
      </script>

    Demikian artikel blog tentang Cara Memasang Loading Screen Pada Halaman Blog terima kasih sudah berkunjung, jangan lupa Like, Share dan Subscribe, untuk pertanyaan, kritik ataupun saran silakan ditulis pada kotak komentar di bawah. Apabila ada kata-kata yang kurang berkenan atau informasi yang kurang akurat, harap dimaklumi. Akhir kata Semoga Bermanfaat.


    Keyword


    blog, blogger, blogspot, loading, screen, page, website, animasi, GIF, sexy, girl, pikachu, blue, gradien, color, cara, pasang, buat, kode, script, javascript, jquery, css, html, code, animated, logon, login, preloader, loader, load, first

    Incoming Search Term


    Cara membuat loading screen untuk blogspot, kode script loading screen untuk halaman blog, loading screen for website, loading screen animation GIF for blogger, how to make loading screen for blogspot, kode html animasi loading blog, download loading screen gratis, cara bikin animasi GIF loading screen menggunakan jquery, bikin sendiri halaman loading blogger, kode sederhana bikin animasi loading blog, loading blogspot menggunakan css html javascript, tampilan loading unik, loading super premium paling kece, kumpulan loading screen paling baru, loading screen seru buat dipasang pada halaman blog

    No comments

    Post Top Ad

    Post Bottom Ad