07/19/16 | Mys2010 on Codepen

Memasang Kode Single Element Gif
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 class="Mys2010-styles">
body {);color:#1bdde4;height:100%;overflow:hidden;}
.ap {
position: fixed;
right: 0;
bottom:-3px;
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;
font-size:  11px; 
 border-bottom:#1bdde4;
 background: #660099;
z-index: 9999;
} 
h2 {
padding: 15px; 
background-image: linear-gradient( #1bdde4 0%, #f00 100%);
border-radius: 50% 50% 0 0/3% 3% 0 0;} 
#M-2010, #teks, #posisi, #dibawah  {
    position: absolute;
    font-size: 11px;
    margin: 2px
}
#M-2010, #teks div {
    text-decoration: underline;
    cursor: pointer
}
#teks, #posisi {
    text-align: right;
    right:  50px;
}
#teks, #dibawah {
    text-align: left;
    left:  50px;
}
 #dibawah, #posisi {
    bottom: 17px;
}

html {
  overflow-X: hidden;
  height: 100%;
}
html body {
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1bdde4), color-stop(100%, #1360d7));
  background-image: -moz-linear-gradient(top, #1bdde4 0%, #1360d7 100%);
  background-image: -webkit-linear-gradient(top, #1bdde4 0%, #1360d7 100%);
  background-image: linear-gradient(to bottom, #1bdde4 0%, #1360d7 100%);
  position: relative;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  margin: auto;
  overflow: hidden;
}
html body h1 {
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 100;
  letter-spacing: 0.5px;
  color: #FFFFFF;
  font-size: 40px;
  text-align: center;
}
 html body .sand {
  position: absolute;
  top: 10%;
  left: -10%;
  width: 120%;
  height: 1000px;
  -moz-border-radius: 50% 50% 0 0/3% 3% 0 0;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 0 0/3% 3% 0 0;
  background:  rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0 20px 30px 0 rgba(0, 0, 0, 0.3), 0 -20px 30px 0 rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 20px 30px 0 rgba(0, 0, 0, 0.3), 0 -20px 30px 0 rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 20px 30px 0 rgba(0, 0, 0, 0.3), 0 -20px 30px 0 rgba(0, 0, 0, 0.3);
}

#gif {
  background:black;
  padding:10px;
  height:80px;
  width:80px;
  border-radius:50%;
  position:absolute;
  top:calc(50% - 40px);
  left:calc(50% - 40px);
  box-shadow:
    178px 0 0 -25px yellow,
    178px 0 0 -20px white,
    -178px 0 0 -25px blue,
    -178px 0 0 -20px red, 
    0 0 0 20px red,
    0 0 0 30px blue,
    0 0 0 130px black,
    0 0 0 135px white;
  -webkit-animation: rotate 3s linear infinite;
  animation: rotate 3s linear infinite;
}
#gif:before {
  content: " ";
  position: absolute;
  height:50px;
  width:50px;
  border-radius:50%;
  top: -155px;
  left: 20px;
  background:green;
  border: 5px solid white;
  box-shadow:
    0 355px 0 -5px black,
    0 355px 0 0px orange;
  -webkit-animation: reverseRotate 3s linear infinite;
  animation: reverseRotate 3s linear infinite;
}
#gif:after {
  content: " ";
  position: absolute;
  height:50px;
  width:50px;
  border-radius:50%;
  top: -155px;
  left: 220px;
  background:red;
  border: 5px solid cyan;
  box-shadow:
    0 355px 0 -5px green,
    0 355px 0 0px blue;
  -webkit-animation: reverseRotate 3s linear infinite;
  animation: reverseRotate 3s linear infinite;
}
@keyframes rotate {
  0%   { transform: rotate(  0deg); }  
  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  { 
    background: black; 
    box-shadow:
      178px 0 0 -25px black,
      178px 0 0 -20px white,
      -178px 0 0 -25px black,
      -178px 0 0 -20px white, 
      0 0 0 20px black,
      0 0 0 30px white,
      0 0 0 130px black,
      0 0 0 135px white;
  }
  12.5%, 37.5%, 62.5%, 87.5% { 
    background: #f00; 
    box-shadow:
      178px 0 0 -25px blue,
      178px 0 0 -20px white,
      -178px 0 0 -25px blue,
      -178px 0 0 -20px white, 
      0 0 0 20px black,
      0 0 0 30px orange,
      0 0 0 130px black,
      0 0 0 135px orange;
  }    
  100% { transform: rotate(360deg); }
}
@keyframes reverseRotate {
  0%   { transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg); }  
  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  { 
    background: black; box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white; 
  }
  12.5%, 37.5%, 62.5%, 87.5% { 
    background: white; box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white; 
  }    
  100% { transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg); }
}
@keyframes segmentRotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-32000deg); }
}
@-webkit-keyframes rotate {
  0%   { -webkit-transform: rotate(  0deg); }  
  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  { 
    background: black; 
    box-shadow:
      178px 0 0 -25px yellow,
      178px 0 0 -20px #f00,
      -178px 0 0 -25px green,
      -178px 0 0 -20px #ff0, 
      0 0 0 20px black,
      0 0 0 30px #f00,
      0 0 0 130px black,
      0 0 0 135px white;
  }
  12.5%, 37.5%, 62.5%, 87.5% { 
    background: blue; 
    box-shadow:
      178px 0 0 -25px green,
      178px 0 0 -20px blue,
      -178px 0 0 -25px orange,
      -178px 0 0 -20px blue, 
      0 0 0 20px black,
      0 0 0 30px yellow,
      0 0 0 130px black,
      0 0 0 135px yellow,
  }    
  100% { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes reverseRotate {
  0%   { -webkit-transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg); }  
  10%, 15%, 35%, 40%, 60%, 65%, 85%, 90%  { 
    background: black; box-shadow: 0 355px 0 -5px black, 0 355px 0 0px white; 
  }
  12.5%, 37.5%, 62.5%, 87.5% { 
    background: white; box-shadow: 0 355px 0 -5px white, 0 355px 0 0px white; 
  }    
  100% { -webkit-transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg); }
}
@-webkit-keyframes segmentRotate {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(-32000deg); }
}

img {
  position: absolute;
  top:206px;
  left:537px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #FFFF00;
  width: 211px;
  height: 212px;
  z-index: 3;
  opacity: 1;
  animation: photo-ani 6s forwards;
}
/* Keyframes */
@keyframes line-ani {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes photo-ani {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.loader-text,
.loader-text::before,
.loader {
  position: absolute;
  top: 0;
  bottom:-9px;
  left:2px;
  right:-5px;
  margin: auto;
  width: 250px;
  height:250px;
}
.loader {
  border-color: #bd313b transparent;
  border-style: solid;
  border-width: 4px;
  border-radius: 50%;
  transform: rotate(0deg);
  animation: spin 2000ms linear infinite, color 2000ms linear infinite;
}
.loader-text::before {
  text-align: center;
margin-top:30px;
  line-height: 250px;
  content: 'MARI BELAJAR';
  display: block;
  position: absolute;
  color: #f00;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes color {
  0% {
    border-color: #bd313b transparent;
  }
  25% {
    border-color: #6d31bd transparent;
  }
  50% {
    border-color: #31bdb3 transparent;
  }
  75% {
    border-color: #81bd31 transparent;
  }
  100% {
    border-color: #bd313b transparent;
  }
}
 </style>

<div class='sand'>
</div>
<div id='gif'>
</div>
<div class="loader-2">
<img src="https://sites.google.com/site/m2010sule/poto/Logo-M2010.png"/> 
<div class="loader-text">
<div class="loader">
</div>

<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#111;"> EDITED BY. <a href="http://sample-mys2010.blogspot.co.id/2016/07/single-element-1a.html"target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; GET CODE </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#111;"> COPYRIGHT <a href="http://codepen.io/Myscript2010" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> 
</div>
<h2>
<audio id="mys2010" src="https://sites.google.com/site/pelajaranku1/mp3ku/bob-marley-Mys2010.mp3"controls="controls"></audio></a></h2>
</div>
</div>

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>    
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>   
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>    <script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script>  
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js">
</script>

<script>
      $(function () {
$('video,audio').mediaelementplayer({
success: function (mediaElement, domObject) {
var audio_src = $('li.current').attr('data-url');
mediaElement.setSrc(audio_src);
mediaElement.addEventListener('ended', function (e) {
mys2010PlayNext(e.target);
}, false);
},
keyActions: []
});
$('.mys2010-list li').click(function () {
$(this).addClass('current').siblings().removeClass('current');
var audio_src = $(this).attr('data-url');
$('audio#mys2010:first').each(function () {
this.player.pause();
this.player.setSrc(audio_src);
this.player.play();
});
});
});
function mys2010PlayNext(currentPlayer) {
if ($('.mys2010-list li.current').length > 0) {
var current_item = $('.mys2010-list li.current:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('if ' + audio_src);
} else {
var current_item = $('.mys2010-list li:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('elseif ' + audio_src);
}
if ($(current_item).is(':last-child')) {
$(current_item).removeClass('current');
} else {
currentPlayer.setSrc(audio_src);
currentPlayer.play();
}}    
</script>

Audio Code by. Jereme Causing
Single Element Code by. Zach Saucier

Design Code is Edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here Single Element Gif

Category: Single Element 1a

Mys2010 on Codepen

Single Element Gif

POPULAR

Blog Archive