Television

Memasang kode Television
Untuk menerapkan kode tersebut Langkah awal 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 ini : 
Get Blank Template  

edit background warna sesuai keinginan dan 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

body {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj50vEW7RSipaQVVc5RnjZfEJqvckWyiuLxoKIvoN1pfPhb4hny1qHtY4sOdOx0X3HMm3py0BjZQj2Yz8LfYhfO300TiRMAeVHxe_XvCWBaa_WjPJZ9gmvo2XomwuQKW3D0syQ-HZ0I_VkN/s1600-r/tr-mys2010.jpg);color:red;height:100%;overflow:hidden;}
.screen {
    position: relative;
    border-radius: 5px;
    margin: 20px auto 0 auto;
    width: 30%;
    padding: 1.5% 1.5% 3%;
    background: #111;
}

 
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #FF0000;
  border-bottom: 3px solid #dad;
}


/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 40px;
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;
color: #333;
background: #B20000 ;
border-top: 2px solid #f0f;
z-index: 9999;
}

.screen:after {
    content: "";
    position: absolute;
    left: 6%;
    background: -moz-linear-gradient(top, rgba(254,255,255,.25) 0%, rgba(255,249,249,0) 100%);
    background: -webkit-linear-gradient(top, rgba(254,255,255,.25) 0%, rgba(255,249,249,0) 100%);
    background: linear-gradient(top, rgba(254,255,255,.25) 0%, rgba(255,249,249,0) 100%);
    border-radius: 10px;
    width: 88%;
    height: 50%;
    top: 8%;
}

.button {
  background: red;
    border-radius: 55% 55% 55% 55%;
    bottom: 3%;
    cursor: pointer;
    height: 5%;
    opacity: 0.85;
    position: absolute;
    right: 4%;
    width: 5%;
    box-shadow: inset 0 -2px 5px rgba(0,0,0,.75);
    transition: background .5s;
}
.screenOff .button{
    background: lightgrey;
}
.button:hover {
    opacity: 1;
}
canvas {
    border-radius: 5px;
    width: 100%;
    display: block;
    transition: box-shadow .25s;
  box-shadow: 0 10px 20px rgba(255,255,255,.25);
}
.screenOff canvas{
    box-shadow: 0 5px 10px rgba(255,255,255,.15);
}
.footer {
    position: absolute;
    height: 6%;
    width: 91%;
    background: black;
    bottom: -6%;
    box-shadow: 0 2px 10px rgba(0,0,0,.75);
}
.message {
  display:none;
    background: white;
    border-radius: 5px;
    font-size: 20px;
    height: 25px;
    left: 50%;
    margin-left: -60px;
    padding: 10px;
    position: absolute;
    text-align: center;
    top: 40%;
    width: 100px;
    opacity: 0;
    transition: opacity .5s;
    -moz-transition: opacity .5s;
    -webkit-transition: opacity .5s;
}
.message:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: white transparent transparent transparent;
    top: 45px;
    left: 20%;
    margin-left: -10px;
}

<div class="screen">
<canvas id="canvas"> </canvas>
<font size="1" color="red"face="arial">
<a href="https://sites.google.com/site/fileblogfor/code/television-mys2010.css" target="_blank" title="Download">Download</a>
<div class="button" id="btn">
</div>
<div class="footer">
</div>
<div class="message" id="msg">
</div>
</div>

<header>
<div class="Top Title Header">
<div align="center">
<span style="color: #ddaadd; font-family: &quot;arial&quot;; font-size: x-small;"><a href="http://myscript2010s.blogspot.co.id/p/statistik-home-page.html"title="Myscript2010s"><b>LET'S STUDY</a></b>
</div>
</div>
</header>

<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<p>
Cibeber Cimahi</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6ewoUBh9QCoMmLWLIGJ77Wr_kqDLzceC0qZjaIfgDWijEc11AFzwUqPIGcD0R9VoFJWJ8vgrDZ9tfKmKF8wgb5uU6FkKuN64QNvurwb0oJ7rI_0NnR9koQQ2aCNALvWvEelqh3t_aCFCP/s1600-r/Loading-Mys2010.gif" name="e902" border="0" width="28" height="29" /></a>

<script>
      var Application = ( function() {
    var canvas;
    var ctx;
      var imgData;
        var pix;
        var WIDTH;
        var HEIGHT;
        var flickerInterval;
        var switchTimeout;
        var isOn;
        var self;
        var btnElm;

        var init = function() {
            canvas = document.getElementById('canvas');
            ctx = canvas.getContext('2d');
            canvas.width = WIDTH =  450;
            canvas.height = HEIGHT =  300;
            isOn = true;
            ctx.fillStyle = 'white';
            ctx.fillRect(0, 0, WIDTH, HEIGHT);
            ctx.fill();
            imgData = ctx.getImageData(0, 0, WIDTH, HEIGHT);
            pix = imgData.data;
            flickerInterval = setInterval(flickering, 50);
            btnElm = document.getElementById('btn');
            btnElm.addEventListener('click', toggleScreen, false);
        };

        var flickering = function() {
            for (var i = 0; i < pix.length; i += 4) {
                var color = (Math.random() * 255) + 50;
                pix[i] = color;
                pix[i + 1] = color;
                pix[i + 2] = color;
            }
            ctx.putImageData(imgData, 0, 0);
        };
 
        var toggleScreen = function() {
            var msg = document.getElementById('msg');
            msg.style.opacity = 0;
      msg.style.display = 'block';
    
            if ( typeof switchTimeout != 'undefined') {
                clearTimeout(switchTimeout);
            }
            if (isOn) {
                clearInterval(flickerInterval);
                document.body.classList.add('screenOff');
                ctx.fillStyle = '#222';
                ctx.fillRect(0, 0, WIDTH, HEIGHT);
                ctx.fill();
                msg.innerHTML = 'No Signal!';
            } else {
        document.body.classList.remove('screenOff');
                flickerInterval = setInterval(flickering, 50);
                msg.innerHTML = 'Error';
            }
            msg.style.opacity = 1;
            switchTimeout = window.setTimeout(function() {
                msg.style.opacity = 0;
            }, 2750);
            isOn = !isOn;
        };
        return {
            init : init
        };
    }());
Application.init();  
    </script>

Explanation:
If you want this code, please download or copy and paste

Edited by. Mys2010 on Codepen
Sources by. Moklick on Codepen

DEMOSHOW