Cara Membuat Loading Efek PS4 Di Blog

WriterHilmy - Halo teman-teman blog writerhilmy, apa kabar semuanya yang sedang baca artikel kali ini? semoga saja kalian yang sedang baca artikel kali ini dalam keadaan sehat, dan semoga saja tutorial kali ini bisa bermanfaat bagi kalian semua, pada kesempatan sore ini, admin blog writerhilmy akan membagikan sebuah tutorial yang sederhana, tutorial ini akan saya berikan dengan judul Cara Membuat Loading Efek PS4 Di Blog.

Cara Membuat Loading Efek PS4 Di Blog - Apakah kalian pernah melihat di suatu website atau blog yang memiliki loading yang sangat keren? pastinya kalian sudah pernah melihat seperti begitu, nah bang, emang fungsi kayak loading gituan buat apa? memberatkan loading blog kagak bang? ya jelas fungsinya untuk memperindah tampilan blog, animasi loading blog ini tidak akan memberatkan loading blog kalian. jadi bagi kalian yang sedang ketakutan, jangan khawatir, widget ini ringan kok, tidak seperti yang kalian fikirkan. pada saat kalian menunggu loadingnya, gambar-gambar seperti segitiga, kotak, silang akan bergerak unik. nah bagi kalian yang sudah penasaran, kalian bisa simak tutorial singkat ini sampai selesai.

Cara Membuat Loading Efek PS4 Di Blog

  • Seperti Biasanya, kalian masuk dulu ke akun blogger.com, jika sudah kalian skip langkah ini.
  • lalu kalian pergi ke tombol tema
  • lalu, kalian klik edit HTML
  • lalu kalian cari kode </head>, gunakan CTRL+F untuk memudahkan dalam pencarian
  • jika sudah ketemu, kalian salin kode dibawah ini dan tempelkan diatas kode </head>

<style>
 div#loading-abdoutechnologie {
    right: 0;
    bottom: 0;
    position: fixed;
    z-index: 99999999999999999999;
    display: block;
    left: 0;
    top: 0;
   background: #1d80d6;
    background: -moz-linear-gradient(-45deg, #1d80d6 0%, #05306d 34%, #05306d 70%, #1d80d6 100%);
    background: -webkit-linear-gradient(-45deg, #1d80d6 0%,#05306d 34%,#05306d 70%,#1d80d6 100%);
    background: linear-gradient(135deg, #1d80d6 0%,#05306d 34%,#05306d 70%,#1d80d6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d80d6', endColorstr='#1d80d6',GradientType=1 );
    width: 100%;
    height: 100%;
}
 
 
#thanks {
  padding: 10%;
}
#thanks-button {
  cursor: pointer;
  padding: 2%;
  color: #fff;
  position: absolute;
  bottom: 0%;
  z-index: 12;
  background: #000;
    -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
#close-cross {
   cursor: pointer;
}
.container1 {
      margin-top: 80px;
  position: absolute;
  width: 100vw;
  height: 100vh;
}
.ps4-icons {
    position: relative;
    width:12vw;
    margin:auto;
    margin-top: 10vw;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
 
@-moz-keyframes scaling {
  0% {
    transform: rotate(270deg) scale(0);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
@-webkit-keyframes scaling {
  0% {
    transform: rotate(270deg) scale(0);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
 
@keyframes scaling {
  0% {
    transform: rotate(270deg) scale(0);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
@-o-keyframes scaling {
  0% {
    transform: rotate(270deg) scale(0);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
 
 
.cross-icon {
  background: url(https://d.top4top.net/p_579vpz791.png) no-repeat;
  background-size: 100%;
  width: 4vw;
  height: 4vw;
  margin: 1vw;
  float:left;
}
 
.square-icon {
  background: url(https://b.top4top.net/p_5790u4dm3.png) no-repeat;
  background-size: 100%;
  width: 4vw;
  height: 4vw;
  margin: 1vw;
  float:left;
}
.triangle-icon {
  background: url(https://f.top4top.net/p_579x3s3u2.png) no-repeat;
  background-size: 100%;
  width: 4vw;
  height: 4vw;
  margin: 1vw;
  float:left;
}
.circle-icon {
  background: url(https://e.top4top.net/p_579ythha1.png) no-repeat;
  background-size: 100%;
  width: 4vw;
  height: 4vw;
  margin: 1vw;
  float:left;
}
 
#thanks {
    -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  position: absolute;
  bottom: -50%;
  background: #000;
  color: #fff;
  padding: 1%;
}
#thanks a {
  color: #fff;
  text-decoration: underline;
  font-weight: normal;
}
 
 </style>
  • Jika sudah kalian tempel, lalu salin kode dibawah ini dan simpan di atas kode </body>

<script type='text/javascript'>
function randomShape(array) {
  return array[Math.floor(Math.random() * array.length)];
}
function loadingScreen(){
var cross = 'https://d.top4top.net/p_579vpz791.png';
var circle = 'https://e.top4top.net/p_579ythha1.png';
var triangle = 'https://f.top4top.net/p_579x3s3u2.png';
var square = 'https://b.top4top.net/p_5790u4dm3.png';
var elements = document.querySelectorAll('.ps-icon');
    Array.prototype.forEach.call(elements, function(el, i){
    setTimeout(function(){
      el.style.animation = "scaling";
      el.style.animationDuration = "1s";
      el.style.animationIterationCount = "1";
      el.style.backgroundImage = "url("+randomShape([triangle,square,circle,cross])+")";      
}, (i * 400));
      el.style.animation = "";
      el.style.animationDuration = "";
      el.style.animationIterationCount = "";  
});
function changeShape(){  
    var elements = document.querySelectorAll('.ps-icon');
    Array.prototype.forEach.call(elements, function(el, i){
    setTimeout(function(){
      el.style.animation = "scaling";
      el.style.animationDuration = "1s";
      el.style.animationIterationCount = "1";
      el.style.backgroundImage = "url("+randomShape([triangle,square,circle,cross])+")";      
}, 100 + (i * 300));
      el.style.animation = "";
      el.style.animationDuration = "";
      el.style.animationIterationCount = "";  
});
 
}
setInterval(changeShape,3000);  
}
loadingScreen();
 </script>
<script>
 
        $(window).load(function(){  
   $("#loading-abdoutechnologie").fadeOut(1000)
  });
 </script>
<div id='loading-abdoutechnologie'>
 
<div class="container1">
  <div class="ps4-icons">
    <div class="square-icon ps-icon"></div>
    <div class="cross-icon ps-icon"></div>
    <div class="circle-icon ps-icon"></div>
    <div class="triangle-icon ps-icon"></div>
  </div>
</div>
 
</div>
  • Lalu klik simpan template
| DEMO |

Bagaimana dengan tutorial singkatnya guys? apakah sudah dipasang pada blog kalian? tutorial ini sangat cocok bagi kalian yang suka oprek-oprek template dan suka memperindah blog, kalian bisa coba cara ini, jika sudah berhasil, luangkanlah waktu untuk berkomentar sejenak, agar blog ini bisa terus update setiap harinya, sekian dari artikel kali ini, sampai jumpa kawan!!

Berlangganan update artikel terbaru via email:

0 Response to "Cara Membuat Loading Efek PS4 Di Blog"

Post a Comment

Selamat Datang Di Blog Writer Hilmy
# Berkomentarlah Dengan Bijak
# Berkomentarlah Sesuai Dengan Topik Artikel
# Jangan Lupa Untuk Mengunjungi Situs Ini Lagi

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel