Home Youtube Ambilight with backgrounds change automatically Youtube Ambilight with backgrounds

Youtube Ambilight with backgrounds

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: