Cara Memasang Hari Merdeka 72th 2 Widget Floating dan Parallax Efek di Blog

0
Ini Hari Merdeka 72th Indonesia Kerja Bersama. Ini Lomba-Lomba Makan Kerupuk, Mancing Botol, Balap Karung, Mengambil Koin, Tusuk Jarum, Joget Balon dan Lain-lain. Ini Sejak 17 Agustus 1945 - Tahun Ini 17 Agustus 2017 Hari Merdeka Ini. Ini Bendera Merah Putih Indonesia. Cara Memasang Hari Merdeka 72th Floating Bendera, Floating Logo Merdeka 72th (Bonus Animasi Berwarna) dan Perallax Efek di Blog Anda Ini. Ini Template Adalah Fullsite W3CSS Republik Indonesia Responsive Blogger Template Anda Blog Maharani Template Terbaru.

Floating Bendera

1. Masuk Blogger
2. Klik Tata Letak
3. Terus Klik Tambahkan Gadget
4. Selanjutnya Klik HTML/Javascript
5. Letakkan Kode dibawah Floating Bendera
<style>
.bendera-gif{position: fixed;bottom: 0px;left: 0px;z-index: 999;}
@media screen and (max-width:960px) {
.bendera-gif{display: none;}
}
</style>
<div class="bendera-gif"> <img src="https://rawgit.com/maharanidanathallah/merdeka/master/dp%20bbm%20bendera%20merah%20putih%20berkibar.gif" width="120"/> </div>
6. Selesai Klik Simpan
7. Lihat Hasil Blog

Floating Logo Merdeka

1. Masuk Blogger
2. Klik Tata Letak
3. Terus Klik Tambahkan Gadget
4. Selanjutnya Klik HTML/Javascript
5. Letakan Kode dibawah Floating Logo Merdeka
<style>
.logo-merdeka{position: fixed;top: 10px;right: 10px;z-index: 999;}
@media screen and (max-width:960px) {
.logo-merdeka{display: none;}
}
</style>
<div class="logo-merdeka"> <img src="https://rawgit.com/maharanidanathallah/merdeka/master/logo%20hut%20ri%20ke%2072.png" width="120"/> </div>
6. Selesai Klik Simpan
7.  Lihat Hasil Blog

Bonus Logo Animasi Berwarna 2 detik

<style>
.logo-merdeka img{animation: logo-berwarna 2s linear 0s infinite;}
@keyframes logo-berwarna {
 0%{-webkit-filter: hue-rotate(0deg);filter: hue-rotate(0deg);}
 25%{-webkit-filter: hue-rotate(90deg);filter: hue-rotate(90deg);}
 50%{-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
 75%{-webkit-filter: hue-rotate(270deg);filter: hue-rotate(270deg);}
 100%{-webkit-filter: hue-rotate(360deg);filter: hue-rotate(360deg);}
    }
    </style>

atau Bonus Logo Animasi Berwarna 5 detik

<style>
.logo-merdeka img{animation: logo-berwarna 5s linear 0s infinite;}
@keyframes logo-berwarna {
 0%{-webkit-filter: hue-rotate(0deg);filter: hue-rotate(0deg);}
 25%{-webkit-filter: hue-rotate(90deg);filter: hue-rotate(90deg);}
 50%{-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
 75%{-webkit-filter: hue-rotate(270deg);filter: hue-rotate(270deg);}
 100%{-webkit-filter: hue-rotate(360deg);filter: hue-rotate(360deg);}
    }
    </style>

atau Bonus Logo Animasi Berwarna 10 detik

<style>
.logo-merdeka img{animation: logo-berwarna 10s linear 0s infinite;}
@keyframes logo-berwarna {
 0%{-webkit-filter: hue-rotate(0deg);filter: hue-rotate(0deg);}
 25%{-webkit-filter: hue-rotate(90deg);filter: hue-rotate(90deg);}
 50%{-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
 75%{-webkit-filter: hue-rotate(270deg);filter: hue-rotate(270deg);}
 100%{-webkit-filter: hue-rotate(360deg);filter: hue-rotate(360deg);}
    }
    </style>

atau Bonus Logo Invert Untuk Template Dark

<style>
.logo-merdeka img{-webkit-filter: invert(100%);filter: invert(100%);}
    </style>

Parallax Efek

1. Langkah Pertama

Letakkan Kode Dibawah ini </head> diatas
<style type='text/css'>
/*<![CDATA[*/
.parallax {
  background: url(https://rawgit.com/maharanidanathallah/merdeka/master/benderaindonesia11.jpeg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height:100vh;
  width:100%;
  position:relative;
  z-index:9999;
}

.parallax h2 {
  text-align: center;
  padding: 70vh 0 0;
  font-size: 4em;
  line-height:1;
  color: black;
  font-family: "Trebuchet MS";
  margin:0;
}
.parallax p {
  text-align: center;
  padding: 20px 50px 0;
  margin:0;
  font-size: 2em;
  color: black;
  font-family: "Trebuchet MS";
}
.parallax .arrow_down{
  position:absolute;
  width:60px;
  height:60px;
  bottom:20px;
  left:50%;
  margin-left:-30px;
  font-size:24px;
  color:#fff;
}
.parallax .close_parallax{
  position:absolute;
  width:20px;
  height:20px;
  top:20px;
  right:25px;
  font-size:34px;
  line-height:1;
  color:#fff;
  cursor:pointer;
}
.parallax .bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  }
  @-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  }
  40%, 43% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -30px, 0);
  transform: translate3d(0, -30px, 0);
  }
  70% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -15px, 0);
  transform: translate3d(0, -15px, 0);
  }
  90% {
  -webkit-transform: translate3d(0,-4px,0);
  transform: translate3d(0,-4px,0);
  }
  }
  @keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  }
  40%, 43% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -30px, 0);
  transform: translate3d(0, -30px, 0);
  }
  70% {
  -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  -webkit-transform: translate3d(0, -15px, 0);
  transform: translate3d(0, -15px, 0);
  }
  90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0);
  }
  }
@media screen and (max-width:1024px){.parallax h2 {
  padding: 60vh 0 0;
  font-size: 2em;
}
.parallax p {
  font-size: 1em;
}
}
@media screen and (max-width:375px){.parallax h2 {
  padding: 50vh 0 0;
}
}
/*]]>*/
</style>

2. Langkah Kedua

Letakkan Kode Dibawah ini <body> dibawah
<section class='parallax' id='parallax'>
    <h2>Hari Merdeka</h2>
   <p>Selamat Hari Ulang Tahun Republik Indonesia Ke 72. Merdeka Merdeka Merdeka.</p>
    <div class='arrow_down bounce'><img alt='down' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpnWa5J64GZ3Q49PwbVqu8bhIxslpn_wUlJTHSPuQ18G6lBoTpgxfysbY4JqzFytlFYfwgRUvhwUv6ELxvzIYMU3KaX2TYmTh1ZOQVxlcOOZIsWrTue5TSIQBtSmLGcBhQrkqQRIfIzfc/s1600/chevron-double-down+%25281%2529.png' width='60'/></div>
    <div class='close_parallax' onclick='hideParallax()' title='Close'>&amp;times;</div>
  </section>

3. Langkah Ketiga

Letakkan Kode Dibawah ini </body> diatas
<script type='text/javascript'>
//<![CDATA[
var parallax= document.querySelector(".parallax");
window.addEventListener("scroll", function() {
   var scrolledHeight= window.pageYOffset,
                limit= parallax.offsetTop+ parallax.offsetHeight;            
  if(scrolledHeight > parallax.offsetTop && scrolledHeight <= limit) {
    parallax.style.backgroundPositionY=  (scrolledHeight - parallax.offsetTop) /1.5+ "px";
    } else {
     parallax.style.backgroundPositionY=  "0";
    }
     });
function hideParallax() {
document.getElementById("parallax").style.display = "none";
};
//]]>
</script>


Selamat Mencoba. Selamat Hari Ulang Tahun Republik Indonesia Ke 72th Merdeka Merdeka Merdeka.

Anime :
Facebook twitter Google

Related Post

Berlangganan update artikel terbaru via email:

0 Komentar