Mys2010 on Codepen: Youtube Ambilight with backgrounds change automatically | SEO Friendly Responsive Blogger Myscript2010s

Memasang Kode Youtube Ambilight with backgrounds
Login ke akun blog klik tombol blog baru, buat satubuah link baru
kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut,
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber berikut : Get Blank Template. edit background warna sesuai keinginan klik simpan selesai.

Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style>
body {);color:red;height:100%;overflow:hidden;}
body {
background: #151515;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  1px 0;
  position: fixed;
  top: 0;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #fff;  
font-size:  6px;
background: -moz-linear-gradient(top, #333 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:  11px;
background:  #111;
border-top: 2px solid #f0f;
z-index: 9999;
}  
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #666 50%, transparent 90%); 
}
body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:   #000 ;
  -webkit-animation: overlay infinite 12s;
          animation: overlay infinite 12s;
  content: '';
}

@-webkit-keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}

@keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@-webkit-keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@-webkit-keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
@keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
img {
width: 720px;
  height: 480px;
  position: center;
    margin-top:129px;
}
#tubular-container {
  filter: blur(50px) brightness(0.5);
  -webkit-filter: blur(50px) brightness(0.5);
  z-index: 0;
}
.video {
  width: 560px;
  height: 315px;
  position: absolute;
  top:-51px;
  left: 50px;
  right: 50px;
  bottom: 0;
  margin: auto;
  z-index: 100;
}
 </style>

<body translate="no" >    
<div class='video'>
</div>  
<p align="center">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh5HhoswRC9wL9ef14cmmVX2qadBG8yR5zqrxxoCLs1JtJpFzB3NWJCjlHhwT1rZuSeoHHYrQSNMG-wFoz3FHWDtmAxcbMANPErEfXSRu4OdUnGxBxiKfrx7U34XEesOBAryFt0UHWH3fJ/s1600-r/tele-mys2010.png" name="e902" border="0" width="716" height="540"></a> </center>
<div class="ap" id="ap">
<div align="center">
<a href="https://Link Download"title="Myscript2010s"> 
<h2>
<span style="color:#dad; font-size: 10pt">DOWNLOAD</2></a>  
</div>
<header>
<a href="http://demoshow-mys2010.blogspot.co.id/p/sebelum-dimodifikasi.html" target="_blank" title="Full Page">
<h2>
<span style="color:orange; font-size: 10pt">BEFORE MODIFICATION</2></a>  
</div>
</header>

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script> 
<script>
(function () {
    var ambilight;
    $(document).ready(function () {
        return ambilight.on('KSqttO3NtCg', '.video');
    });
    ambilight = {
        on: function (yt_id, container) {
            $(container).append('<iframe width="560" height="320" src="https://www.youtube.com/embed/Favl3kzWejA?list=RDcbV190MjKiU" frameborder="0" allowfullscreen></iframe>');
            return $('body').tubular({ videoId: yt_id });
        }
    };
}.call(this));
</script>

Youtube code by. Max
Design code is edited by. Mys2010 In Codepen

DEMOSHOW

If you want to directly copy  &  paste you canDownload Here  Youtube Ambilight

Category: Youtube Ambilight with backgrounds change automatically

Mys2010 on Codepen

Youtube Ambilight with backgrounds

POPULAR

Blog Archive