Mys2010 on Codepen | SEO Friendly Responsive Blogger Myscript2010s

HomeAll Tutorials

Catch the ball

Memasang Kode Catch the ball with Audio Mp3
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 type="text/css">
body {background-image: url();color:red;height:100%;overflow:hidden;}
body {      
  text-shadow: 
    0 0 .4em currentcolor, 
    0 0 .35em yellow,
    0 0 .5em orange,
    0 0 1em red,
    0 0 2em white;
} 
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:-4px;
  width: 100%;
text-align: center;
font-size:  6px;
background: linear-gradient(270deg,#660099, #660099, rgba(255, 0, 0, 0.60), #660099, #660099);
  border-bottom: 3px solid #333;  
-webkit-animation: shadow 6s ease-in-out infinite;
          animation: shadow 6s ease-in-out infinite;
}
.ap {
position: fixed;
right: 0;
bottom:-19px;
left: 0;
height: 70px;
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;
background: linear-gradient(270deg,#660099, #660099, rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60), #660099, #660099);
border-top: 2px solid rgba(46, 56, 79, 0.85);
z-index: 9999;
} 
h2 {
padding:15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #333 50%, transparent 90%); 
-webkit-animation: shadow 1s ease-in-out infinite;
          animation: shadow 1s ease-in-out infinite;
} 
/*Text Bawah1*/  
M-2010, #teks, #posisi, #dibawah, span {
  font: 900 15vw Raleway;
  position: relative;
  display: inline-block;
}
#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:28px;
 -webkit-animation: shadow 6s ease-in-out infinite;
          animation: shadow 6s ease-in-out infinite;
}
@keyframes shadow {
  0% {
    text-shadow: 0 0 2px  #B0E0E6 , 
0 0 8px  #B0E0E6  , 0 0 10px  #B0E0E6 , 
0 0 20px  #B0E0E6 , 0 0 30px  #B0E0E6 , 
0 0 40px  #B0E0E6, 0 0 50px  #B0E0E6 , 
0 0 80px  #B0E0E6;
  }
  50% {
      text-shadow: 0 12px 7px rgba(255, 0, 0, 0.8),
 0 5px 15px rgba(0, 0, 0, 0.90), 0 0 50px rgba(0, 0, 0, 0.90),
 0 -10px 2px rgba(255, 0, 0, 0.8);
  }
 100% {
    text-shadow: 0 0 2px     #800080  , 
0 0 8px     #800080  , 0 0 10px     #800080  , 
0 0 20px     #800080  , 0 0 30px     #800080  , 
0 0 40px     #800080  , 0 0 50px     #800080  , 
0 0 80px     #800080  ;
  } 
}

#gradient { 
position: fixed; 
bottom:-119px; 
width: 600%;
height: 600%;
left:-20px;
position: absolute;
background: linear-gradient(270deg, #9400D3, #003366, #b27000, #06617d, #CC0099, #A10048, #067370, #B0E0E6, #009999, #330099, #B20000, #8E006B,  #8B4513, #CC0099, #87CEEB, #0066B3,  #DC143C, #4B0082 ,  #8B008B, #FF7F50, #DDA0DD, #6B006B, #B0E0E6 , #990099 ,   #D8BFD8, #40E0D0 ,   #DA70D6, #FF69B4, #9400D3  );
background-size: 800% 800%; 
-webkit-animation: colors 460s ease infinite;
-moz-animation: colors 460s ease infinite;
animation: colors 460s ease infinite;
}
@-webkit-keyframes colors {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes colors {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes colors { 
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}

.container{
  position:relative;
  width:800px;
  height:600px;
  margin:-75px auto;
  padding-top:90px;
}
.gatito{
  position:absolute;
  margin:-50px 0;
}
.circu{
  position:relative;
  width:291px;
  height:90px;
  border-radius:100%;
  background:rgba(255,255,255,.1);
  margin:390px auto; 
}
.cat{
  position:absolute;
  display:block;
  width: 149px;
  height: 162px;
  border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;
  background:#ccc;
  border:1px solid gray;
  border-top:3px solid gray;
  margin:-70px 70px;
  animation:baja9 3s alternate infinite;
  -moz-animation:baja9 3s alternate infinite;
  -webkit-animation: baja9 3s alternate infinite;
}
.head{
  position:absolute;
  margin:3px -5px;
  animation:baja 3s alternate infinite;
  -moz-animation:baja 3s alternate infinite;
  -webkit-animation: baja 3s alternate infinite;
}
.head7{
   position:absolute;
 display:block;
  width: 142px;
  height: 135px;
  border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;
  background:#ccc;
  border:2px solid gray;
  margin:-192px 75px;
}
.ore{
  position:absolute;
  width:70px;
  height:90px;
  border-radius:50px 500px 50px 500px;
  background:#94948c; 
  -webkit-transform: rotate(12deg);
   transform: rotate(12deg); 
  margin:-201px 50px;
  border:7px solid #d9d9d3;
  animation:sube3 3s alternate infinite;
  -moz-animation:sube3 3s alternate infinite;
  -webkit-animation:sube3 3s alternate infinite;
}
.ore3{
  position:absolute;
  width:70px;
  height:90px;
  border-radius:500px 50px 500px 50px;
  background:#94948c; 
  -webkit-transform: rotate(-12deg);
   transform: rotate(-12deg); 
  margin:-201px 158px;
  border: 7px solid #d9d9d3;
animation:sube7 3s alternate infinite;
  -moz-animation:sube7 3 alternate infinite;
  -webkit-animation:sube7 3s alternate infinite;
}
.eyes{
  position:absolute;
  width: 43px;
  height: 43px;
  border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;
  background:white;
  border:1px solid black;
margin:50px 12px; 
}
.iris{
 position:absolute;
  width:30px;
  height:30px;
  border-radius:100%;
  background:black;
  margin:0px 3px;
    animation:gira3 1s alternate infinite;
  -moz-animation:gira3 1s alternate infinite;
  -webkit-animation:gira3 1s alternate infinite;
}
iris::before{
  content:"";
  position:absolute;
  width:7px;
  height:7px;
  border-radius:100%;
  background:white;
  margin:3px 5px;
   
}
.eyes3{
  position:absolute;
width: 43px;
  height: 43px;
  border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;
  background:white;
  border:1px solid black;
  margin:50px 85px; 
}
.iris3{
 position:absolute;
  width:30px;
  height:30px;
  border-radius:100%;
  background:black;
  margin:0px 3px;
  animation:gira3 1s alternate infinite;
  -moz-animation:gira3 1s alternate infinite;
  -webkit-animation:gira3 1s alternate infinite;
}
iris3::before{
  content:"";
  position:absolute;
  width:7px;
  height:7px;
  border-radius:100%;
  background:white;
  margin:3px 14px;
   
}
.nose{
  position:absolute;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 9px solid black;
   border-radius: 100px / 50px;
  margin:87px 62px;
  z-index:3335;
  animation:va 3s alternate infinite;
  -moz-animation:va 3s alternate infinite;
  -webkit-animation:va 3s alternate infinite;
}
.bocas3{
  position:absolute;
  width:21px;
  height:12px;
  border-radius:0 0 30px 30px;
  background:#333;
 border:7px solid #333;
  margin:93px 55px; 
}
.boqui{
 position:absolute;
  width:35px;
  height:35px;
  border-radius:100%;
  background:#ddd;
  border-right:2px solid gray;
  margin:85px 35px;
  animation:va 3s alternate infinite;
  -moz-animation:va 3s alternate infinite;
  -webkit-animation:va 3s alternate infinite;
}
.boqui::before{
  content:"";
 position:absolute;
  width:35px;
  height:35px;
  border-radius:100%;
  background:#ddd;
  border-left:2px solid gray;
  margin:0px 35px
}
.bigotitos{
  position:absolute;
  width:90px;
  height:30px;
  border-radius:100%;
  border-bottom:2px solid black;
  margin:75px -12px;
  
  animation:va 3s alternate infinite;
  -moz-animation:va 3s alternate infinite;
  -webkit-animation:va 3s alternate infinite;
  
}
.bigotitos::before{
  content:"";
  position:absolute;
  width:70px;
  height:21px;
  border-radius:100%;
  border-bottom:2px solid black;
  margin:13px 7px;
  -webkit-transform: rotate(-12deg);
   transform: rotate(-12deg);
}
.bigotitos::after{
  content:"";
  position:absolute;
  width:70px;
  height:21px;
  border-radius:100%;
  border-bottom:2px solid black;
  margin:18px 9px;
-webkit-transform: rotate(-21deg);
   transform: rotate(-21deg);
}
.bigotitos3{
  position:absolute;
  width:90px;
  height:30px;
  border-radius:100%;
  border-bottom:2px solid black;
  margin:75px 60px;
  animation:va 3s alternate infinite;
  -moz-animation:va 3s alternate infinite;
  -webkit-animation:va 3s alternate infinite; 
}
.bigotitos3::before{
  content:"";
  position:absolute;
  width:70px;
  height:21px;
  border-radius:100%;
  border-bottom:2px solid black;
  margin:12px 12px;
  -webkit-transform: rotate(12deg);
   transform: rotate(12deg);
}
.bigotitos3::after{
  content:"";
  position:absolute;
  width:70px;
  height:21px;
  border-radius:100%;
  border-bottom:2px solid black;
  margin:16px 13px;
-webkit-transform: rotate(25deg);
   transform: rotate(25deg);
}
.legs{
  position:absolute;
  width:35px;
    height:102px;
  border-radius:35px 35px 0 0;
  background:#bbb;
  border:1px solid gray;
 margin: 3px 86px;
   -webkit-transform: rotate(12deg);
   transform: rotate(12deg); 
  animation:baja3 3s alternate infinite;
  -moz-animation:baja3 3s alternate infinite;
  -webkit-animation: baja3 3s alternate infinite;
}
.legs::before{
  content:"";
  display:block;
  width:45px;
  height:30px;
  border-radius:43px;
 background:#94948c; 
  border:1px solid #333;
  margin:90px -5px;
  -webkit-transform: rotate(-9deg);
   transform: rotate(-9deg); 
}
.legs3{
  position:absolute;
  width:35px;
    height:102px;
  border-radius:35px 35px 0 0;
  background:#bbb;
  border:1px solid gray;
  margin: 3px 167px;
   -webkit-transform: rotate(-12deg);
   transform: rotate(-12deg); 
   animation:baja7 3s alternate infinite;
  -moz-animation:baja7 3s alternate infinite;
  -webkit-animation: baja7 3s alternate infinite;
}
.legs3::before{
  content:"";
  display:block;
  width:45px;
  height:30px;
  border-radius:43px;
  background:#94948c; 
   border:1px solid #333;
  margin:90px -5px;
  -webkit-transform: rotate(9deg);
   transform: rotate(9deg); 
}
.legs7{
  position:absolute;
  width:60px;
  height:60px;
  border-radius:60px 60px 0 0;
  background:#ccc;
  border:1px solid gray;
   margin:21px 55px
}
.legs7::before{
  content:"";
  display:block;
  width:60px;
  height:30px;
  border-radius:21px;
  background:#94948c; 
   margin:53px -12px
}
.legs9{
  position:absolute;
  width:60px;
  height:60px;
  border-radius:60px 60px 0 0;
  background:#ccc;
   border:1px solid gray;
  margin:21px 170px
}
.legs9::before{
  content:"";
  display:block;
  width:60px;
  height:30px;
  border-radius:21px;
  background:#94948c; 
  margin:53px 12px
}
.cola{
  position:absolute;
  width:30px;
  height:121px;
  border-radius:30px;
  background:#94948c; 
  border:2px solid gray;
  margin: -152px 130px;
   animation:baja12 3s alternate infinite;
  -moz-animation:baja12 3s alternate infinite;
  -webkit-animation: baja12 3s alternate infinite;
  
}
.ball{
  position:relative;
  width:3px;
  height:152px;
  background:black;
  margin:-900px auto;
  animation: uy 1s ease-in-out alternate infinite;
-moz-animation:uy 1s ease-in-out alternate infinite; 
-webkit-animation:uy 1s ease-in-out alternate infinite; 
 -webkit-transform-origin: uy 50% -40px;
  -moz-transform-origin:50% -40px;
}
.ball::after{
  content:"";
  position:absolute;
  width:45px;
  height:45px;
  border-radius:100%;
  border-left:5px solid white;
  margin:162px -25px
}
.ball::before{
  content:"";
  position:absolute;
  
  width:60px;
  height:65px;
  border-radius:100%;
  background:#ff6666;
  border-right:5px solid #E5394A;
  margin:152px -30px;
}
.cola3{
  position:absolute;
  width:37px;
  height:35px;
  border-radius:100%;
   background:#94948c; 
  border-bottom:7px solid gray;
  margin:-3px 0;
    animation:go 3s alternate infinite;
  -moz-animation:go 3s alternate infinite;
  -webkit-animation: go 3s alternate infinite;
}
@-webkit-keyframes baja {
 
  0%,25%{
  -webkit-transform:translatey(0px);
          transform:translatey(0px) }

 35%,45%,50%,70%,90%,100% {
   -webkit-transform:translatey(172px);
           transform:translatey(172px) }}
@keyframes baja {
 
  0%,25%{
  -webkit-transform:translatey(0px);
          transform:translatey(0px) }

 35%,45%,50%,70%,90%,100% {
   -webkit-transform:translatey(172px);
           transform:translatey(172px) }}

@-webkit-keyframes baja3{
 
  0%,25%,35%{ margin: 3px 86px; }

  40%,50%{ margin: 7px 86px;}
  60%,80%{ margin:3px 86px;}
  90%,100% { margin: 7px 86px;}}

@keyframes baja3{
 
  0%,25%,35%{ margin: 3px 86px; }

  40%,50%{ margin: 7px 86px;}
  60%,80%{ margin:3px 86px;}
  90%,100% { margin: 7px 86px;}}

@-webkit-keyframes  baja7{
 
  0%,25%,35%{ margin: 3px 167px; }

  40%,50%{ margin: -7px 167px; }
  60%,80%{ margin: 3px 167px; }
  90%,100% {
    margin:-7px 167px; }}

@keyframes  baja7{
 
  0%,25%,35%{ margin: 3px 167px; }

  40%,50%{ margin: -7px 167px; }
  60%,80%{ margin: 3px 167px; }
  90%,100% {
    margin:-7px 167px; }}

@-webkit-keyframes baja9 {
 
  0%,25%{ -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }

  30%,40%{ -webkit-transform: rotate(-7deg);
    transform: rotate(-7deg); }
  50%,60%{
   -webkit-transform: rotate(7deg);
    transform: rotate(7deg); }
  70%,80%{ -webkit-transform: rotate(-7deg);
    transform: rotate(-7deg);}
90%,100%{ -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
}
@keyframes baja9 {
 
  0%,25%{ -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }

  30%,40%{ -webkit-transform: rotate(-7deg);
    transform: rotate(-7deg); }
  50%,60%{
   -webkit-transform: rotate(7deg);
    transform: rotate(7deg); }
  70%,80%{ -webkit-transform: rotate(-7deg);
    transform: rotate(-7deg);}
90%,100%{ -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
}
@-webkit-keyframes baja12 {
 
 0%,25%{ -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }

  30%,40%{ -webkit-transform: rotate(7deg);
    transform: rotate(7deg); }
  50%,60%{
   -webkit-transform: rotate(-7deg);
    transform: rotate(-7deg); }
  70%,80%{ -webkit-transform: rotate(7deg);
    transform: rotate(7deg);}
90%,100%{ -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
}
@keyframes baja12 {
 
 0%,25%{ -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }

  30%,40%{ -webkit-transform: rotate(7deg);
    transform: rotate(7deg); }
  50%,60%{
   -webkit-transform: rotate(-7deg);
    transform: rotate(-7deg); }
  70%,80%{ -webkit-transform: rotate(7deg);
    transform: rotate(7deg);}
90%,100%{ -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
}
@-webkit-keyframes gira3{
 
  0% {-webkit-transform:translatex(6px);transform:translatex(6px)}
  100% {-webkit-transform:translatex(0px);transform:translatex(0px)}}
@keyframes gira3{ 
  0% {-webkit-transform:translatex(6px);transform:translatex(6px)}
  100% {-webkit-transform:translatex(0px);transform:translatex(0px)}}
@-webkit-keyframes uy{
  0%{
  transform:rotate(-21deg);
  -webkit-transform:rotate(-21deg);
  -moz-transform:rotate(-21deg);}
  100%{
     transform:rotate(21deg);
  -webkit-transform:rotate(21deg);
  -moz-transform:rotate(21deg);
}}
@keyframes uy{
  0%{
  transform:rotate(-21deg);
  -webkit-transform:rotate(-21deg);
  -moz-transform:rotate(-21deg);}
  100%{
     transform:rotate(21deg);
  -webkit-transform:rotate(21deg);
  -moz-transform:rotate(21deg);
}}
@-webkit-keyframes  sube3{ 
  0%,25%{ -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }

  35%,45%,50%,70%,90%,100% {
   -webkit-transform: rotate(21deg);
    transform: rotate(21deg); }}
@keyframes  sube3{ 
  0%,25%{ -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  35%,45%,50%,70%,90%,100% {
   -webkit-transform: rotate(21deg);
    transform: rotate(21deg); }}
@-webkit-keyframes sube7 { 
  0%,25%{ -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  35%,45%,50%, 70%,90%,100% {
   -webkit-transform: rotate(-21deg);
    transform: rotate(-21deg); }}
@keyframes sube7 { 
  0%,25%{ -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  35%,45%,50%, 70%,90%,100% {
   -webkit-transform: rotate(-21deg);
    transform: rotate(-21deg); }}
@-webkit-keyframes go { 
  0%,25% {-webkit-transform:translatex(0px) translatey(0px) scale(1);transform:translatex(0px) translatey(0px) scale(1)}
  30%,50% {-webkit-transform:translatex(-7px) translatey(0px) scale(1);transform:translatex(-7px) translatey(0px) scale(1)}
  60%,80% {-webkit-transform:translatex(0px) translatey(3px) scale(1);transform:translatex(0px) translatey(3px) scale(1)}
  90%,100% {-webkit-transform:translatex(-3px) translatey(0px) scale(.9);transform:translatex(-3px) translatey(0px) scale(.9)}}
@keyframes go { 
  0%,25% {-webkit-transform:translatex(0px) translatey(0px) scale(1);transform:translatex(0px) translatey(0px) scale(1)}
  30%,50% {-webkit-transform:translatex(-7px) translatey(0px) scale(1);transform:translatex(-7px) translatey(0px) scale(1)}
  60%,80% {-webkit-transform:translatex(0px) translatey(3px) scale(1);transform:translatex(0px) translatey(3px) scale(1)}
  90%,100% {-webkit-transform:translatex(-3px) translatey(0px) scale(.9);transform:translatex(-3px) translatey(0px) scale(.9)}}
@-webkit-keyframes va{ 
  0%,25%{-webkit-transform:translateY(0px);transform:translateY(0px)}  
  50%,60%{
   -webkit-transform:translateY(3px);
           transform:translateY(3px) }
  70%,80%{ -webkit-transform:translateY(-3px); transform:translateY(-3px)}
90%,100%{ -webkit-transform:translateY(0px); transform:translateY(0px)}
}
@keyframes va{ 
  0%,25%{-webkit-transform:translateY(0px);transform:translateY(0px)}  
  50%,60%{
   -webkit-transform:translateY(3px);
           transform:translateY(3px) }
  70%,80%{ -webkit-transform:translateY(-3px); transform:translateY(-3px)}
90%,100%{ -webkit-transform:translateY(0px); transform:translateY(0px)}
}
</style>

<div id="gradient">
</div>
<div class="container">
<div class="ball3">
</div>
<div class="circu">
<div class="gatito">
<div class="cola">
<div class="cola3">
</div>
</div>
<div class="legs7">
</div>
<div class="legs9">
</div>
<div class="cat">
</div> 
<div class="legs">
</div>
<div class="legs3">
</div>
<div class="head">
<div class="ore">
</div>
<div class="ore3">
</div>
<div class="head7">
<div class="eyes">
<div class="iris">
</div>
</div>
<div class="eyes3">
<div class="iris3">
</div>
</div>
<div class="bocas3">
</div>
<div class="bigotitos">
</div>
<div class="bigotitos3">
</div>
<div class="boqui">
</div>
<div class="nose">
</div>
</div>
</div>
</div>
</div>
<div class="ball">
</div>
</div>

<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> EDITED BY. <a href="https://Link Download"title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> COPYRIGHT <a href="http://codepen.io/Myscript2010/pen/dOjxjP"target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> 
</div>
<h2>
 <audio id="player" preload="auto">
  <source src="https://sites.google.com/site/sulelagu042/l/Instrumental-Broery-Aku-Begini-Betaria-Pulangkan-M2010.mp3">
  </source></h2>
</a></div>
</div>

<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/12/catch-ball.html" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>

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

Audio Code by. Jereme Causing
Cat Animated code by. Judith Neumann
Design code is edited by. Mys2010 In Codepen

DEMOSHOW

If you want to directly copy & paste you canDownload Here Catch the ball with mp3

Category: Catch the ball

Transparent Background

Memasang kode Transparent Background
Untuk menerapkan kode tersebut 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 {);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:20px 0;
  position: fixed;
  top: -15px;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #fff;  
font-size:  6px;
background: -moz-linear-gradient(top, #CC0099 0%, #FE80DF 100%);
  border-bottom: 3px solid #CC0099; 
}
.ap {
position: fixed;
right: 0;
bottom: 0;
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;
text-shadow: 0px 0px #FFf;  
font-size:  11px;
background:  #FE80DF;
border-top: 2px solid #CC0099;
z-index: 9999;
} 
h2 {
padding: 25px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #CC0099 50%, transparent 90%); 
}
 /* text below */
body, html {
  height: 100%;
  font-family: 'agency fb', sans-serif;
}
.credits a  { color: #FF6347; }
.credits {
  position: absolute;
  bottom: 94px;
  left: 110px;
  color: #dad;
  font-weight: 400;
  font-size: 22px;
  z-index: 1;
 -webkit-animation: shadow 9s ease-in-out infinite;
          animation: shadow 9s ease-in-out infinite;
}
@keyframes shadow { 
  50% {
      text-shadow: 0 12px 7px #CCFF00,  
 0 -10px 24px #0033CC;
  }
}

body
{
  width: 95%; 
  height:100%;
  margin:0em 5%;
  background-color:#dad;
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwoUvtBXOvM7dOeMbdHks7XNMWbs7G7HnEkOcWIo8YUj4XXXcxVIQDqKB0wpcj9gKRSLW1MI80DujzgQAxHPTYkaqZl4hPdRzPYFMJP1uDREZlWAaYmyVExk2hk_ytPyVlcM4yx9YjPYxv/s1600/Grey-White-M2010.png");
  background-position: center bottom;
  animation: animatedBackground 30s linear infinite;
  /* Safari and Chrome: */   
-webkit-animation: animatedBackground 30s linear infinite;
}
@keyframes animatedBackground 
{
  from { background-position: 0 100%; }
  to { background-position: 100% 100%; }
}
@-webkit-keyframes  animatedBackground 
{
  from { background-position: 0 100%; }
  to { background-position: 100% 100%; }
}
#content
{
  position:fixed;
  top:5em;
  height:1em;
  width:19em;
  background-color:rgba(1,1,1,0.5);
  color:white;
  padding:2em;
  border-bottom-right-radius: 5em;
  -webkit-border-bottom-right-radius: 5em;
   border-top-left-radius: 5em;
  -webkit-border-top-left-radius: 5em;
}
/*end*/
 /* BLUR-M2010: */
.blurred-bg.tinted {
  background: rgba(4,000,000, .4);
}
.box {
  width: 500px;
  height: 300px;
left:380px;
  left: -webkit-calc( 50% - 250px );
  top: 20%;
  position: absolute;
  border-radius: 5px;
  -moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 20px;
  text-align: center;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  display: flex;
  transition: box-shadow .3s ease;
}
.box:active {
  cursor: move;
  -moz-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
  -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
}
.box .content {
  margin: auto;
}
h1, h3, a, p {
  color: white;
  font-weight: 100;
}
.tinted h1, .tinted h3, .tinted a, .tinted p {
  color: #8E006B;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
}
h3 {
  font-size: 24px;
}
p {
  margin: 20px;
}
p.related {
  text-transform: uppercase;
  font-weight: 700;
  color: #6B006B;
}
p.related a {
  font-weight: 700;
  text-decoration: none;
}
p.related a:hover {
  text-decoration: underline;
}

<div id="box1" class="box blurred-bg tinted">
<div class="content">
<h1>
Transparent Background</h1>
<h3>
<span style="color:#6B006B">Source Code By. <a href="http://codepen.io/vollnixx/pen/AJDwo"target="_blank" title="Sumber Codepen"
onclick="window.open('http://codepen.io/ariona/pen/geFIK')">Vollnixx - Rian Ariona</a></h3>
<p>
<span style="color:#111">DRAG THIS BOX TO MOVE AROUND</b></p>
<p class="related">
See also: <a href="http://codepen.io/Myscript2010/pen/zoLmNx"target="_blank"title="Mari Belajar">Code in the edit codepen</a></p>
</div>
</div>
</div>

<div class="credits">
<p>
CODEPEN  : <a href="http://codepen.io/hello"target="_blank"title="Login/Signup">&nbsp; IS a PLACE TO WRITE</a>  <p>
DOWNLOAD : <a href="http://Link Download"title="Mari Belajar">&nbsp; FULL CODE</a>&nbsp; EDITED BY. <a href="http://myscript2010s.blogspot.co.id"target="_blank"title="Visit Myscript2010">&nbsp;M-2010</a>&nbsp; COPYRIGHT 2016 <a href="http://Link Download"title="Download Full Code">&nbsp;CIBEBER CIMAHI</a></p>
</div>
<div class="ap" id="ap">
<div align="center">
<a href="http://Link Download" target="_blank"title="Myscript2010s"><h2>
Myscript2010s</2></a>  
</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://sample-mys2010.blogspot.co.id/2016/12/transparent-background.html" target="_blank"title="Myscript2010s"><b>LET'S STUDY</b>
</div>
</header>

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>

<script>$(function () {
    $('.box').draggable();
}); 
</script>

Blurred Background by. Rian Ariona
Background Example Code by. Vollnixx
Design code is edited by. by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy and paste you canDownload Here Transparent-Background

Category: Transparent Background

Kode Iklan Melayang

Kode Iklan Melayang
Penerapannya Sebagai Berikut :
Login ke akun blog klik tataletak dan klik tambah gadged,
copy code dibawah ini pastekan kedalam gadged tersebut.
Klik Pratinjau untuk melihat hasil kemudian klik perbarui selesai

* Kode Iklan Melayang 1

<style class="M-2010">
#topbar {
 position:absolute;
 z-index: 80;
 padding: 7px;
 background: #444;
 background: #333)));
 border: 1px solid #000;
 border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-box-shadow: #444 0 2px 15px;
 -moz-box-shadow: #444 0 2px 10px;
 margin:0 auto 10px;
 float:left;
 color:rgba(0, 0, 0, 0.75);
 font-size: 12px;
 font-family: Verdana, serif;
 text-shadow:0 1px 0 #444;
}
#topbar img {
 border:none;
}
#topbar .tombol {
 margin:0;
 padding-bottom:5px;
 text-align:right;
}
#topbar .tombol button {
 color:#fff;
 border: solid 1px #000;
 margin:0;
 padding:2px 110px;
 cursor: pointer;
 text-shadow: 0 1px 1px rgba(0,0,0,.6);
 background: #444;
 background: -webkit-gradient(linear, left top, left bottom, from(red), to(#333));
 background: -moz-linear-gradient(top, red,  #333);
}
#topbar .isi_iklan {
 background-color:brown;
 margin:0;
 padding:4px;
 width: 250px;
 border: 1px solid #444;
}
</style>

<div id="topbar">
<div class="tombol">
<a href="https://www.blogger.com/follow.g?view=FOLLOW&blogID=8776766672634547419" onclick="closebar(); return false" style="text-decoration: none;">
<button>CLOSE</button></a>
</div>

<div class="isi_iklan">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0ovzgJRfjSFjCJ2h7RO0PpB-dsMdP4WB_7Vo7Cd0a-K6x87XWdKJY-LDrRXiCDvlcrlmdiI5IidPgt-0jpdnDX7rDKFCJZ7UfK4jDAlc8ZM47i3JyIUOebLkLvkNyBBqQvmq_YVbUtW0/s1600-r/Mari_belajar_mys2010s.gif" height="100" name="e902" width="250" /></a>

<div align="center">
<a href="https://Link Download"target="_blank" title="Mari Belajar"><font size="3" color="#111"face="arial"> Download Kode Iklan</a>
</span></div>
</div>
</div>

<script src="https://sites.google.com/site/code6916/file/Kode-Iklan-Melayang-Mys2010.js" type="text/javascript">
</script>

</script>
<script>var persistclose = 1;
var startX = 20;
var startY = 20;
var verticalpos = 'fromtop'; 
</script>

* Kode Iklan Melayang 2

<script type='text/javascript'>
$(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#bl_banner&#39;).hide(90);});});
</script>

<div id='fixedban' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:160px;z-index:999;-webkit-transform:translateZ(0);'>
<div>
<a id='close-fixedban' onclick='document.getElementById(&apos;fixedban&apos;).style.display = &apos;none&apos;;' style='cursor:pointer;'>
<img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4DqZSiWPIA4Q-mRdBYHdgSUkLJIIqMgLgnBKu-nsbdQ3lm3NHSh4eeepcB1_MrWjlBTv4k4UkC5Gmt_Bhes6n_lwMJXElgVjFoE8CdXF83yGWl5WmUDRPotlRdQIbVVkX-o_SUGjO7OJY/s1600/Close-M2010.gif' title='close button' style='vertical-align:middle;' /></a></div>

<div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'>
<a href='https://aboutme.google.com' target="_blank" title="Mari Belajar"><img style='max-width:100%;height:auto;vertical-align:middle;' alt='Banner M-2010' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPRso2NBP1eUy_PvsDjuZN3wi9SbksmJu8o7IRwWOejhL2T-6kIzW4XwhAHPtO-xveWBAvsNClfknPsE82E_Z_a8iuDJfaJgIvYgeRLV77I9HSkEh4VoauR7FEPB9VDFkT7SuAigicP9I/s1600/Darkwood-mys2010s.jpg'/></a>
</div>
</div>

Penjelasan :
Edit kode tersebut sesuai keinginan
Design Code is Edited by. M-2010 on Codepen

BACKHOME

* If you want to directly copy  &  paste you canDownload Here Kode Iklan Melayang 1

* If you want to directly copy  &  paste you canDownload Here Kode Iklan Melayang 2





Category: Kode Iklan Melayang Demoshow
















Kode Iklan Melayang









Kode Iklan Melayang

Penerapannya Sebagai Berikut :

Login ke akun blog klik tataletak dan klik tambah gadged, 

copy code dibawah ini pastekan kedalam gadged tersebut.

Klik Pratinjau untuk melihat hasil kemudian klik perbarui selesai
* Kode Iklan Melayang 1
<style class="M-2010">
#topbar {
 position:absolute;
 z-index: 80;
 padding: 7px;
 background: #444;
 background: #333)));
 border: 1px solid #000;
 border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-box-shadow: #444 0 2px 15px;
 -moz-box-shadow: #444 0 2px 10px;
 margin:0 auto 10px;
 float:left;
 color:rgba(0, 0, 0, 0.75);
 font-size: 12px;
 font-family: Verdana, serif;
 text-shadow:0 1px 0 #444;
}
#topbar img {
 border:none;
}
#topbar .tombol {
 margin:0;
 padding-bottom:5px;
 text-align:right;
}
#topbar .tombol button {
 color:#fff;
 border: solid 1px #000;
 margin:0;
 padding:2px 110px;
 cursor: pointer;
 text-shadow: 0 1px 1px rgba(0,0,0,.6);
 background: #444;
 background: -webkit-gradient(linear, left top, left bottom, from(red), to(#333));
 background: -moz-linear-gradient(top, red,  #333);
}
#topbar .isi_iklan {
 background-color:brown;
 margin:0;
 padding:4px;
 width: 250px;
 border: 1px solid #444;
}
</style>
<div id="topbar">
<div class="tombol">
<a href="https://www.blogger.com/follow.g?view=FOLLOW&blogID=8776766672634547419" onclick="closebar(); return false" style="text-decoration: none;">
<button>CLOSE</button></a>
</div>
<div class="isi_iklan">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0ovzgJRfjSFjCJ2h7RO0PpB-dsMdP4WB_7Vo7Cd0a-K6x87XWdKJY-LDrRXiCDvlcrlmdiI5IidPgt-0jpdnDX7rDKFCJZ7UfK4jDAlc8ZM47i3JyIUOebLkLvkNyBBqQvmq_YVbUtW0/s1600-r/Mari_belajar_mys2010s.gif" height="100" name="e902" width="250" /></a>
<div align="center">
<a href="https://Link Download"target="_blank" title="Mari Belajar"><font size="3" color="#111"face="arial"> Download Kode Iklan</a>
</span></div>
</div>
</div>
<script src="https://sites.google.com/site/code6916/file/Kode-Iklan-Melayang-Mys2010.js" type="text/javascript">
</script>

</script>
<script>var persistclose = 1;
var startX = 20;
var startY = 20;
var verticalpos = 'fromtop'; 
</script>
* Kode Iklan Melayang 2
<script type='text/javascript'>
$(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#bl_banner&#39;).hide(90);});});
</script>
<div id='fixedban' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:160px;z-index:999;-webkit-transform:translateZ(0);'>
<div>
<a id='close-fixedban' onclick='document.getElementById(&apos;fixedban&apos;).style.display = &apos;none&apos;;' style='cursor:pointer;'>
<img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4DqZSiWPIA4Q-mRdBYHdgSUkLJIIqMgLgnBKu-nsbdQ3lm3NHSh4eeepcB1_MrWjlBTv4k4UkC5Gmt_Bhes6n_lwMJXElgVjFoE8CdXF83yGWl5WmUDRPotlRdQIbVVkX-o_SUGjO7OJY/s1600/Close-M2010.gif' title='close button' style='vertical-align:middle;' /></a></div>
<div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'>
<a href='https://aboutme.google.com' target="_blank" title="Mari Belajar"><img style='max-width:100%;height:auto;vertical-align:middle;' alt='Banner M-2010' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPRso2NBP1eUy_PvsDjuZN3wi9SbksmJu8o7IRwWOejhL2T-6kIzW4XwhAHPtO-xveWBAvsNClfknPsE82E_Z_a8iuDJfaJgIvYgeRLV77I9HSkEh4VoauR7FEPB9VDFkT7SuAigicP9I/s1600/Darkwood-mys2010s.jpg'/></a>
</div>
</div>
Penjelasan :

Edit kode tersebut sesuai keinginan

Design Code is Edited by.  M-2010 on Codepen
DEMOSHOW
* If you want to directly copy  &  paste you canDownload Here Kode Iklan Melayang 1


* If you want to directly copy  &  paste you canDownload Here Kode Iklan Melayang 2



Category: Kode Iklan Melayang


          

          
        

          
        






Author Gradiend









Memasang Kode Author Gradiend

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 type="text/css">
body {background-image: url();color:red;height:100%;overflow:hidden;}
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
body {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwHy3bSUmgCTWLhhYIWL-iLwvu-Ks4pcu76gryPSjKEW_0VPYfklp71SouJr30SYzdQxBKLGCSu4oiGbsneRVDuTwMBUMgCoFWi4UnM-A01H3ObfFCSjTNzojAr_ITJhofoddWykaI2vSN/s1600-r/Darkwood-mys2010.jpg ");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
body {      
  text-shadow: 
    0 0 .4em currentcolor, 
    0 0 .35em yellow,
    0 0 .5em orange,
    0 0 1em red,
    0 0 2em white;
} 
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:-4px;
  width: 100%;
text-align: center;
font-size:  6px;
background: linear-gradient(270deg,#660099, #660099, rgba(255, 0, 0, 0.60), #660099, #660099);
  border-bottom: 3px solid #333;  
-webkit-animation: shadow 6s ease-in-out infinite;
          animation: shadow 6s ease-in-out infinite;
}
.ap {
position: fixed;
right: 0;
bottom:-19px;
left: 0;
height: 70px;
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;
background: linear-gradient(270deg,#660099, #660099, rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60), #660099, #660099);
border-top: 2px solid rgba(46, 56, 79, 0.85);
z-index: 9999;
} 
h2 {
padding:15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #333 50%, transparent 90%); 
-webkit-animation: shadow 1s ease-in-out infinite;
          animation: shadow 1s ease-in-out infinite;
} 
/*Text Bawah1*/  
M-2010, #teks, #posisi, #dibawah, span {
  font: 900 15vw Raleway;
  position: relative;
  display: inline-block;
}
#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:28px;
 -webkit-animation: shadow 6s ease-in-out infinite;
          animation: shadow 6s ease-in-out infinite;
}
@keyframes shadow {
  0% {
    text-shadow: 0 0 2px  #B0E0E6 , 
0 0 8px  #B0E0E6  , 0 0 10px  #B0E0E6 , 
0 0 20px  #B0E0E6 , 0 0 30px  #B0E0E6 , 
0 0 40px  #B0E0E6, 0 0 50px  #B0E0E6 , 
0 0 80px  #B0E0E6;
  }
  50% {
      text-shadow: 0 12px 7px rgba(255, 0, 0, 0.8),
 0 5px 15px rgba(0, 0, 0, 0.90), 0 0 50px rgba(0, 0, 0, 0.90),
 0 -10px 2px rgba(255, 0, 0, 0.8);
  }
 100% {
    text-shadow: 0 0 2px     #800080  , 
0 0 8px     #800080  , 0 0 10px     #800080  , 
0 0 20px     #800080  , 0 0 30px     #800080  , 
0 0 40px     #800080  , 0 0 50px     #800080  , 
0 0 80px     #800080  ;
  } 
}
/*end*/ 
.shadow-top:after { 
    content: " ";
    box-shadow: 0 0 200px 110px #eee;  
  
}
.shadow-top:before {  
    content: " ";
    box-shadow: 0 0 200px 80px #f00;    
}
#M2010-shadow  { 
margin:-110px;
box-shadow: 0 0 150px 50px  #FFC0CB;  
}
.shadow1:before,.shadow1:after {
    z-index:-1;
    position:absolute;
    content: " ";
    bottom:25px;
    left:10px;
    width:50%;     
    max-width:110px;
    box-shadow: 0 0 200px 90px #DDA0DD;  
    -webkit-transform:rotate(-8deg);
    -moz-transform:rotate(-8deg);
    -o-transform:rotate(-8deg);
    -ms-transform:rotate(-8deg);
    transform:rotate(-8deg);
}
.shadow1:after {
    -webkit-transform:rotate(8deg);
    -moz-transform:rotate(8deg);
    -o-transform:rotate(8deg);
    -ms-transform:rotate(8deg);
    transform:rotate(8deg);
    right:10px;
    left:auto;
}
/*box shadow*/
.container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#container{ 
  position:absolute;
          transform:translate(-20%,-20%);
  left:36%; top:  300px;
  width:610px;
  height:376px;
  box-shadow:0px 0px 30px 0px #fff; 
  border: solid 6px aqua;
}
/*BOX AUTHOR*/
.boxauthor{position:relative;border:1px solid #000;background:#aaa;box-shadow:0 0 115px #555 inset;margin:-2px 0 15px;padding:10px}
.boxtitle h3{color:#000;font:bold 14px Electrolize;background:#aaa;width:103.3%;display:block;position:relative;border:1px solid #000;box-shadow:0 0 5px #444 inset,0px 0 5px #000;margin:0 0 0 -22px;padding:7px 0 7px 25px}
.boxtitle h3:before{content:&#39;&#39;;position:absolute;bottom:-10px;left:0;width:0;height:0;border-color:#333 transparent transparent;border-style:solid;border-width:10px 0 0 10px}
.boxtitle h3:after{content:&#39;&#39;;position:absolute;bottom:-10px;right:0;width:0;height:0;border-color:transparent transparent transparent #333;border-style:solid;border-width:0 0 10px 10px}
.boxauthor_photo{float:right;background:#aaa;position:relative;z-index:999;box-shadow:0 0 5px #000;margin:-21px 0 5px;padding:30px 5px 5px}
.boxauthor_photo:before{content:&#39;&#39;;position:absolute;top:0;right:135px;width:0;height:0;border-color:transparent transparent #333;border-style:solid;border-width:0 0 10px 10px}
.boxauthor_photo:after{content:&#39;&#39;;position:absolute;top:0;right:-10px;width:0;height:0;border-color:transparent transparent #333;border-style:solid;border-width:0 10px 10px 0}
.boxauthor_photo img{width:120px;height:120px;border:2px solid #444}
.boxcontent{font:12px/18px Electrolize,sans-serif;text-align:justify;color:#000;float:left;top:5px;left:0;display:block;position:relative;width:420px}
.boxsocial{background:#ddd;margin-left:-22px;width:100%;overflow:hidden;border:1px solid #000;box-shadow:0 0 5px #444 inset,0px 0 5px #000;padding:5px 5px 5px 40px}
.boxsocial :before{content:&#39;&#39;;position:absolute;bottom:0;left:-12px;width:0;height:0;border-color:#333 transparent transparent;border-style:solid;border-width:10px 0 0 10px}
.boxsocial :after{content:&#39;&#39;;position:absolute;bottom:0;right:-12px;width:0;height:0;border-color:transparent transparent transparent #333;border-style:solid;border-width:0 0 10px 10px}
.boxsocial a{text-align:center;background:#111;display:block;color:#fff!important;font:bold 12px Electrolize,sans-serif;text-decoration:none;border:1px solid #000;transition:all 1s ease;box-shadow:2px 2px 0 0 rgba(51,51,51,1)inset;padding:7px 0}
.boxsocial a:hover{box-shadow:0 0 5px #000;border:1px solid #fff}
.boxsocial div{float:left;margin-right:6px;width:88px}
.boxsocial .boxsocialtitle{font:bold 12px Electrolize,sans-serif;text-align:center;text-transform:uppercase;display:block;width:107px;border:1px solid #000;box-shadow:0 0 5px #444 inset;padding:7px 22px}
</style> 
<div align="center" style="margin-top:110px">
<div class="shadow1">
</div>
<div id="M2010-shadow">
</div>
<div align="center">
<div class="shadow-top">
</div>
<div class="M-logo"> 
</div>
</div></div>
</div></div>
<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/12/author-gradiend.html"target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>
<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/12/author-gradiend.html"target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>
<div id='container'>
<div class='boxauthor'>
<div class='boxauthor_photo'>
<a href="https://sites.google.com/site/belajarakbar/music/Code-author-sule.css" target="_blank" title="Download Code Author"><img alt='Myscript2010' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha0B5pl3QXOjTn4hHHEn16P7qzhqKTRf-LZUxvkDmkPf5SeBXwbLuFoPvVOff7H2mmj5fwmljsvPgBIk33Ffmq0b1d9KdbYHfUk6RoD2xSxYBZuj6OKGGafpxgxjC_RjEW_F1hjEsqSeI/s1600-r/Hearts-icon_mys2010.png' title='Get in the Code Author'/>
</div>
<div class='boxtitle'>
<h3>
Author : <a expr:href='data:post.authorProfileUrl' rel='author' target='_blank' title='Myscript2010'><data:post.author/></a></div>
<font size="4" color="brown"face="vivaldi"> 
&nbsp;&nbsp;<b>Myscript2010</b>
</font> 
<br>
<font size="2" color="#800080"face="arial">
&nbsp;&nbsp; Terimakasih telah berkunjung ke my webblogg,<br> 
&nbsp;&nbsp; semoga artikel yang ada pada webblog dapat menambah pengetahuan, 
<div class='boxcontent'>
<p align="center">
<textarea class="input" cols="70" onclick="javascript:this.select();" readonly="true" rows="12" style="background: pink;"> 

<a href="http://myscript2010s.blogspot.co.id" target="_blank" title="Mari Belajar"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrjn8iTN7rj-5VmW9bGueqFYkdoNsLF6ibHHLtZBY2Ib5b0KvS1mqlb1nJzSC5tDbjfeVrDshxgYuabN9C28hgJiS3Ozp4pMu1SESiBIvvknYCeClWk8b-rJv0tFkN2Km7H0SCH4HjXKI/s1600-r/backlink_mys2010.gif" alt="Let's Study"/></a></textarea>
</center>
</div>
<div class='boxsocial'>
<div class='boxsocialtitle'>
MARI BELAJAR
</div>
<div class='boxfb'>
<a href="https://www.facebook.com/learn.editing.myscript2010" target='_blank' title='My FB'>Facebook</a>
</div>
<div class='boxtwit'>
<a href="https://twitter.com/myscript2010s" target='_blank' title='My Twitter'>Twitter</a>
</div>
<div class='boxgplus'>
<a href="https://plus.google.com/u/0/101254379497511200564/posts" target='_blank' title='My Google+'>Google+</a>
</div>
<div class='boxltsme'>
<script>//<![CDATA[
var uri = window.location.href;
var ttle = document.title;
document.write("<a href='http://www.stumbleupon.com/stumbler/Mys2010/lists/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' target='_blank' title='My Stumbler'>Stumbler</a>");
//]]>
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> EDITED BY. <a href="https://Link Download"title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> COPYRIGHT <a href="https://www.blogger.com/follow.g?view=FOLLOW&blogID=8776766672634547419"target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; FOLLOW</a> 
</div><h2>
<a href="http://codepen.io/Myscript2010/pen/ObZrqE"target="_blank" title="Mari Belajar">
<span style="color:orange; font-size: 10pt">www codepen com</a> 
</a></div>
</div>
 Edited by.  M-2010 
DEMOSHOW

If you want to directly copy  and  paste you canDownload Here Author Gradiend



Category: Author Gradiend













            
          

          
        

          
        






Paper Boat with Menu Mp3









Memasang Kode Paper Boat with Menu Mp3

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 type="text/css">
body {background-image: url();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:-4px;
  width: 100%;
text-align: center;
font-size:  6px;
background: linear-gradient(270deg,#660099, #660099, rgba(255, 0, 0, 0.60), #660099, #660099);
  border-bottom: 3px solid #333;  
-webkit-animation: shadow 6s ease-in-out infinite;
          animation: shadow 6s ease-in-out infinite;
}
.ap {
position: fixed;
right: 0;
bottom:-19px;
left: 0;
height: 70px;
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;
background: linear-gradient(270deg,#660099, #660099, rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60), #660099, #660099);
border-top: 2px solid rgba(46, 56, 79, 0.85);
z-index: 9999;
} 
h2 {
padding:15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #333 50%, transparent 90%); 
-webkit-animation: shadow 1s ease-in-out infinite;
          animation: shadow 1s ease-in-out infinite;
} 
/*Text Bawah1*/  
M-2010, #teks, #posisi, #dibawah, span {
  font: 11 15vw Raleway;
  position: relative;
  display: inline-block;
}
#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:28px;
 -webkit-animation: shadow 6s ease-in-out infinite;
          animation: shadow 6s ease-in-out infinite;
}
@keyframes shadow {
  0% {
    text-shadow: 0 0 2px  #B0E0E6 , 
0 0 8px  #B0E0E6  , 0 0 10px  #B0E0E6 , 
0 0 20px  #B0E0E6 , 0 0 30px  #B0E0E6 , 
0 0 40px  #B0E0E6, 0 0 50px  #B0E0E6 , 
0 0 80px  #B0E0E6;
  }
  50% {
      text-shadow: 0 12px 7px rgba(255, 0, 0, 0.8),
 0 5px 15px rgba(0, 0, 0, 0.90), 0 0 50px rgba(0, 0, 0, 0.90),
 0 -10px 2px rgba(255, 0, 0, 0.8);
  }
 100% {
    text-shadow: 0 0 2px     #800080  , 
0 0 8px     #800080  , 0 0 10px     #800080  , 
0 0 20px     #800080  , 0 0 30px     #800080  , 
0 0 40px     #800080  , 0 0 50px     #800080  , 
0 0 80px     #800080  ;
  } 
}
/*end*/ 
.shadow-top:after { 
    content: " ";
    box-shadow: 0 0 200px 80px #EABFFE;  
  
}
.shadow-top:before {  
    content: " ";
    box-shadow: 0 0 200px 250px #FFE500;    
}
#M2010-shadow  { 
margin:-110px;
box-shadow: 0 0 150px 80px  #990099;  
}
.shadow1:before,.shadow1:after {
    z-index:-1;
    position:absolute;
    content: " ";
    bottom:25px;
    left:10px;
    width:50%;     
    max-width:110px;
    box-shadow: 0 0 200px 90px #8E006B;  
    -webkit-transform:rotate(-8deg);
    -moz-transform:rotate(-8deg);
    -o-transform:rotate(-8deg);
    -ms-transform:rotate(-8deg);
    transform:rotate(-8deg);
}
.shadow1:after {
    -webkit-transform:rotate(8deg);
    -moz-transform:rotate(8deg);
    -o-transform:rotate(8deg);
    -ms-transform:rotate(8deg);
    transform:rotate(8deg);
    right:10px;
    left:auto;
}
 
/*Perahu*/  
.user_box {
background: 
rgba(0, 0, 0, 0.16);
height:  45px;
position: absolute;
width: 200px;
left: 10px;
top: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
box-shadow: 1px 1px 0 0 
rgba(255, 255, 255, 0.2), -1px -1px 0 0 
rgba(0, 0, 0, 0.3), inset 0 0 5px 0 
rgba(0, 0, 0, 0.1);
}
.user_img {
height: 34px;
overflow: hidden;
position: absolute;
top: 5px;
width: 34px;
left: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 1px 1px 0 0 
rgba(255, 255, 255, 0.2), -1px -1px 0 0 
rgba(0, 0, 0, 0.3), inset 0 0 5px 0 
rgba(0, 0, 0, 0.1);
    z-index: 999;
} 
.user_img img {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 100%;
} 
.notif {
position: absolute;
right: 17px;
top: 5px;
height: 12px;
width: 9px;
background: 
rgba(255, 255, 255, 0.1);
padding: 9px 12px 9px 16px;
font-weight: 800;
color: 
white;
-webkit-border-radius: 22px;
-moz-border-radius: 22px;
border-radius: 22px;
box-shadow: 1px 1px 0 0 
rgba(255, 255, 255, 0.2), -1px -1px 0 0 
rgba(0, 0, 0, 0.3), inset 0 0 5px 0 
rgba(0, 0, 0, 0.2);
text-shadow: 1px 1px 1px 
rgba(0, 0, 0, 0.5);
}
.user_button {
position: absolute;
font-size: 10px;
color:#111;
background: rgb(0,115,0); 
text-decoration:none;
padding: 1px 15px 3px 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: inset 1px 1px 0 0 
rgba(255, 255, 255, 0.3), inset -1px -1px 0 0 
rgba(0, 0, 0, 0.3), 0 0 3px 0 
rgba(0, 0, 0, 0.5);
top: 23px;
left: 45px;
text-shadow: 1px 1px 0 
yellow;
}
.quicknavi {
position: absolute;
left: 220px;
top: 10px;
}
.quicknavi li {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
box-shadow: 1px 1px 0 0 
rgba(255, 255, 255, 0.2), -1px -1px 0 0 
rgba(0, 0, 0, 0.3), inset 0 0 5px 0 
rgba(0, 0, 0, 0.1);
float: left;
background: 
rgba(0, 0, 0, 0.16);
margin-right: 10px;
}
.quicknavi li a {
padding: 16px 15px 16px 14px;
display: inline-block;
color: 
#A7C4E2;
text-decoration: none;
font-size: 13px;
text-shadow: 1px 1px 0px 
rgba(0, 0, 0, 0.4);
}
.quicknavi select {
border: 1px solid 
#2E5F8F;
padding: 6px;
margin-right: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 1px 1px 0 0 
rgba(255, 255, 255, 0.2), -1px -1px 0 0 
rgba(0, 0, 0, 0.3), inset 0 0 5px 0 
rgba(0, 0, 0, 0.1);
}
/*PERAHU*/
#instructions {
  position: absolute;
  width: 100%;
  top: 50%;
  margin: auto;
  margin-top: 80px;
  font-family: 'Open Sans', sans-serif;
  color: #B0E0E6;
  font-size: 1.0em;
 
  text-align: center;
  line-height: 130%;
}

#bgr {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(#000, #111, #222, #000);
  background: linear-gradient(#000, #111, #222, #000);
}

#raftHolder {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100px;
  height: 50px;
  overflow: hidden;
}

#raft {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
  -webkit-animation-name: raftFloat;
          animation-name: raftFloat;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}

#raftBottom {
  position: absolute;
  margin: auto;
  top: 34px;
  bottom: 0;
  left: 0;
  right: 0;
  width: 0px;
  height: 0px;
  border-bottom: 20px solid #555;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}
#raftBottom::before {
  content: "";
  position: absolute;
  margin: auto;
  width: 0px;
  height: 0px;
  left: -40px;
  border-top: 20px solid #2A2A2A;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}
#raftBottom::after {
  content: "";
  position: absolute;
  margin: auto;
  width: 0px;
  height: 0px;
  border-top: 20px solid #888;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

#raftTop {
  position: absolute;
  margin: auto;
  top: -7px;
  left: 20px;
  right: 0;
  bottom: 0;
  width: 0px;
  height: 0px;
  border-bottom: 20px solid #fff;
  border-right: 20px solid transparent;
}
#raftTop::before {
  content: "";
  position: absolute;
  margin: auto;
  width: 0px;
  height: 0px;
  left: -20px;
  border-bottom: 20px solid #333;
  border-left: 20px solid transparent;
}

#raftRipples {
  position: absolute;
  margin: auto;
  top: 50px;
  bottom: 0;
  left: 0;
  right: 100px;
  width: 200px;
  height: 50px;
}

.raftRipple {
  position: absolute;
  margin: auto;
  width: 0px;
  height: 4px;
  border-radius: 2px;
  opacity: .1;
  background: #fff;
  -webkit-animation-name: raftRippleMove;
          animation-name: raftRippleMove;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}
.raftRipple:nth-child(1) {
  top: 30px;
  left: 120px;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.raftRipple:nth-child(2) {
  top: 24px;
  left: 120px;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

#raftReflection {
  position: absolute;
  margin: auto;
  top: 90px;
  bottom: 0;
  right: 0;
  left: 10px;
  width: 100px;
  height: 50px;
}

.raftReflectionSegment {
  position: absolute;
  margin: auto;
  height: 4px;
  border-radius: 2px;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  -webkit-animation-name: raftReflectionMove;
          animation-name: raftReflectionMove;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}
.raftReflectionSegment:nth-child(1) {
  top: -30px;
  width: 35px;
  opacity: .1;
}
.raftReflectionSegment:nth-child(2) {
  top: -16px;
  width: 45px;
  -webkit-animation-delay: .2s;
          animation-delay: .2s;
  opacity: .05;
}
.raftReflectionSegment:nth-child(3) {
  top: -2px;
  width: 60px;
  -webkit-animation-delay: .4s;
          animation-delay: .4s;
  opacity: .02;
}

@-webkit-keyframes raftReflectionMove {
  0% {
    -webkit-transform: scale(1.2, 1) translate(5px);
            transform: scale(1.2, 1) translate(5px);
  }
  100% {
    -webkit-transform: scale(1, 1) translate(-10px);
            transform: scale(1, 1) translate(-10px);
  }
}

@keyframes raftReflectionMove {
  0% {
    -webkit-transform: scale(1.2, 1) translate(5px);
            transform: scale(1.2, 1) translate(5px);
  }
  100% {
    -webkit-transform: scale(1, 1) translate(-10px);
            transform: scale(1, 1) translate(-10px);
  }
}
@-webkit-keyframes raftRippleMove {
  0% {
    width: 0px;
  }
  70% {
    width: 50px;
  }
  100% {
    -webkit-transform: translate(-100px);
            transform: translate(-100px);
    width: 0px;
    opacity: 0;
  }
}
@keyframes raftRippleMove {
  0% {
    width: 0px;
  }
  70% {
    width: 50px;
  }
  100% {
    -webkit-transform: translate(-100px);
            transform: translate(-100px);
    width: 0px;
    opacity: 0;
  }
}
@-webkit-keyframes raftFloat {
  0% {
    -webkit-transform: rotate(3deg) translate(10px, -2px);
            transform: rotate(3deg) translate(10px, -2px);
  }
  100% {
    -webkit-transform: rotate(-3deg) translate(-5px);
            transform: rotate(-3deg) translate(-5px);
  }
}
@keyframes raftFloat {
  0% {
    -webkit-transform: rotate(3deg) translate(10px, -2px);
            transform: rotate(3deg) translate(10px, -2px);
  }
  100% {
    -webkit-transform: rotate(-3deg) translate(-5px);
            transform: rotate(-3deg) translate(-5px);
  }
}
#sploutch {
  position: absolute;
  width: 300px;
  height: 300px;
  -webkit-animation-name: panSploutch;
          animation-name: panSploutch;
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
}

@-webkit-keyframes panSploutch {
  to {
    -webkit-transform: translateX(-300px);
            transform: translateX(-300px);
  }
}

@keyframes panSploutch {
  to {
    -webkit-transform: translateX(-300px);
            transform: translateX(-300px);
  }
}
.drop {
  position: absolute;
  background: #fff;
  width: 2px;
  height: 40px;
  opacity: 0;
  left: 150px;
  -webkit-animation-name: fall;
          animation-name: fall;
  -webkit-animation-duration: .2s;
          animation-duration: .2s;
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes fall {
  0% {
    top: -100px;
    opacity: 0;
    height: 100px;
  }
  99% {
    opacity: 1;
  }
  100% {
    top: 150px;
    opacity: 0s;
    height: 5px;
  }
}

@keyframes fall {
  0% {
    top: -100px;
    opacity: 0;
    height: 100px;
  }
  99% {
    opacity: 1;
  }
  100% {
    top: 150px;
    opacity: 0s;
    height: 5px;
  }
}
#ripples {
  position: absolute;
  width: 300px;
  height: 300px;
  -webkit-transform: rotateX(75deg);
          transform: rotateX(75deg);
}

.ripple {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  border-radius: 50%;
  border-style: solid;
  border-width: 6px;
  border-color: rgba(255, 255, 255, 0.2);
  -webkit-animation-name: grow;
          animation-name: grow;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}
.ripple:nth-child(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
.ripple:nth-child(2) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
.ripple:nth-child(3) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

@-webkit-keyframes grow {
  0% {
    width: 1px;
    height: 1px;
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  25% {
    opacity: .5;
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  50% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  100% {
    width: 250px;
    height: 250px;
    opacity: 0;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

@keyframes grow {
  0% {
    width: 1px;
    height: 1px;
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  25% {
    opacity: .5;
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  50% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  100% {
    width: 250px;
    height: 250px;
    opacity: 0;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
.splash {
  position: absolute;
  margin: auto;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  opacity: 0;
  background: #fff;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}
.splash:nth-child(1) {
  -webkit-animation-name: bounce1;
          animation-name: bounce1;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.splash:nth-child(2) {
  -webkit-animation-name: bounce2;
          animation-name: bounce2;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.splash:nth-child(3) {
  -webkit-animation-name: bounce3;
          animation-name: bounce3;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

@-webkit-keyframes bounce1 {
  0% {
    left: 150px;
    top: 150px;
    opacity: 0;
  }
  5% {
    opacity: .5;
  }
  50% {
    top: 101px;
  }
  100% {
    left: 140px;
    top: 150px;
    opacity: 0;
  }
}

@keyframes bounce1 {
  0% {
    left: 150px;
    top: 150px;
    opacity: 0;
  }
  5% {
    opacity: .5;
  }
  50% {
    top: 101px;
  }
  100% {
    left: 140px;
    top: 150px;
    opacity: 0;
  }
}
@-webkit-keyframes bounce2 {
  0% {
    left: 150px;
    top: 150px;
    opacity: 0;
  }
  5% {
    opacity: .5;
  }
  50% {
    top: 116px;
  }
  100% {
    left: 200px;
    top: 150px;
    opacity: 0;
  }
}
@keyframes bounce2 {
  0% {
    left: 150px;
    top: 150px;
    opacity: 0;
  }
  5% {
    opacity: .5;
  }
  50% {
    top: 116px;
  }
  100% {
    left: 200px;
    top: 150px;
    opacity: 0;
  }
}
@-webkit-keyframes bounce3 {
  0% {
    left: 150px;
    top: 150px;
    opacity: 0;
  }
  5% {
    opacity: .5;
  }
  50% {
    top: 107px;
  }
  100% {
    left: 155px;
    top: 150px;
    opacity: 0;
  }
}
@keyframes bounce3 {
  0% {
    left: 150px;
    top: 150px;
    opacity: 0;
  }
  5% {
    opacity: .5;
  }
  50% {
    top: 107px;
  }
  100% {
    left: 155px;
    top: 150px;
    opacity: 0;
  }
}
#forest {
  position: absolute;
  margin: auto;
  width: 100%;
  height: 100%;
  left: 100vw;
  -webkit-animation-name: panForest;
          animation-name: panForest;
  -webkit-animation-duration: 12s;
          animation-duration: 12s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@-webkit-keyframes panForest {
  to {
    -webkit-transform: translateX(-300vw);
            transform: translateX(-300vw);
  }
}

@keyframes panForest {
  to {
    -webkit-transform: translateX(-300vw);
            transform: translateX(-300vw);
  }
}
/*Menu*/
.b-nav, body:after {
  position: absolute;
  right: 0;
}
.b-brand, .b-link {
  font-size: 18px;
  font-weight: 700;
  margin-left: 0;
  text-decoration: none;
  font-family: "Roboto Slab", serif;
  text-transform: capitalize;
  ;
}
@-webkit-keyframes slideInLeft {
  0% {
    -webkit-transform: translate3d(345px, 0, 0);
    transform: translate3d(345px, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}
@keyframes slideInLeft {
  0% {
    -webkit-transform: translate3d(345px, 0, 0);
    transform: translate3d(345px, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}
* {
  box-sizing: border-box
}
body:after {
  background: #000;
  content: '';
  height: 100%;
  left: 0;
  opacity: 0;
  padding: 0;
  top: 0;
  visibility: hidden;
  -webkit-transition: all .6s ease;
  transition: all .6s ease;
  width: 100%;
}
body.open:after {
  z-index: 10;
  opacity: 0.65;
  height: 100000%;
  visibility: visible
}
.b-nav {
  background: #000 none repeat scroll 0 0;
  position: absolute;
  top: 0;
  width: 320px;
  z-index: 12;
}
.b-nav:not(.open) {
  animation-duration: 0.4s;
  animation-fill-mode: both;
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft
}
.b-nav {
  animation-duration: .4s;
  animation-fill-mode: both;
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft
}
.b-nav ul {
  padding-left: 0px;
}
.b-nav li {
  color: #fff;
  list-style-type: none;
  padding: 10px 10px 10px 0;
  text-align: left;
  -webkit-transform: translateX(345px);
  -ms-transform: translateX(345px);
  transform: translateX(345px)
}
.b-nav li:not(.open) {
  animation-duration: 0.4s;
  animation-fill-mode: both;
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft
}
.b-nav li:not(.open), .b-nav.open li {
  -webkit-animation-duration: 0.4s;
  -webkit-animation-fill-mode: both
}
.b-nav li:first-child {
  margin-top: 0px
}
.b-nav.open {
  visibility: visible;
  animation-duration: 0.4s;
  animation-fill-mode: both;
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}
.b-nav:not(.open) {
  visibility: hidden;
  animation-duration: 0.4s;
  animation-fill-mode: backwards;
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft
}
.b-nav.open li {
  padding-left: 30px;
  animation-duration: 0.2s;
  animation-fill-mode: both;
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft
}
.b-link {
  background: 0 0;
  border-left: rgba(255, 255, 255, 0)solid 2px;
  color: #fff;
  transition: all .4s ease;
  width: auto
}
.b-link, .b-menu {
  -webkit-transition: all .4s ease;
}
.b-nav li {
  border-left: 5px solid #e00a12;
}
/*.b-link--active,
.b-link:hover {
    border-left: #e00a12 solid 5px;
    padding-left: 30px
}*/
.b-menu {
  cursor: pointer;
  display: block;
  height: 66px;
  padding-top: 20px;
  position: relative;
  top: -20px;
  transition: all 0.4s ease 0s;
  width: 43px;
  z-index: 12;
  right: 10px;
}
.b-bun--bottom, .b-bun--mid, .b-bun--top {
  height: 2px;
  width: 25px
}
.b-container.open .b-main, .b-menu:hover {}
.b-bun {
  background: #fff;
  transition: all .4s ease
}
.b-brand, .b-bun {
  position: relative;
  -webkit-transition: all .4s ease
}
.b-bun--top {
  top: 0
}
.b-bun--mid {
  top: 8px
}
.b-bun--bottom {
  top: 16px
}
.b-brand {
  color: #2196f3;
  top: -21.43px;
  transition: all .4s ease;
  z-index: 13
}
.b-container {
  position: absolute;
  right: 0;
  top: 20px;
}
.b-container:hover:not(.open) .bun-bottom, .b-container:hover:not(.open) .bun-mid, .b-container:hover:not(.open) .bun-top {
  background: #2196f3
}
.b-container.open .b-bun--top {
  background: #e00a12;
  top: 9px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg)
}
.b-container.open .b-bun--mid {
  opacity: 0
}
.b-container.open .b-bun--bottom {
  background: #e00a12;
  top: 5px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg)
}
.b-container.open .b-brand {
  color: #fff
}
.mobile-search-btn {
     background-color: #e00a12;
    border-radius: 4px;
    color: #fff;
    margin-bottom: 25px;
    margin-left: 30px;
    padding: 10px 20px;
    text-transform: uppercase;
  border:none;
}
.mobile-search {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #fff;
    color: #949494;
    font-size: 14px;
    margin-bottom: 20px;
    margin-left: 30px;
    padding: 10px;
    width: 80%;
}
</style>
<div align="center" style="margin-top:110px">
<div class="shadow1">
</div>
<div id="M2010-shadow">
</div>
<div align="center">
<div class="shadow-top">
</div>
<div class="M-logo">
</div>
</div>
</div>
<div id='bgr'>
</div>
<div id='lake'>
<div id='sploutch'>
<div class='drop'>
</div>
<div id='ripples'>
<div class='ripple'>
</div>
<div class='ripple'>
</div>
</div>
<div id='splashes'>
<div class='splash'>
</div>
<div class='splash'>
</div>
<div class='splash'>
</div>
</div>
</div>
</div>
<div id='raftHolder'>
<div id='raft'>
<div id='raftTop'>
</div>
<div id='raftBottom'>
</div>
</div>
</div>
<div id='raftRipples'>
<div class='raftRipple'>
</div>
<div class='raftRipple'>
</div>
</div>

<div id='raftReflection'>
<div class='raftReflectionSegment'>
</div>
<div class='raftReflectionSegment'>
</div>
<div class='raftReflectionSegment'>
</div>
</div>
 
<div id='instructions'>
<span style="color:#B0E0E6">
by. <a href="http://myscript2010s.blogspot.co.id"target="_blank" title="Website">
<span style="color:orange"> 
M-2010</span>
</div>

<div class="mobile-nav">
<div class="b-nav">
<ul>
<li><a class="b-link b-link--active" href="#">Song title</a></li>
<li><a class="b-link" href="http://Link Title">1-Title</a></li>
<li><a class="b-link" href="http://Link Title">2-Title</a></li>
<li><a class="b-link" href="http://Link Title">3-Title</a></li> 
<li><a class="b-link" href="http://Link Title">4-Title</a></li>
<li><a class="b-link" href="http://Link Title">5-Title</a></li>
</ul>
</div>
<!-- Burger-Icon -->
<div class="b-container">
<div class="b-menu">
<div class="b-bun b-bun--top">
</div>
<div class="b-bun b-bun--mid">
</div>
<div class="b-bun b-bun--bottom">
</div>
</div>
<!-- Burger-Brand -->
<a href="#" class="b-brand"></a>
</div>
</div> 

<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> EDITED BY. <a href="https://Link Download"title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> COPYRIGHT <a href="http://codepen.io/Myscript2010/pen/PbRjZz"target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> 
</div>
<h2>
 <audio id="player" preload="auto">
  <source src="https://sites.google.com/site/codesule/lagu/Blowing-in-the-wind-M2010.mp3">
  </source></h2>
</a></div>
</div>

<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/12/paper-boat-with-menu-mp3.html" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>
<script src='https://sites.google.com/site/emanloveforplace/tempatlagu/Perahu-M2010.js'>
</script>
<script<script src='https://sites.google.com/site/emanloveforplace/tempatlagu/Perahu-stopExecutionOnTimeout-M2010.js'></script>
 <script src='https://sites.google.com/site/codesule/lagu/Menu-M2010.js'>
</script>
<music>   
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>     
<script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script>  
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>                        
<script src="https://sites.google.com/site/codesule/lagu/Musik-Mys2010.js"></script>  
<script src
Audio Code by. Jereme Causing 

paper boat code by.   Karim Maaloul   

Design Code is Edited by.  M-2010 on Codepen 
DEMOSHOW
* If you want to directly copy  and  paste you canDownload Here Boat with Menu Mp3



Category: Paper Boat with Menu Mp3





Newer Posts


Older Posts

Home




Subscribe to:
Posts (Atom)


















POPULAR



Frame Everyday Illusion 


Exiting Hyperspace Starwars Pure CSS 


 keyframes Animations


Audio Player Mp3 Modification


Scroll Back to top


Audio Player Mp3


Contact Us


HTML5 Audio Player


Dark Forest with audio





Blog Archive








        ▼ 
      



2017

(58)





        ▼ 
      



December

(1)





        ▼ 
      



Dec 25

(1)

CSS3 Slideshow Full Screen










        ► 
      



November

(2)





        ► 
      



Nov 19

(1)







        ► 
      



Nov 09

(1)









        ► 
      



October

(1)





        ► 
      



Oct 27

(1)









        ► 
      



September

(4)





        ► 
      



Sep 23

(4)









        ► 
      



August

(2)





        ► 
      



Aug 30

(1)







        ► 
      



Aug 11

(1)









        ► 
      



July

(3)





        ► 
      



Jul 30

(1)







        ► 
      



Jul 29

(1)







        ► 
      



Jul 19

(1)









        ► 
      



June

(5)





        ► 
      



Jun 27

(1)







        ► 
      



Jun 24

(1)







        ► 
      



Jun 22

(1)







        ► 
      



Jun 11

(1)







        ► 
      



Jun 10

(1)









        ► 
      



May

(8)





        ► 
      



May 27

(1)







        ► 
      



May 23

(2)







        ► 
      



May 19

(1)







        ► 
      



May 15

(1)







        ► 
      



May 14

(1)







        ► 
      



May 11

(1)







        ► 
      



May 08

(1)









        ► 
      



April

(17)





        ► 
      



Apr 22

(1)







        ► 
      



Apr 21

(1)







        ► 
      



Apr 16

(1)







        ► 
      



Apr 14

(1)







        ► 
      



Apr 13

(1)







        ► 
      



Apr 12

(1)







        ► 
      



Apr 09

(3)







        ► 
      



Apr 07

(2)







        ► 
      



Apr 05

(5)







        ► 
      



Apr 02

(1)









        ► 
      



March

(1)





        ► 
      



Mar 19

(1)









        ► 
      



February

(4)





        ► 
      



Feb 26

(1)







        ► 
      



Feb 18

(1)







        ► 
      



Feb 10

(1)







        ► 
      



Feb 05

(1)









        ► 
      



January

(10)





        ► 
      



Jan 28

(1)







        ► 
      



Jan 20

(2)







        ► 
      



Jan 07

(3)







        ► 
      



Jan 06

(2)







        ► 
      



Jan 05

(1)







        ► 
      



Jan 04

(1)











        ► 
      



2016

(193)





        ► 
      



December

(22)





        ► 
      



Dec 31

(3)







        ► 
      



Dec 29

(1)







        ► 
      



Dec 28

(2)







        ► 
      



Dec 25

(1)







        ► 
      



Dec 22

(1)







        ► 
      



Dec 19

(1)







        ► 
      



Dec 16

(2)







        ► 
      



Dec 11

(1)







        ► 
      



Dec 10

(3)







        ► 
      



Dec 07

(1)







        ► 
      



Dec 05

(1)







        ► 
      



Dec 04

(1)







        ► 
      



Dec 03

(3)







        ► 
      



Dec 02

(1)









        ► 
      



November

(2)





        ► 
      



Nov 28

(1)







        ► 
      



Nov 26

(1)









        ► 
      



September

(15)





        ► 
      



Sep 24

(1)







        ► 
      



Sep 17

(1)







        ► 
      



Sep 11

(5)







        ► 
      



Sep 10

(1)







        ► 
      



Sep 06

(2)







        ► 
      



Sep 05

(2)







        ► 
      



Sep 03

(1)







        ► 
      



Sep 02

(1)







        ► 
      



Sep 01

(1)









        ► 
      



August

(20)





        ► 
      



Aug 27

(3)







        ► 
      



Aug 26

(1)







        ► 
      



Aug 25

(1)







        ► 
      



Aug 23

(1)







        ► 
      



Aug 22

(2)







        ► 
      



Aug 15

(1)







        ► 
      



Aug 14

(2)







        ► 
      



Aug 13

(1)







        ► 
      



Aug 07

(1)







        ► 
      



Aug 06

(3)







        ► 
      



Aug 05

(1)







        ► 
      



Aug 03

(2)







        ► 
      



Aug 02

(1)









        ► 
      



July

(24)





        ► 
      



Jul 29

(1)







        ► 
      



Jul 28

(2)







        ► 
      



Jul 26

(1)







        ► 
      



Jul 25

(2)







        ► 
      



Jul 22

(3)







        ► 
      



Jul 20

(1)







        ► 
      



Jul 19

(1)







        ► 
      



Jul 18

(1)







        ► 
      



Jul 17

(3)







        ► 
      



Jul 16

(1)







        ► 
      



Jul 12

(1)







        ► 
      



Jul 09

(1)







        ► 
      



Jul 07

(1)







        ► 
      



Jul 06

(2)







        ► 
      



Jul 04

(2)







        ► 
      



Jul 01

(1)









        ► 
      



June

(8)





        ► 
      



Jun 29

(1)







        ► 
      



Jun 19

(1)







        ► 
      



Jun 18

(2)







        ► 
      



Jun 07

(1)







        ► 
      



Jun 06

(1)







        ► 
      



Jun 05

(1)







        ► 
      



Jun 04

(1)









        ► 
      



May

(19)





        ► 
      



May 31

(2)







        ► 
      



May 30

(1)







        ► 
      



May 28

(1)







        ► 
      



May 24

(5)







        ► 
      



May 19

(1)







        ► 
      



May 16

(1)







        ► 
      



May 14

(2)







        ► 
      



May 11

(1)







        ► 
      



May 07

(1)







        ► 
      



May 06

(2)







        ► 
      



May 04

(1)







        ► 
      



May 01

(1)









        ► 
      



April

(27)





        ► 
      



Apr 25

(1)







        ► 
      



Apr 24

(1)







        ► 
      



Apr 23

(3)







        ► 
      



Apr 22

(1)







        ► 
      



Apr 20

(1)







        ► 
      



Apr 19

(1)







        ► 
      



Apr 17

(1)







        ► 
      



Apr 16

(2)







        ► 
      



Apr 15

(3)







        ► 
      



Apr 14

(1)







        ► 
      



Apr 09

(2)







        ► 
      



Apr 07

(2)







        ► 
      



Apr 06

(3)







        ► 
      



Apr 04

(1)







        ► 
      



Apr 02

(1)







        ► 
      



Apr 01

(3)









        ► 
      



March

(15)





        ► 
      



Mar 31

(1)







        ► 
      



Mar 30

(1)







        ► 
      



Mar 24

(1)







        ► 
      



Mar 22

(4)







        ► 
      



Mar 10

(1)







        ► 
      



Mar 08

(1)







        ► 
      



Mar 06

(1)







        ► 
      



Mar 05

(1)







        ► 
      



Mar 03

(3)







        ► 
      



Mar 02

(1)









        ► 
      



February

(22)





        ► 
      



Feb 28

(1)







        ► 
      



Feb 26

(1)







        ► 
      



Feb 23

(2)







        ► 
      



Feb 19

(1)







        ► 
      



Feb 18

(1)







        ► 
      



Feb 16

(2)







        ► 
      



Feb 15

(2)







        ► 
      



Feb 14

(3)







        ► 
      



Feb 13

(2)







        ► 
      



Feb 11

(1)







        ► 
      



Feb 07

(3)







        ► 
      



Feb 06

(1)







        ► 
      



Feb 04

(1)







        ► 
      



Feb 03

(1)









        ► 
      



January

(19)





        ► 
      



Jan 30

(1)







        ► 
      



Jan 29

(2)







        ► 
      



Jan 28

(2)







        ► 
      



Jan 27

(1)







        ► 
      



Jan 25

(1)







        ► 
      



Jan 24

(4)







        ► 
      



Jan 17

(1)







        ► 
      



Jan 16

(3)







        ► 
      



Jan 15

(4)