Menu


Menu Tab

Pages

Css Card Animated Rotate

Memasang kode
Css Card Animated Rotate
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 :

Get Blank Template  edit background warna sesuai keinginan Kemudian 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 class="mys2010-styles">
/*Background*/
body {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNcXlEOZXHol04QYEwiqfh9U4f5R4u_yrq3E788_Vx1yMQWZwyhIANS5rlJz1B0UfhIxh8CeLUMxQEbVEsBJnLH7Wva_QH9mtnRjuQoRL7zILNdECYGNRiqcEBbrBEngnp9mtJ176Cn6E9/s1600-r/black-gradient-mys2010.png);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:  10px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #333;
  border-bottom: 2px solid #A10048;
}
/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 50px;
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: #fof;
background: #333;
border-top: 2px solid #A10048;
z-index: 9999;
}/* GRADIEND END */
/* CARD */
.card {
  margin: 0 auto;
  background-color: #444;
  width: 700px;
  height: 340px;
  border: 15px double #333;
}
.head_shot {
  margin-top:  30px;
}
.head_shot img {
  height: 125px;
  border: 2px solid #333;
  border-radius: 100%;
  display: block;
  margin: 0 auto;
}
h2 {
  font-family: 'Clicker Script', cursive;
  font-size: 30px;
  color: #2F2933;
  text-align: center;
  margin: 0;
}
.line {
  border-top: 1px solid #FF0000;
  max-width: 500px;
  margin: 0 auto;
  margin-top: 0px;
}
.card {
  opacity: 0;
    -webkit-animation: fade-in 3s ease-in 1;
    -moz-animation: fade-in 3s ease-in 1;
    -o-animation: fade-in 3s ease-in 1;
    animation: fade-in 3s ease-in 1;
}
@-webkit-keyframes fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.card {
  opacity: 1;
}
.fade {
  opacity:0.7;
  transition: opacity 2s ease;
}

.fade:hover {
  opacity:1;
}
.rotate {
  display: inline-block;
}

.rotate:hover {
  cursor: none;
    -webkit-transform: rotateZ(-30deg);
    -ms-transform: rotateZ(-30deg);
    transform: rotateZ(-30deg);
}
.text_scroll p {
  font-family: 'Gruppo', cursive;
  height: 20px;
  float: left;
  white-space: nowrap;
  position: relative;
  font-size: 55px;
  color: #2F2933;
  font-weight: bold;
  margin-top:  0px;
}
.text_scroll {
  max-height: 50px;
  max-width: 700px;
  margin: 0 auto;
  padding-left: 10px;
  float: left;
}
.scrolling_words {
  overflow: hidden;
  position: relative;
  height: 50px;
  padding-left: 10px;
  margin-top: 78px;
}
.scrolling_words  p {
  font-family: 'Gruppo', cursive;
  margin: 0 0 26px;
  color: #2F2933;
  position: relative;
  white-space: nowrap;
  -webkit-animation: move 8s 1s infinite;
  -moz-animation: move 8s 1s infinite;
  -o-animation: move 8s 1s infinite;
  animation: move 8s 1s infinite;
  font-size: 50px;
  letter-spacing: 2px;
}
@-webkit-keyframes move {
  0%  { top:  0px; }
  20% { top: -45px; }
  40% { top: -90px; }
  60% { top: -175px; }
  60% { top: -140px; }
  80% { top: -0px; }
  80% { top: -0px; }
}
.octocat {
  clear: both;
}
.octocat img {
  height: 50px;
}
.octocat {
  width: 50px;
  display: block;
  margin:  5px 0 0  5px;
  padding-top:0px;
}
.grow:hover {
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  transition-duration: 1s;
}
/*rotate*/
#social a:hover { background-color: transparent;opacity:0.7; } #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
</style>
<div class="card">
<div class="head_shot">
<img src="http://1.bp.blogspot.com/-9iaLkuIma-I/Vug88ZGpdJI/AAAAAAAAY7w/rK2tpG6AU4MiZHIw1zGZkO-5IgtiOtoCw/s1600-r/Logo-mys2010.png"alt="Head Shot"/ class="fade"></div>
<div class="name">
<h2><a href="http://myscript2010s.blogspot.co.id" target="_blank" title="Visit Mys2010">Myscript<div class="rotate">
2010</div>
</h2>
</div>
<div class="line">
</div>
<center>
<div id="social">
<a title="Facebook" href="https://www.facebook.com/learn.editing.myscript2010" target="_blank">  <img src="http://3.bp.blogspot.com/-8ITKvl307W8/Vqi0VWVfyuI/AAAAAAAAX0Y/5iC8VAlOY2o/s1600-r/facebook-mys2010.png" name="e902" border="0" width="50" height="50" " style="margin-right:1px;" alt="icon"/><a title="JsFidle-Mys2010" href="https://jsfiddle.net/user/dashboard/"target="_blank"><img src="http://4.bp.blogspot.com/-r_OIWTWapEc/VulOJwqVEpI/AAAAAAAAY-g/pfsJj1z6xY8qWe5jwV6XzKxMhRh_GzN5A/s1600-r/Js-myscript2010.png" name="e902" border="0" width="50" height="50" " style="margin-right:1px;" alt="icon"/></a><a title="Mys2010 Github" href="https://gist.github.com/Myscript2010" target="_blank"> <img src="http://3.bp.blogspot.com/-jXuDkG-oca8/Vqi2odTTKPI/AAAAAAAAX2E/ojJ2ZQBueq8/s1600-r/github-mys2010.png" name="e902" border="0" width="50" height="50" " style="margin-right:1px;" alt="icon"/></a> <a title="Mys2010 on Codepen" href="http://codepen.io/Myscript2010/pen/vGyMaW" target="_blank"> <img src="http://4.bp.blogspot.com/-gaxSIfw2m9U/Vuk04Ubv5rI/AAAAAAAAY9g/C0ZIFTttiuAGWuQoRhviJIzAEkN6wGN1A/s1600-r/icon_codepen-mys2010.png" name="e902" border="0" width="50" height="50" " style="margin-right:1px;" alt="icon"/></a> <a title="Twitter" href="https://twitter.com/myscript2010s" target="_blank"> <img src="http://1.bp.blogspot.com/-k1_c-TEOOWE/Vqi0wCBSzLI/AAAAAAAAX1g/rdrWa0OVUAM/s1600-r/twitter-mys2010.png" name="e902" border="0" width="50" height="50" " style="margin-right:1px;" alt="icon"/></a> </div>
</center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<a href="http://sample-mys2010.blogspot.co.id/p/statis-home.html" target="_blank" title="M 2010 Hover">
<font size="2" color="green"face="Agency FB"><b>EDITED BY. MYSCRIPT2010</b> </a>
<header>
<div class="Top Title Header">
<div align="center">
<a href="http://codepen.io/raveve/pen/gbgWGm" target="_blank" title="Raven Askew on Codepen"><font size="2" color="green"face="Agency FB"><b>SOURCES BY. RAVEN ASKEW</b></a>
</div>
</header>
<link rel="stylesheet" href="css/main.css">
<link href='http://fonts.googleapis.com/css?family=Clicker+Script|Gruppo' rel='stylesheet' type='text/css'>
Penjelasan :
Ganti link title, teks serta link gambar sesuai keinginan
Edited by. Mys2010 on Codepen
Sources by. Raven Askew on Codepen
DEMOSHOW
Labels:

Animated Cube Slider

Memasang kode Animated Cube Slider
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  :  
Get Blank Template  edit background warna sesuai keinginan Kemudian 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:0px;
 padding:0px;}
body
{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhel8gRjfvpIYMEcACObTfwn1Oj9Rt5vO3HYRNeMmd0_RHsAaLkw9JPxBn9BunEYhqy-Og_VQrsS50InyBFXvmScVIellEC3DtJts8GrCSLN-QwiRCbmhavqDqWE9NQmKYwniah35owb14/s1600-r/Triplek-mys2010s.jpg);
 background-size:cover;
 background-repeat:no-repeat;
 font-family: "Open Sans", sans-serif;
 font-size: 11px;
 }
/* HEADER*/
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: green;
  border-bottom: 3px solid #dad;
}
/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 50px;
margin: auto;
font-agency fb: Arial, sans-serif;
font-size: 17px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #fff;
background: #333;
border-top: 2px solid #f0f;
z-index: 9999;
}
.title {
  text-align: center;
  margin: 40px;
}

 .title h1, .title p {
   margin: 0;
 }

.slider {
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
 width: 200px;
 height: 200px;
  margin: auto;
 -webkit-perspective: 600px;
         perspective: 600px;
}

 .slider * {
  -webkit-transition: all 1s cubic-bezier(0.5, -0.75, 0.2, 1.5);
          transition: all 1s cubic-bezier(0.5, -0.75, 0.2, 1.5);
 }

 .container {
  width: inherit;
  height: inherit;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateY(0deg) rotateX(0deg);
          transform: rotateY(0deg) rotateX(0deg);
 }

  .slide, .slide:after, .slide:before {
   display: block;
   width: inherit;
   height: inherit;
   background: url('#');
   position: absolute;
   -webkit-transform-style: preserve-3d;
           transform-style: preserve-3d;
   background-size: cover;
   background-position: center;
  }

  .slide.x {
    -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg);
  }

   .slide.x:after {
    content: '';
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTv3FJcLqB2X-M0cv5HijKiVioWfAq0IWFZwMtJGiN3TAmOOWj2ZT_tsJA4TInC64J6XVbR74-KoM8mHyuD8gC7dSaXi-vq_iB83rhTxFlWgWh_cyws955h91S3YpGBvQKFjQQA6JTBmw/s1600-r/yayang7.jpg');
    -webkit-transform: translateZ(100px) rotateZ(-90deg);
            transform: translateZ(100px) rotateZ(-90deg);
   }

   .slide.x:before {
    content: '';
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMZbmlA-aG5FFLSA4h4WYBApHv_9ysYAwaz360n3HpFKyeTxEYjAjizvJsRZzPYkrXgVnz-u0Yw_-vxtGaFGbV9gOEEGynwe-3LJ1ZVSwldYEYRJ21Y6gTPR3Y5Kbrb118PvEg65c66vU/s1600-r/yayang6.jpg');
    -webkit-transform: translateZ(-100px) rotateZ(-90deg);
            transform: translateZ(-100px) rotateZ(-90deg);
   }

  .slide.y {
    -webkit-transform: rotateX(90deg);
            transform: rotateX(90deg);
  }

   .slide.y:after {
    content: '';
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP5_WJ_KzK5wjpa5lHo0QhJqqqOlP-N2_bRJUWTgeKYb5_W-kRbo6bJOiYF3fn0KbU8661ltYv_8Xpq9DrfZ0MCW-ZW3jdMdNgRqapde3GIciVi7HiW-4SxKpJtwxsz50uyAipBcZMCSY/s1600-r/yayang5.jpg');
    -webkit-transform: translateZ(100px) scale(-1);
            transform: translateZ(100px) scale(-1);
   }

   .slide.y:before {
    content: '';
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Z-eoplWNyRVj7NGC2E1UTeSCg5c7n-qFiGmtttq4PRv7aC-XvJKTo0uhiiX0H1RNPWw1lPO-Zml-Dxa3I8uif4p6BXqJQEqc4th_RS49RvbxCgREcm-OMoX2hKQ5C81I-QSmkKGAN0c/s1600-r/yayang3.jpg');
    -webkit-transform: translateZ(-100px);
            transform: translateZ(-100px);
   }

  .slide.z {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }

   .slide.z:after {
    content: '';
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Z-eoplWNyRVj7NGC2E1UTeSCg5c7n-qFiGmtttq4PRv7aC-XvJKTo0uhiiX0H1RNPWw1lPO-Zml-Dxa3I8uif4p6BXqJQEqc4th_RS49RvbxCgREcm-OMoX2hKQ5C81I-QSmkKGAN0c/s1600-r/yayang3.jpg');
    -webkit-transform: translateZ(100px);
            transform: translateZ(100px);
   }

   .slide.z:before {
    content: '';
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD5a4VGOWPaV4lg0GDkh27ak73E5J0PyjqAw9ArbJoe8iN1UKLHi3HElm08ud2eZQoYNSUDhZyTrkVOBSJqxs5_aY6cN3sqMsl1ad_kowX32AdjMrfw_2pgx3ujqmPvQCRQZTcvLKiPss/s1600-r/yayang1.jpg');
    -webkit-transform: translateZ(-100px);
            transform: translateZ(-100px);
   }


  .container {
   -webkit-animation: rotate 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2);
   animation: rotate 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2);
  }

  @-webkit-keyframes rotate {
   0%, 10% {-webkit-transform: rotateY(0deg) rotateX(0deg);transform: rotateY(0deg) rotateX(0deg);}
   15%, 20% {-webkit-transform: rotateY(180deg) rotateX(0deg);transform: rotateY(180deg) rotateX(0deg);}
   25%, 35% {-webkit-transform: rotateY(180deg) rotateX(270deg);transform: rotateY(180deg) rotateX(270deg);}
   40%, 50% {-webkit-transform: rotateY(180deg) rotateX(90deg);transform: rotateY(180deg) rotateX(90deg);}
   55%, 65% {-webkit-transform: rotateY(-90deg) rotateX(90deg);transform: rotateY(-90deg) rotateX(90deg);}
   70%, 80% {-webkit-transform: rotateY(90deg) rotateX(90deg);transform: rotateY(90deg) rotateX(90deg);}
   90%, 95% {-webkit-transform: rotateY(0deg) rotateX(90deg);transform: rotateY(0deg) rotateX(90deg);}
  }

  @keyframes rotate {
   0%, 10% {-webkit-transform: rotateY(0deg) rotateX(0deg);transform: rotateY(0deg) rotateX(0deg);}
   15%, 20% {-webkit-transform: rotateY(180deg) rotateX(0deg);transform: rotateY(180deg) rotateX(0deg);}
   25%, 35% {-webkit-transform: rotateY(180deg) rotateX(270deg);transform: rotateY(180deg) rotateX(270deg);}
   40%, 50% {-webkit-transform: rotateY(180deg) rotateX(90deg);transform: rotateY(180deg) rotateX(90deg);}
   55%, 65% {-webkit-transform: rotateY(-90deg) rotateX(90deg);transform: rotateY(-90deg) rotateX(90deg);}
   70%, 80% {-webkit-transform: rotateY(90deg) rotateX(90deg);transform: rotateY(90deg) rotateX(90deg);}
   90%, 95% {-webkit-transform: rotateY(0deg) rotateX(90deg);transform: rotateY(0deg) rotateX(90deg);}
  }


.shadow {
 display: block;
 width: 200px;
 height: 200px;
 background: rgba(0,0,0,0.75);
 position: absolute;
 top: 60%;
 -webkit-transform: rotateX(90deg);
         transform: rotateX(90deg);
 z-index: -1;
 -webkit-filter: blur(20px);
 filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><fegaussianblur stdDeviation="20" /></filter></svg>#filter');
 -webkit-filter: blur(20px);
         filter: blur(20px);
 left: 0;
 right: 0;
 margin: auto;
 -webkit-animation: rotateShadow 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2);
 animation: rotateShadow 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2);
}

 @-webkit-keyframes rotateShadow {
  0%, 10% {-webkit-transform: rotateY(0deg) rotateX(90deg);}
  15%, 20% {-webkit-transform: rotateY(180deg) rotateX(90deg);;}
  20.1%, 20.9% {-webkit-transform: rotateY(180deg) rotateX(90deg) translatez(5px);}
  25%, 35% {-webkit-transform: rotateY(180deg) rotateX(90deg);}
  35.1%, 35.9% {-webkit-transform: rotateY(180deg) rotateX(90deg) translatez(-5px);}
  40%, 50% {-webkit-transform: rotateY(180deg) rotateX(90deg);}
  55%, 65% {-webkit-transform: rotateY(0deg) rotateX(90deg);}
  70%, 80% {-webkit-transform: rotateY(180deg) rotateX(90deg);}
  90%, 99% {-webkit-transform: rotateY(90deg) rotateX(90deg);}
  99.1%, 99.9% {-webkit-transform: rotateY(90deg) rotateX(90deg) translatez(-5px);}
 }

 /*@keyframes rotateShadow {
  0%, 10% {transform: rotateY(0deg) rotateX(90deg);}
  15%, 20% {transform: rotateY(180deg) rotateX(90deg); opacity: 1; filter: alpha(opacity=100);}
  20.1%, 20.9% {transform: rotateY(180deg) rotateX(90deg) translatez(10px); opacity: 0.95; filter: alpha(opacity=95);}
  25%, 35% {transform: rotateY(180deg) rotateX(90deg); opacity: 1; filter: alpha(opacity=100);}
  35.1%, 35.9% {transform: rotateY(180deg) rotateX(90deg) translatez(-10px); opacity: 0.95; filter: alpha(opacity=95);}
  40%, 50% {transform: rotateY(180deg) rotateX(90deg);}
  55%, 65% {transform: rotateY(0deg) rotateX(90deg);}
  70%, 80% {transform: rotateY(180deg) rotateX(90deg);}
  90%, 99% {transform: rotateY(0deg) rotateX(90deg);}
  99.1%, 99.9% {transform: rotateY(180deg) rotateX(90deg) translatez(5px); opacity: 0.95; filter: alpha(opacity=95);}
 }*/

/*
Credit */

 .credit {
  position: fixed;
  bottom: 22px;
  left: 0;
  right: 0;
  margin: auto;
  width: 200px;
  text-align: center;
 }
 .credit a {
  font-weight: 900;
  color: blue;
  text-decoration: none;
  -webkit-transition: all .15s linear;
          transition: all .15s linear;
  background: url(#)no-repeat right;
  background-size: 12px;
  padding-right: 20px !important;
  -filter: invert(1);
  -webkit-filter: invert(1);
  -moz--filter: invert(1);
 -o--filter: invert(1);
 }
 .credit a:hover {
  color: tomato;
 }
<div class="title">
<h1>
<a href="http://codepen.io/Myscript2010/full/qZqqxy/" target="_blank" title="Slider Mys2010 on Codepen">
Animated Cube Slider</h1>
</a>
<p>
CSS Only</p>
</div>
<div class="slider">
<div class="container">
<div class="slide x">
</div>
<div class="slide y">
</div>
<div class="slide z">
</div>
</div>
<div class="shadow">
</div>
</div>
<p class="credit">
<header>
<div class="Top Title Header">
<div align="center">
<font size="3" color="aqua"face="agency fb">Sources by. <a href="http://codepen.io/hrtzt/pen/JdYaEZ" target="_blank" title="Slider on Codepen"><font size="3" color="white"face="agency fb">Alberto Hartzet </a></font> on Codepen </a>
</div>
</header>
<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<p>Edited by <span><a href="http://sample-mys2010.blogspot.co.id/p/statis-home.html"target="_blank" title="Hover Mys2010">Myscript2010s</a></span></p>
Penjelsan :
Ganti Link Gambar dan Link Title sesuai keinginan
Edited by. Mys2010 on Codepen
Sources by. Alberto Hartzet on Codepen
DEMOSHOW
Labels:

Dark UI Elements

Memasang kode Dark UI Elements 
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  :  
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
/*Dark Ui elements */

@import url("http://fonts.googleapis.com/css?family=Lobster");
@import url(http://fonts.googleapis.com/css?family=Lobster);
@font-face {
  font-family: 'ModernPictogramsNormal';
  src: url("http://s202540075.onlinehome.us/codepen/fonts/modernpics-webfont.eot");
  src: url("http://s202540075.onlinehome.us/codepen/fonts/modernpics-webfont.eot?#iefix") format("embedded-opentype"), url("http://s202540075.onlinehome.us/codepen/fonts/modernpics-webfont.woff") format("woff"), url("http://s202540075.onlinehome.us/codepen/fonts/modernpics-webfont.ttf") format("truetype"), url("http://s202540075.onlinehome.us/codepen/fonts/modernpics-webfont.svg#ModernPictogramsNormal") format("svg");
  font-weight: normal;
  font-style: normal;
}
body {#);color:red;height:100%;overflow:hidden;}
body {
  margin: 0;
  padding: 0;
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGBQiRS9V6581fHrVfGb-ApF9Lt6utiXjcaosk6_BpT7SdE-G46BYCDYiqiQhYRV8zHCjF9aXrkrVMq_EMtwSusCfmy8L0WzeTZy3dhJO8cpSnFgyTU8KaYtMW_ExGA0x3P_nmy_QLJvgR/s1600-r/bg-mys2010.jpg") repeat;
  padding: 10px;
}

a, input[type='radio'] + label {
  text-align: center;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  font-family: 'Trebuchet MS', Helvetica, sans-serif;
}

fieldset {
  border: 1px solid #2223;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  margin: 20px 0 0 0;
  min-height: 90px;
  line-height: 90px;
  position: relative;
  float: left;
  margin-right: 20px;
  padding: 20px;
}


input[type='radio'] {
  display: none;
}

/* -------------------
    Default State
-------------------- */
a.glowBtn, input[type='radio'] + label {
  z-index: 10;
  margin: 0 10px 10px 0;
  width: 115.5px;
  height: 37.29px;
  line-height: 36.3px;
  position: relative;
  font-size: 13.2px;
  letter-spacing: .1em;
  color: #0e0e0e;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
  font-weight: bold;
  background-image: url('');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #111111), color-stop(100%, #000000));
  background-image: -moz-linear-gradient(#111111, #000000);
  background-image: -webkit-linear-gradient(#111111, #000000);
  background-image: linear-gradient(#111111, #000000);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 3px rgba(255, 255, 255, 0.2);
  -webkit-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 3px rgba(255, 255, 255, 0.2);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 3px rgba(255, 255, 255, 0.2);
}

a.glowBtn:after, input[type='radio'] + label:after {
  z-index: -1;
  content: '';
  cursor: pointer;
  top: 1.98px;
  margin-left: 50%;
  left: -55px;
  width: 110px;
  height: 33px;
  display: block;
  position: absolute;
  background-image: url('');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #444444), color-stop(100%, #373738));
  background-image: -moz-linear-gradient(#444444, #373738);
  background-image: -webkit-linear-gradient(#444444, #373738);
  background-image: linear-gradient(#444444, #373738);
  -moz-box-shadow: inset 0 2px 1px -1px rgba(255, 255, 255, 0.2), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.2), 0 12px 12px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 2px 1px -1px rgba(255, 255, 255, 0.2), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.2), 0 12px 12px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 2px 1px -1px rgba(255, 255, 255, 0.2), inset 0 -2px 1px -1px rgba(0, 0, 0, 0.2), 0 12px 12px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3);
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

/* -------------------
    Hover States
-------------------- */
a.glowBtn:hover, a.hover, input[type='radio'] + label:hover {
  color: #AEAEAE;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
}

a.glowBtn:hover:after, a.hover:after, input[type='radio'] + label:hover:after {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU0NTQ1NCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM3MzczOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #545454), color-stop(100%, #373738));
  background-image: -moz-linear-gradient(#545454, #373738);
  background-image: -webkit-linear-gradient(#545454, #373738);
  background-image: linear-gradient(#545454, #373738);
}

/* -------------------
    Active States
-------------------- */
a.glowBtn:active, a.active, a.active:hover, input[type='radio']:checked + label {
  color: #00ccff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 0px 30px rgba(0, 255, 255, 0.7);
  -moz-box-shadow: 0 -1px 0 rgba(0, 193, 255, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 20px rgba(0, 193, 255, 0.1), 0 0 30px rgba(0, 193, 255, 0.1);
  -webkit-box-shadow: 0 -1px 0 rgba(0, 193, 255, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 20px rgba(0, 193, 255, 0.1), 0 0 30px rgba(0, 193, 255, 0.1);
  box-shadow: 0 -1px 0 rgba(0, 193, 255, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 20px rgba(0, 193, 255, 0.1), 0 0 30px rgba(0, 193, 255, 0.1);
}

a.glowBtn:active, a.active, a.active:hover {
  text-shadow: 0 -1px 0 black, 0 0px 30px cyan, 0 0px 50px cyan;
}

a.glowBtn:active:after, a.active:after, a.active:hover:after, input[type='radio']:checked + label:after {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzI2MjYyNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzJkMmQyZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #262627), color-stop(100%, #2d2d2e));
  background-image: -moz-linear-gradient(#262627, #2d2d2e);
  background-image: -webkit-linear-gradient(#262627, #2d2d2e);
  background-image: linear-gradient(#262627, #2d2d2e);
  -moz-box-shadow: inset 0 5px 6px rgba(0, 0, 0, 0.3), inset 0 0 4px rgba(0, 0, 0, 0.9), 0 0 0 black;
  -webkit-box-shadow: inset 0 5px 6px rgba(0, 0, 0, 0.3), inset 0 0 4px rgba(0, 0, 0, 0.9), 0 0 0 black;
  box-shadow: inset 0 5px 6px rgba(0, 0, 0, 0.3), inset 0 0 4px rgba(0, 0, 0, 0.9), 0 0 0 black;
}

/* -------------------
    Radio Specific Style
-------------------- */
input[type='radio'] + label {
  font-family: 'ModernPictogramsNormal', Arial, sans-serif;
  font-size: 36.66667px;
  line-height: 55px;
  letter-spacing: 0;
  width: 55px;
  height: 55px;
}

input[type='radio'] + label:after {
  top: 2.64px;
  left: -25px;
  width: 50px;
  height: 50px;
}

/* -------------------
    SuperBtn
-------------------- */
a.superBtn {
  color: #0e0e0e;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
  font-weight: bold;
  letter-spacing: .08em;
  width: 242px;
  height: 39.6px;
  line-height: 39.6px;
  position: relative;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlMzUzNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQyNDc0OCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2e3537), color-stop(100%, #424748));
  background-image: -moz-linear-gradient(#2e3537, #424748);
  background-image: -webkit-linear-gradient(#2e3537, #424748);
  background-image: linear-gradient(#2e3537, #424748);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.3), inset 0 0 0px 1px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 2px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.3), inset 0 0 0px 1px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 2px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.3), inset 0 0 0px 1px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 2px rgba(0, 0, 0, 0.4);
}

a.superBtn:after {
  width: 253px;
  height: 49.5px;
  top: -4.95px;
  margin-left: 50%;
  left: -126.5px;
  content: '';
  display: block;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJhZjFmYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE3YjJlNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2af1fc), color-stop(100%, #17b2e6));
  background-image: -moz-linear-gradient(#2af1fc, #17b2e6);
  background-image: -webkit-linear-gradient(#2af1fc, #17b2e6);
  background-image: linear-gradient(#2af1fc, #17b2e6);
  -moz-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7), 0 1px 1px rgba(255, 255, 255, 0.4), 0 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0px 3px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7), 0 1px 1px rgba(255, 255, 255, 0.4), 0 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0px 3px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7), 0 1px 1px rgba(255, 255, 255, 0.4), 0 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0px 3px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.6);
  position: absolute;
  z-index: -1;
}

/* -------------------
    SuperBtn Hover
-------------------- */
a.superBtn:hover {
  color: #AEAEAE;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU0NTQ1NCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM3MzczOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #545454), color-stop(100%, #373738));
  background-image: -moz-linear-gradient(#545454, #373738);
  background-image: -webkit-linear-gradient(#545454, #373738);
  background-image: linear-gradient(#545454, #373738);
}

a.superBtn:hover:after {
  -moz-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7), 0 1px 1px rgba(255, 255, 255, 0.4), 0 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0px 3px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 15px 5px rgba(0, 255, 255, 0.2);
  -webkit-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7), 0 1px 1px rgba(255, 255, 255, 0.4), 0 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0px 3px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 15px 5px rgba(0, 255, 255, 0.2);
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.7), 0 1px 1px rgba(255, 255, 255, 0.4), 0 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0px 3px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 15px 5px rgba(0, 255, 255, 0.2);
}

a.superBtn:active {
  color: #00ccff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 0px 30px rgba(0, 255, 255, 0.7);
  background: #333;
  -moz-box-shadow: 0 1px 0px rgba(255, 255, 255, 0.4), inset 0 3px 3px rgba(0, 0, 0, 0.7), inset 0 0 4px rgba(0, 0, 0, 0.9), 0 0 0 black;
  -webkit-box-shadow: 0 1px 0px rgba(255, 255, 255, 0.4), inset 0 3px 3px rgba(0, 0, 0, 0.7), inset 0 0 4px rgba(0, 0, 0, 0.9), 0 0 0 black;
  box-shadow: 0 1px 0px rgba(255, 255, 255, 0.4), inset 0 3px 3px rgba(0, 0, 0, 0.7), inset 0 0 4px rgba(0, 0, 0, 0.9), 0 0 0 black;
}

/* HIDE */
body {#);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:  10px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #444;
  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: 11px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #fof;
background: #333;
border-top: 2px solid #A10048;
z-index: 9999;
}
/* GRADIEND END */
<fieldset>
<a class="glowBtn" href="http://Link Title" target="_blank" title="Mys2010"><span style="color: red; font-size: 10pt;">M-2010
</span></a><span style="color: red; font-size: 10pt;"><a class="glowBtn" href="http://Link Title/" target="_blank" title="M-Hover"><span style="color: red; font-size: 10pt;">M-HOVER</span></a>
<a class="glowBtn active" href="http://Link Demoshow " title="Dark UI Elements"><span style="color: magenta; font-size: 10pt;">SLIDE AUTO
</span></a><span style="color: magenta; font-size: 10pt;"><a class="glowBtn active" href="http://Link Download" title="Download Slide  "><span style="color: magenta; font-size: 10pt;">DOWNLOAD  </span></a>
<a class="glowBtn active" href="http://Link Demoshow" title="Slider UI Elements">SLIDE AUTO
</a><a class="glowBtn active" href="http://Link Download" title="Download Slide 2">DOWNLOAD</a>
<a class="glowBtn" href="http://Link Title" target="_blank" title="Mys2010">GITHUB
</a><a class="glowBtn" href="http://Link Title" target="_blank" title="M-Hover">CODEPEN</a>
</span></span></fieldset>
<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<a href="http://Link Title" target="_blank" title="Animated Cube">
Your Title </a>
<header>
<div class="Top Title Header">
<div align="center">
<span style="color: green; font-family: Agency FB; font-size: x-small;"> <a href="http://Link Title" target="_blank" title="Dark UI Elements">Your Title </a>
</span></div>
</div>
</header></div>
</div>
Penjelasan : Edit Code yang diberi warna
Edited by. Mys2010 on Codepen
Sources by. Pfalzgraf Gyula on Codepen
DEMOSHOW Cube Slider

DEMOSHOW Dark UI Elements
Labels:

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
Labels:

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
Labels:

Dark Forest

Memasang kode Dark Forest
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
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqoB3foG-tF_vQBnul3AgwB8EjTort8EpNKoWdV632z91cyApz9vdgwgdvtRXBq9gDO71PsNE4WDi7WiVRbhZrgZPeby_8udErIs1oNXyV3v7dEOtxEsrsvE06YoY4NVxOhWLdgrOTGJGA/s1600-r/Cibeber-Cimahi-mys2010.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
  -webkit-animation: overlay infinite 12s;
          animation: overlay infinite 12s;
  content: '';
}
h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  width: 50px;
  height: 1.4em;
  -webkit-transform: translate(-50%, -100%);
          transform: translate(-50%, -100%);
  color: rgba(255, 255, 255, 0.55);
  font-family: agency fb, helvetica neue, sans serif;
  font-size: 1.4em;
  font-weight: 500;
  line-height: 1.4em;
  letter-spacing: .35em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -webkit-animation: opacity infinite 12s;
          animation: opacity infinite 12s;
}
h1 span {
  display: block;
  position: absolute;
  top: 0;
}
h1 span:nth-child(1) {
  right: 100%;
  margin-right: -.4em;
}
h1 span:nth-child(2) {
  left: 100%;
}
h1::before, h1::after {
  display: block;
  position: absolute;
  top: 50%;
  width: 2px;
  height: 30px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.55);
  content: '';
}
h1::before {
  left: 18px;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: translateZ(-50%) rotateX(-90deg);
          transform: translateZ(-50%) rotateX(-90deg);
  -webkit-animation: transform ease-out infinite 12s;
          animation: transform ease-out infinite 12s;
}
h1::after {
  right: 18px;
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
  -webkit-transform: translateZ(-50%) rotateX(-90deg);
          transform: translateZ(-50%) rotateX(-90deg);
  -webkit-animation: transform ease-out infinite 12s;
          animation: transform ease-out infinite 12s;
}

@-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;
  }
}
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: #000;
  border-bottom: 3px solid #333;
}

/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 40px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 5px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #333;
background: #000;
border-top: 2px solid  #333;
z-index: 9999;
<h1>
<span><a href="http://myscript2010s.blogspot.co.id" target="_blank" title="Myscript2010"> Mys2010</a></span><span><a href="http://sample-mys2010.blogspot.co.id/p/statis-home.html" target="_blank" title="Css Effect">Effect</a></span></h1>
<header>
<div class="Top Title Header">
<div align="center">
<span style="color: #ddaadd; font-family: &quot;arial&quot;; font-size: x-small;"><a href="https://sites.google.com/site/fileblogfor/code/DarkForest-mys2010.css"title="DARK FOREST"><b>DOWNLOAD</b></a>
</div>
</div>
</header>
<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">.
<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></div>
Explanation:
If you want this code, please download or copy and paste
Edited by. Mys2010 on Codepen
Sources by. Michiel Bijl on Codepen
DEMOSHOW
Labels:

Memasang Kode Teks Gaya Koran

Memasang kode Teks Gaya Koran
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
<style type="text/css"> 
body
{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjN9OE4kOI7tGMFwWaS34Krv95CdTn21puAHet25eWJHI3rAJd1FpewZTDtG_Eg5cJ2mbVyTSkhWmFEHLWfiza_9gFGIuafAtbmMQzfbALQx6xaUML-RMD8FTxjV4JSsTArgQEbClHYt93/s1600-r/koran-mys2010.png);
 background-size:cover;
 background-repeat:no-repeat;
 font-family: "Open Sans", sans-serif;
 font-size: 13px;
 }
 
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: #F5F5F5;
  border-bottom: 3px solid #dad;
}

.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 40px;
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: #F5F5F5;
border-top: 2px solid #f0f;
z-index: 9999;
}
 .koran{
    -moz-column-count:4; /* Firefox */
    -webkit-column-count:4; /* Safari and Chrome */
    column-count:4;
    -moz-column-gap:100px; /* Firefox */
    -webkit-column-gap:100px; /* Safari and Chrome */
    column-gap:100px;
    -moz-column-rule-style:outset; /* Firefox */
    -webkit-column-rule-style:outset; /* Safari and Chrome */
    column-rule-style:outset;
    -moz-column-rule-color:#ff0000; /* Firefox */
    -webkit-column-rule-color:#ff0000; /* Safari and Chrome */
    column-rule-color:#ff0000;}
    </style>
<div class="koran">
 Your text here
    </div>
<header>
<div class="Top Title Header">
<div align="center">
<span style="color: #ddaadd; font-family: &quot;arial&quot;; font-size: x-small;"><b>SEARCH ENGINE OPTIMIZATION</b></span></div>
</div>
</header>
<div class="ap" id="ap">
<div align="center">
<code></code>
<span style="color: green; font-family: &quot;agency fb&quot;; font-size: 13;">Copyright2016 Cibeber Cimahi</span></div>
</div>
Penjelasan :
Edit Jumlah kolom, Ganti background gambar, teks dan kode warna sesuai keinginan
Sources by. Allsources
Edited by. Mys2010 on Codepen
DEMOSHOW
Labels:

My Logo 2 

html {
  font: 13px 'Open Sans', 'Helvetica', Sans-serif;
}
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: #444;
  border-bottom: 3px solid #333;
}

/*Bg Animated*/

html,
body{
      background: #444;    
 }
i {
  -webkit-animation: bounce 1.125s ease-in-out infinite alternate;
          animation: bounce 1.125s ease-in-out infinite alternate;
  display: inline-block;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
          transform: translate3d(0, 0, 0) scale(1);
  text-shadow: rgba(0, 0, 0, 0.35) 0 0 0.02222em;
  font-family: "Product Sans", "Helvetica Neue", "Helvetica", sans-serif;
  font-size: 20vmin;
  font-weight: 700;
  font-style: normal;
  white-space: nowrap;
}
i:nth-child(1) {
  -webkit-animation-delay: 0.15s;
          animation-delay: 0.15s;
  color: #4285f4;
}
i:nth-child(2) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
  color: #ea4335;
}
i:nth-child(3) {
  -webkit-animation-delay: 0.45s;
          animation-delay: 0.45s;
  color: #fbbc05;
}
i:nth-child(4) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  color: #4285f4;
}
i:nth-child(5) {
  -webkit-animation-delay: 0.75s;
          animation-delay: 0.75s;
  color: #34a853;
}
i:nth-child(6) {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
  color: #ea4335;
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
            transform: translate3d(0, 0, 0) scale(1);
    text-shadow: rgba(0, 0, 0, 0.35) 0 0 0.02222em;
  }
  100% {
    -webkit-transform: translate3d(0, -1em, 0) scale(1.1);
            transform: translate3d(0, -1em, 0) scale(1.1);
    text-shadow: rgba(0, 0, 0, 0.35) 0 0.90909em 0.2em;
  }
}

@keyframes bounce {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
            transform: translate3d(0, 0, 0) scale(1);
    text-shadow: rgba(0, 0, 0, 0.35) 0 0 0.02222em;
  }
  100% {
    -webkit-transform: translate3d(0, -1em, 0) scale(1.1);
            transform: translate3d(0, -1em, 0) scale(1.1);
    text-shadow: rgba(0, 0, 0, 0.35) 0 0.90909em 0.2em;
  }
}

/* LOGO*/

 background:#000;
}
#logo:active {
    position: relative;
    top: 1px;
}
 html {
    height: 10;
    background-color: #fff;
    background-image: linear-gradient
(135deg,#00BFFF, #00BFFF, #8A2BE2, #9932CC ,#9ACD32);
}

<div>
<p align="center">
<i>M</i><i>Y</i><i>S</i><i>2</i><i>0</i><i>1</i><i>0</i>
</div>

<p align="center">
<a href="http://demoshow-mys2010.blogspot.co.id/2016/02/logo-mys2010.html">
<img src="https://sites.google.com/site/pelajaranku1/fileku/logo-mys2010.png"
name="e902" border="0" width="300" height="200" /></a>
<font size="2" color=" green "face="Time newroman">CIBEBER CIMAHI</font>
</center>

<header>
<div class="page-wrap clearfix">
<p align="center">
<font size="2" color="green"face="arial"> 
<a href="http://demoshow-mys2010.blogspot.co.id/2015/12/
belajar-mp3-dengan-auto-slide.html" title="Myscript2010">
WEB DESIGN MYSCRIPT2010 ANIMATED LOGO</a>
<font size="2" color="#dad"face="arial">* * *</a>
</header>
Edited by. Myscript2010 on Codepen
DEMOSHOW
Labels:
Subscribe to: Posts (Atom)

Myscript2010

Home Page
 
 

M2010

Copyright © Cibeber Cimahi