Tuesday, April 24, 2018

Cara Membuat Loading Efek PS4 Di Blog

Cara Membuat Loading Efek PS4 Di Blog
Tuesday, April 24, 2018
Blogger Banyumas

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!!

Blogger Banyumas
Disqus Codes
  • To write a bold letter please use or
  • To write a italic letter please use or
  • To write a underline letter please use
  • To write a strikethrought letter please use
  • To write HTML code, please use or
    or

    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed