Mylogo Screensaver

Memasang kode Screensaver 
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

 margin: 0;
}

img, div {
  width: 100px;
  height: 100px;
}

.x {
  -webkit-animation: x 13s linear infinite alternate;
          animation: x 13s linear infinite alternate;
}

.y {
  -webkit-animation: y 7s linear infinite alternate;
          animation: y 7s linear infinite alternate;
}

@-webkit-keyframes x {
  100% {
    -webkit-transform: translateX(calc(100vw - 100px));
            transform: translateX(calc(100vw - 100px));
  }
}

@keyframes x {
  100% {
    -webkit-transform: translateX(calc(100vw - 100px));
            transform: translateX(calc(100vw - 100px));
  }
}
@-webkit-keyframes y {
  100% {
    -webkit-transform: translateY(calc(100vh - 100px));
            transform: translateY(calc(100vh - 100px));
  }
}
@keyframes y {
  100% {
    -webkit-transform: translateY(calc(100vh - 100px));
            transform: translateY(calc(100vh - 100px));
  }
}
/* END */

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;}
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: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 14px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #333;
background: #000;
border-top: 2px solid #f0f;
z-index: 9999;
}

<div class="x">
<img class="y" expando" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB5vtqjDrhMPWjlo-QxCzo1fAcFXOvPS-XA2gEgTHVhIcAXGke4D6ONwVtZapsIdCt0_UKNBfaYzlLj3XemUi3zQWam1_5L7BnV-LYXbgynVQ1XCYR8vDwaZkq5Y-Tr2fFY-37tL6kJiA0/s1600-r/Logo-mys2010.png " width="50" height="50">
</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</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>

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

Edited by. Mys2010 on Codepen
Sources by. Scott Kellum on Codepen

DEMOSHOW