06/06/16 | Mys2010 on Codepen

Memasang Kode Frame Everyday Illusion
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: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #fff 50%, transparent 90%); 
} 
#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);
}

body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; 
background-image: linear-gradient(bottom, rgba(255,255,255,.3) 26%, rgb(188,52,255) 63%, rgba( 0, 0, 0, 0.8 ) 91%);
background-image: -o-linear-gradient(bottom, rgba(255,255,255,.3) 26%, rgb(188,52,255) 63%, rgba( 0, 0, 0, 0.8 ) 91%);
background-image: -moz-linear-gradient(bottom, rgba(255,255,255,.3) 26%, rgb(188,52,255) 63%, rgba( 0, 0, 0, 0.8 ) 91%);
background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,.3) 26%, rgb(188,52,255) 63%, rgba( 0, 0, 0, 0.8 ) 91%);
background-image: -ms-linear-gradient(bottom, rgba(255,255,255,.3) 26%, rgb(188,52,255) 63%, rgba( 0, 0, 0, 0.8 ) 91%);
  -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;
  }
}

.frame-border {
 top:60px;
 position: relative;
 -moz-box-shadow: 20px 20px 36px rgba(0,0,0,0.2);
 -webkit-box-shadow: 20px 20px 36px rgba(0,0,0,0.2);
 box-shadow: 20px 20px 36px rgba(0,0,0,0.2);
 border: 20px solid transparent;
 -moz-border-image: -moz-linear-gradient(top, #fc0 0%, #990099 100%);
 -webkit-border-image: -webkit-linear-gradient(top, #fc0 0%, #990099  100%);
 border-image: linear-gradient(to bottom, #fc0 0%, #990099  100%);
 border-image-slice: 1; 
 width: 533px;
 height: 407px;
 margin: 0 auto;
}
.frame-inset {
 -moz-box-shadow:    inset 0 0 10px rgba(0,0,0,0.2);
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
    box-shadow:         inset 0 0 10px rgba(0,0,0,0.2);
 background-color: #bebebe;
 border:19px solid #f00;
 max-width:220%;
 max-height:100%;
 padding:5px20px;
}
#bkg {
  position: absolute;
  width: 90px;
  height: 90px;
  margin-left: -310px;
  margin-top: -190px;
  top: 50%;
  left:49%;  
}
#left, #right {
  display: inline-block;
  position: inherit;
  border: 20px solid transparent;
 -moz-border-image: -moz-linear-gradient(top, #660099 0%, #fc0 100%);
 -webkit-border-image: -webkit-linear-gradient(top, #660099 0%, #fc0 100%);
 border-image: linear-gradient(to bottom, #660099 0%, #fc0 100%);
 border-image-slice: 1; 
  width: 100px;
  height: 100px;
  transform: rotate(45deg);
  box-shadow: 20px -20px 10px 10px rgba(12,12,12, 0.5);
}
#left {
  top: 0px;
  left: 0px;
}
#right {
  top: 0px;
  right: 10px;
}
#sh-1 {
  display: inline-block;
  position: inherit;
  border-right: 50px solid #111; 
  width: 0px;
  height: 50px;
  top: 5px;
  left:  15px;
  transform: rotate(45deg);
  box-shadow: 20px 10px 10px 10px rgba(12,12,12, 0.5);
}
</style>

<div class='sand'>
</div>
<div class="frame-border">
<div class="frame-inset">
<a href="http://demoshow-mys2010.blogspot.co.id/2016/06/frame-everyday-illusion.html" title="M-2010">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIVRD8jp5Ogj51ovwn1uP_YYhBNAu2AzxGntUK2Rbvt0JojupGB9SGvhv6zM0ieRDpaylFxpV1eSKgxY_-0JVyBVx8DQZ2GqD9lH5D-0RvLqB4PojzMQ5Ssl3Uy5JEv2U_OyTzaG0QKhY/s1600/M-2010.jpg" title="Myscript2010" width="750" height="610"></a>
</div>
</div>
<div id='bkg'>
<div id='right'>
</div>
<div id='left'>
</div>
<div id='sh-1'>
</div>
<div id='sh-2'>
</div>
</div>
</div>

<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#222;"> EDITED BY. <a href="https://Link Download"title="Download Full Code"><span style="color: #1919B3; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#222;"> COPYRIGHT <a href="http://sample-mys2010.blogspot.co.id/2016/06/frame-everyday-illusion.html"target="_blank" title="Mari Belajar"><span style="color: #1919B3; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; LET'S STUDY</a> 
</div>
<h2>
<audio id="mys2010" src="https://sites.google.com/site/laguhiburan/mp3-1/waliBaik_mys2010.mp3"controls="controls"></audio></h2>
</a></div>
</div>

<ul class="mys2010-list">
<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>

Everyday Illusion code by. Aleks
Work hard, dream big Code by. Colin Howeth

Design code is edited by. Mys2010 In Codepen

DEMOSHOW

If you want to directly copy  &  paste you canDownload Here  Frame Everyday Illusi

Category: Frame Everyday Illusion

Mys2010 on Codepen

Frame Everyday Illusion

POPULAR

Blog Archive