HomeAll Tutorials

Perspective Mobile App Mockups

Memasang Kode  Perspective Mobile App Mockups
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:#80FFFE;height:100%;overflow:hidden;}
 /* text below */
body, html {
  height: 100%;
  font-family: 'agency fb', sans-serif;
}
.credits a  { color: #0066B3; }
.credits {
  position: absolute;
  bottom: 64px;
  right: 110px;
  color: #111;
  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 #0033CC,  
 0 -10px 24px #80FFFE;
  }
}
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;
}

/*3D Transform*/
h1 {
 color: white;
 font: 45px 'Open Sans';
 width: 500px;
 padding: 50px;
}
.grid {
 position: absolute; top: 100px; left: 0;
 /*Width = (225 + 20 + 20) * 4 = 1060*/
 width: 1060px;
 /*3D Transform*/
 transform: rotateX(60deg) rotateZ(-50deg);
 /*Preserve 3D style for children*/
 transform-style: preserve-3d;
}
.grid li {
 height: 400px; width: 225px;
 float: left; margin: 20px;
 list-style-type: none;
 /*Hide the lighting gradient from the front face*/
 background-size: 0, cover;
 /*Preserve 3D style for children(pseudo elements)*/
 transform-style: preserve-3d;
}
/*Left and Bottom Sides*/
.grid li:before, .grid li:after {
 content: '';
 position: absolute;
 /*100% height and width*/
 top: 0; left: 0; right: 0; bottom: 0;
 background: inherit;
 background-size: cover;
}
/*Left Side*/
.grid li:before {
 transform-origin: left center;
 transform: rotateY(90deg);
 /*Reducing the width of the left side for a flat feel*/
 width: 5px;
}
/*Bottom Side*/
.grid li:after {
 transform-origin: bottom center;
 transform: rotateX(90deg);
 /*Reducing the height*/
 height: 5px; top: auto; bottom: 0;
 /*Background fix - start the background from the bottom*/
 background-position: bottom center;
}
/*Shadow time - sadly all pseudo elements are used so we will have to add an HTML element in each LI*/
.s {
 position: absolute;
 /*30px smaller from each side*/
 top: 30px; left: 30px; right: 30px; bottom: 30px;
 background: rgba(0, 0, 0, 0.5);
 box-shadow: 0 0 30px 30px rgba(0, 0, 0, 0.5);
 /*Pushing down the shadow to give an elevated feel*/
 transform: translateZ(-50px);
}
/*We will add a light gradient to the sides to give some lighting effect*/
.one {
 background: 
  linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), 
  url("http://thecodeplayer.com/uploads/media/m1.png");
}
.two {
 background: 
  linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), 
  url("http://thecodeplayer.com/uploads/media/m2.png");
}
.three {
 background: 
  linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), 
  url("http://thecodeplayer.com/uploads/media/m3.png");
}
.four {
 background: 
  linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), 
  url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiquCtLj1VvLCbfkICLXdHnm0l8nrA8ReN6CKOdfKpWiYMaynyvJe3OkXK7m9K2QgM64fsGu44D4tisyTqRwxC4giID2sZTHwvlQAhyRZi4pkX5X_RCLp2u3yGdkZsJkBsTTGW9Br4VRGU/s1600-r/Sharing-Mys2010.gif");
}
</style>

<h3>
<span style="color:#6B006B">Source 
Code By. <a href="http://thecodeplayer.com/walkthrough/8d13379450355bd945bb5c0eb901c7b4"target="_blank" title="Mari Belajar"
onclick="window.open('http://codepen.io/Myscript2010/pen/eBbWpy')"> Thecodeplayer - M2010</a></h3>
<p>
</div>
</div>
</div>
<ul class="grid">
<li class="one"><span class="s"></span></li>
<li class="two"><span class="s"></span></li>
<li class="three"><span class="s"></span></li>
<li class="four"><span class="s"></span></li>
</ul>
</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://sample-mys2010.blogspot.co.id/2016/12/perspective-mobile-app-mockups.html"target="_blank"title="Visit Myscript2010">&nbsp;M-2010</a>&nbsp; COPYRIGHT 2016 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiquCtLj1VvLCbfkICLXdHnm0l8nrA8ReN6CKOdfKpWiYMaynyvJe3OkXK7m9K2QgM64fsGu44D4tisyTqRwxC4giID2sZTHwvlQAhyRZi4pkX5X_RCLp2u3yGdkZsJkBsTTGW9Br4VRGU/s1600-r/Sharing-Mys2010.gif"target="_blank"title="Animated">&nbsp;CIBEBER CIMAHI</a></p>
</div>
Source Code by. Thecodeplayer
Design code is edited by. M2010 - Codepen
DEMOSHOW
If you want to directly copy & paste you canDownload Here Perspective Mobile app

Category:

Slide show with CSS3

Memasang Kode Slideshow with CSS3
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:80px;
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:40px;
 -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  ;
  } 
}

.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: 13px;
  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%;
}

.my-slideshow,
.my-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.my-slideshow:after {
content: '';
background: transparent url(http://www.banffparklodge.com/themes/site_themes/lodge/images/transparent.png) repeat top left;
}
.my-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.my-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
.my-slideshow li div h3 {
font-family: 'Cibeber Cimahi', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px;
}
.my-slideshow li:nth-child(1) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuo0b_MA0K37HZUHNhH4OA8g9bpzzxJeiEFcptmlFSWbQpB00f7nVE53fFJnIkDUSHzMU4rjZrIQooVNftqkw2hPS-4kkyp2pPuMzrYwYdvnyejT-9NrmXm0KwJ8gjvGTGnBEVP5h2lIcX/s1600-r/spMys2010a1.jpg)
}
.my-slideshow li:nth-child(2) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZKVncapa1cTzVzVP4KeqV2tf_8nW2EYSrA8rJxaEImhNhJHWEK9MzoNIDMlzzXzRJbk0TDfclaI1I3M57NALGF_zVvG-cc7ab1DhJQwUWQwNoFP1fqO1mrZSP1XICcPyBsNmcOxwuJZ3I/s1600-r/spMys2010s3.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.my-slideshow li:nth-child(3) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9KTHiFAozIQehEIEY0UFC-EJ1ik_i2IsIqDPcxYHhf_ZFqpLqBCN2Y4wkPR6ir-WYlHfjZKs3DDpy9KcpCaX0fXGSPaOMI04MpZOcTXv1HWfLl7oxR7G5n1vd9xoDtAWzozWplpMd2ej0/s1600-r/spMys2010s2.jpg );
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.my-slideshow li:nth-child(4) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsQ6RFG8jWGzAwk8TL3I3NFPozwl3mNow_NtBeGZkYyL2akTx0aNoqmOChUifWs2F8yxrSkq-ib9FMd5y5wUa62yp9ZAeiIYRys6tDhyIJ5hyRzyvtyC2B-6IWzDiCPcXCoxvH6g3qS9uM/s1600-r/01mys2010.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.my-slideshow li:nth-child(5) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzhBZzIHczVoeiCqeIUuGsk08EWUU8UHAmlA5wqEkkwtCCp_Ly_KFo8JlCL_p9WYRncfsFS5OwoVbHU9Q-2xRQRB9i0Y0qCgPs9lHV7bxQ0o3aLGeNQP2o3YUYVDoRJVnjcPj7lXyU38fG/s1600-r/03mys2010.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.my-slideshow li:nth-child(6) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVPuJ8q7CnqVUULvruU1k-ty6ncCLUKTR0lB5Yx5nj4oIbinmOoiu7SYLTX2hm8lie19Ma8dO2g9b2Q1Q6WzLZLU9isB-qFVX_nPqR4XRV_4ficCnNMxg7gN1sLPh3xJ72egoOpoafTr0U/s1600-r/sp.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.my-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.my-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.my-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.my-slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.my-slideshow li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .my-slideshow li span{
opacity: 1;
}

@media screen and (max-width: 1140px) {
.my-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) {
.my-slideshow li div h3 { font-size: 80px }
}
</style>

<ul class="my-slideshow">
<li><span>Gambar 01</span><div>
<h4>
</h4>
</div>
</li>
<li><span>Gambar 02</span><div>
<h4>
</h4>
</div>
</li>
<li><span>Gambar 03</span><div>
<h4>
</h4>
</div>
</li>
<li><span>Gambar 04</span><div>
<h4>
</h4>
</div>
</li>
<li><span>Gambar 05</span><div>
<h4>
</h4>
</div>
</li>
<li><span>Gambar 06</span><div>
<h4>
</h4>
</div>
</li>
</ul>

<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">15-Title</a></li>
<li><a class="b-link" href="http://Link Title">16-Title</a></li>
<li><a class="b-link" href="http://Link Title">17-Title</a></li>
<li><a class="b-link" href="http://Link Title">18-Title</a></li> 
<li><a class="b-link" href="http://Link Title">19-Edited by. M2010</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/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/laguhiburan/mp3-1/sheeran.mp3">
  </source></h2>
</a></div>
</div>
<header>
<a href="http://sample-mys2010.blogspot.co.id" 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/codesule/lagu/Menu-M2010.js'>
</script> 
<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='https://sites.google.com/site/codesule/lagu/stopExecutionOnTimeout-M2010.js'>
</script>
Audio Code by. Jereme Causing
Slideshow with CSS3 code by. tympanus net
Design code is edited by. Mys2010 In Codepen
DEMOSHOW
If you want to directly copy and paste you canDownload Here Slide show with CSS3

Category:

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:

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:

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

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:

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:
Subscribe to: Posts (Atom)