Kode Warna CSS

Memasang Kode warna CSS
Login ke akun blog klik tombol blog baru, buat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  ganti dengan kode blank template, yang tersedia pada sumber  berikut ini : Get Blank Template   
edit background warna sesuai keinginan 
dan klik simpan selesai.
Kemudian klik entri halaman baru HTML pada link

tersebut. copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="Mys2010-styles">
body {
   background: #9370DB;
}

header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  10px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #222;
  border-bottom: 3px solid #dad;
}

/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #333;
background:  #000020;
border-top: 2px solid #f0f;
z-index: 9999;
} 
 
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, pink 50%, transparent 90%); 
}
  body {
  text-align: center;
}
h1 {
  color: rgba(0,0,0,.3);
  text-shadow: none !important;
}
input {
  text-align: center;
  display: inline-block;
  width: auto !important;
  margin-right: 1em;
  padding: 0 !important;
  color: black;
  line-height: 3;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,.05);
  box-shadow:
    inset rgba(0,0,0,.075) 0 -3px 10px,
    inset rgba(255,255,255,.3) 0 1px 1px,
    rgba(0,0,0,.075) 0 1px .5px,
    rgba(0,0,0,.05) 1px 3px 5px;
  cursor: pointer;
}
</style> 

<table border="" px="" solid=""><tbody>
<tr><td>
<input value="#F0F8FF" />
<input value="#FAEBD7" />
<input value="#00FFFF" />
<input value="#7FFFD4" />
</td><td>
<input value="#F0FFFF" />
<input value="#F5F5DC" />
<input value="#FFE4C4" />
<input style="color: rgba(255,255,255,.7);" value="#000000" />
</td><td>
<input value="#FFEBCD" />
<input value="#0000FF" />
<input value="#8A2BE2" />
<input style="color: rgba(255,255,255,.7);" value="#A52A2A" />
</td><td>
<input value="#DEB887" />
<input value="#5F9EAD" />
<input value="#7FFF00" />
<input value="#D2691E" />
</td><td>
<input value="#FF7F50" />
<input value="#649501" />
<input value="#249501" />
<input value="#DC143A" />
</td><td>
<input value="#00FFFF" />
<input style="color: rgba(255,255,255,.7);" value="#00008B" />
<input value="#008B8B" />
<input value="#B8860B" />
</td><td>
<input value="#A9A9A9" />
<input style="color: rgba(255,255,255,.7);" value="#006400" />
<input value="#A9A9A9" />
<input value="#BDB76B" />
</td><td>
<input style="color: rgba(255,255,255,.7);" value="#8B008B" />
<input value="#556B2F" />
<input value="#FF8C00" />
<input value="#9932CC" />
</td></tr>
</tbody></table>
<table border="" px="" solid=""><tbody>
<tr><td>
<input style="color: rgba(255,255,255,.7);" value="#8B0000" />
<input value="#E9967A" />
<input value="#8FBC8B" />
<input style="color: rgba(255,255,255,.7);" value="#483D8B" />
</td><td>
<input style="color: rgba(255,255,255,.7);" value="#2F4F4F" />
<input value="#00CED1" />
<input value="#9400D3" />
<input value="#FF1493" />
</td><td>
<input value="#00BFFF" />
<input value="#FF0000" />
<input value="#696969" />
<input value="#1E90FF" />
</td><td>
<input value="#B22222" />
<input value="#FFFAF0" />
<input value="#228B22" />
<input value="#FF00FF" />
</td><td>
<input value="#DCDCDC" />
<input value="#F8F8FF" />
<input value="#FFD700" />
<input value="#DAA520" />
</td><td>
<input value="#808080" />
<input value="#008000" />
<input value="#ADFF2F" />
<input value="#808080" />
</td><td>
<input value="#F0FFF0" />
<input value="#FF69B4" />
<input value="#CD5C5C" />
<input style="color: rgba(255,255,255,.7);" value="#4B0082" />
</td><td>
<input value="#FFFFF0" />
<input value="#F0E68C" />
<input value="#E6E6FA" />
<input value="#FFF0F5" />
</td></tr>
</tbody></table>
<table border="" px="" solid=""><tbody>
<tr><td>
<input value="#7CFC00" />
<input value="#FFFACD" />
<input value="#ADE8E6" />
<input value="#F08080" />
</td><td>
<input value="#E0FFFF" />
<input value="#FAFAD2" />
<input value="#D3D3D3" />
<input value="#90EE90" />
</td><td>
<input value="#D3D3D3" />
<input value="#FFB6C1" />
<input value="#FFA072" />
<input value="#20B2AA" />
</td><td>
<input value="#87CEFA" />
<input value="#778899" />
<input value="#666666" />
<input value="#B0C4DE" />
</td><td>
<input value="#FFFFE0" />
<input value="#00FF00" />
<input value="#32CD32" />
<input value="#FAF0E6" />
</td><td>
<input value="#FF00FF" />
<input style="color: rgba(255,255,255,.7);" value="#800000" />
<input value="#66CDAA" />
<input style="color: rgba(255,255,255,.7);" value="#0000CD" />
</td><td>
<input value="#BA55D3" />
<input value="#9370DB" />
<input value="#3CB371" />
<input value="#7B68EE" />
</td><td>
<input value="#00FA9A" />
<input value="#48D1CC" />
<input value="#C71585" />
<input style="color: rgba(255,255,255,.7);" value="#191970" />
</td></tr>
</tbody></table>
<table border="" px="" solid=""><tbody>
<tr><td>
<input value="#F5FFFA" />
<input value="#FFE4E1" />
<input value="#FFDEAD" />
<input style="color: rgba(255,255,255,.7);" value="navy" />
</td><td>
<input value="#FDF5E6" />
<input value="#808000" />
<input value="#6B8E23" />
<input value="#FFA500" />
</td><td>
<input value="#FF1000" />
<input value="#DA70D6" />
<input value="#EEE8AA" />
<input value="#98FB98" />
</td><td>
<input value="#AFEEEE" />
<input value="#DB7093" />
<input value="#FFEFD5" />
<input value="#FFDAB9" />
</td><td>
<input value="#CD853F" />
<input value="#FFC0CB" />
<input value="#DDA0DD" />
<input value="#B0E0E6" />
</td><td>
<input style="color: rgba(255,255,255,.7);" value="#800080" />
<input value="#FF0000" />
<input value="#BC8F8F" />
<input value="#4169E1" />
</td><td>
<input style="color: rgba(255,255,255,.7);" value="#8B4513" />
<input value="#FA8072" />
<input value="#F4A460" />
<input value="#2E8B57" />
</td><td>
<input value="#FFF5EE" />
<input value="#A0522D" />
<input value="#C0C0C0" />
<input value="#87CEEB" />
</td></tr>
</tbody></table>
<table border="" px="" solid=""><tbody>
<tr><td>
<input value="#7B68EE" />
<input value="#708090" />
<input value="#00ffcc" />
<input value="#FFFAFA" />
</td><td>
<input value="#00FF7F" />
<input value="#4682B4" />
<input value="#D2B48C" />
<input value="#008080" />
</td><td>
<input value="#D8BFD8" />
<input value="#FF6347" />
<input value="#40E0D0" />
<input value="#EE82EE" />
</td><td>
<input value="#F5DEB3" />
<input value="#FFFFFF" />
<input value="#F5F5F5" />
<input value="#FFFF00" />
</td><td>
<input value="#FF3300" />
<input value="#CC33CC" />
<input value="#9966FF" />
<input value="#FFFccc" />
</td><td>
<input value="#660000" />
<input value="#003300" />
<input value="#0066CC" />
<input value="#00FFCC" />
</td><td>
<input value="#FF3333" />
<input value="#CC3344" />
<input value="#996655" />
<input value="#FFFF66" />
</td><td>
<input value="#660077" />
<input value="#003388" />
<input value="#006699" />
<input value="#00FF11" />
</td></tr>
</tbody></table>
<table border="" px="" solid=""><tbody>
<tr><td>
<input value="rgb(255,0,0)" />
<input value="rgb(104,0,0)" />
<input value="RGB(128,128,128)" />
<input value="rgb(248,0,0)" />
</td><td>
<input value="rgb(48,0,0)" />
<input value="rgb(255,255,255)" />
<input value="rgb(192,192,192)" />
<input value="rgb(255,0,255)" />
</td><td>
<input value="rgb(0,255,255)" />
<input value="rgb(255,255,0)" />
<input value="rgb(0,255,0)" />
<input value="rgb(255,0,0)" />
</td><td>
<input value="rgb(255,0,0)" />
<input value="rgb(208,0,0)" />
<input value="rgb(64,64,64)" />
<input value="rgb(224,224,224)" />
</td><td>
<input value="rgb(51,51,51)" />
<input value="rgb(153,246,20)" />
<input value="rgb(0,128,128)" />
<input value="rgb(52,52,52)" />
</td><td>
<input value="rgb(0,122,122)" />
<input value="rgb(0,322,322)" />
<input value="rgb(0,722,022)" />
<input value="rgb(07,57,07)" />
</td><td>
<input value="rgb(0,0,255,1)" />
<input value="rgb(8,511,5)" />
<input value="rgba(255,0,0,0.3)" />
<input value="rgba(0,0,255,0.6)" />
</td><td>
<input value="rgb(599,9,9)" />
<input value="rgb(150,0,0)" />
<input value="rgb(122,0,2)" />
<input value="rgb(255,0,0)" />
</td></tr>
</tbody></table>

<div class="ap" id="ap">
<div align="center">
<h2>
<a href="https://sites.google.com/site/code6916/file/kode-warna-mys2010.css" title="Myscript2010s">DOWNLOAD CODE</a></h2>
</div>
</div>
</center>

<header> 
<div class="Top Title Header">
<div align="center">
<a href="http://myscript2010s.blogspot.co.id/2015/11/kode-warna.html" title="Myscript2010s"><b>KODE WARNA CSS</b></a></div>
</div>
</header>

<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1">
</script>
<script src="//elementqueries.com/EQCSS-polyfills.js">
</script>
<script src="//elementqueries.com/EQCSS.js">
</script>

<script>var el = document.getElementsByTagName('input');
for (i = 0; i < el.length; i++) {
    if (window.CP.shouldStopExecution(1)) {
        break;
    }
    el[i].style.background = el[i].value;
    el[i].addEventListener('click', function () {
        document.body.style.background = document.documentElement.style.background = this.value;
        document.querySelector('h1').style.color = this.style.color ? 'rgba(255,255,255,.7)' : 'rgba(0,0,0,.7)';
    });
}
window.CP.exitedLoop(1); 
</script>

Source Code by. Codepen
Design code is edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy and paste you canDownload Here Kode Warna CSS 

Category: Kode Warna CSS

Animated Sea with Audio

Memasang Kode Animated Sea with Audio
Login ke akun blog klik tombol blog baru, buat satubuah link baru  
kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  ganti dengan kode blank template, yang tersedia pada sumber  berikut ini :
Get Blank Template    edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

 <style class="Mys2010-styles">
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding: 0 px 0;
  position: fixed;
  top: 0 ;
  width: 100%;
  background: #222;
  border-bottom: 3px solid #dad;
}
.ap {
position: fixed;
right: 0;
bottom:-15px;
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;
color: #333;
background:  #000020;
border-top: 2px solid #f0f;
z-index: 9999;
} 
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, pink 50%, transparent 90%); 
}
#M-2010, #teks, #posisi, #dibawah  {
    position: absolute;
    font-size: 11px;
    margin: 2px
}
#M-2010, #teks div {
    text-decoration: underline;
    cursor: pointer
}
#teks, #posisi {
    text-align: right;
    right:  50px;
}
#teks, #dibawah {
    text-align: left;
    left:  50px;
}
 #dibawah, #posisi {
    bottom:25px;
}

html,
body {
margin: 0;
padding: 0;
height: 100%;
}
body {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW8V8XUHlxQBkVPJr30PVwXKJ8NPfXORMfaphP1s5CXA258JVu5wjNNsaiQsGCShOeKxx3ghKZBWIWxX0RaOou5row-H5bJ9vgHQlkT0jslbDCrMDNFJliAQng2NBB3ZFyoIpweeQcR1Dt/s1600-r/Laut-Animasi-Mys2010.gif");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

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

@-webkit-keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}

@keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@-webkit-keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@-webkit-keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
@keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}

.animation-mys2010 {position:absolute;bottom:0;width:100   ; }
.window {position:absolute;left:30px;top:10px;}
.bugaloos { position:absolute;left:430px;top:190px;
  animation-name: float;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;}
  .backwall {position:absolute;width:6%;height:60%;}

@keyframes float {
  0% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(-10px);
  }
  100% {
    transform:translateY(0);
  }
}

.Flying-mys2010 {
 z-index: 600;
 cursor: pointer;
 -webkit-animation: Flying-mys2010 38s infinite linear;
 -moz-animation: Flying-mys2010 38s infinite linear;
 -ms-animation: Flying-mys2010 38s infinite linear;
 -o-animation: Flying-mys2010 38s infinite linear;
 animation: Flying-mys2010 38s infinite linear;
 bottom: 10%;
 left: 0%;
 position: absolute;
}
@keyframes Flying-mys2010 {
25% {
bottom: 80%;
left: 85%;
transform: rotateY(0deg);
}
26% {
transform: rotateY(180deg);
}
50% {
 bottom:60%;
 left: 0%;
 transform: rotateY(180deg);
}
51% {
 transform: rotateY(0deg);
}
75% {
 bottom:40%;
 left: 85%;
 transform: rotateY(0deg);}
76% {
 bottom:40%;
 left: 85%;
 transform: rotateY(180deg);
}
99% {
 transform: rotateY(180deg);}}

@keyframes float {
  0% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(-10px);
  }
  100% {
    transform:translateY(0);
  }
}

.player {
    
    width: 210px;
    height: 5px; 
    border-radius: 10px;
    padding: 10px;
    font-size: 16px;
    color: #fff;
    font-family: arial, sans-serif;
}
.player .source-ctrl-container {
    float: left;
    position: relative;
    cursor: pointer;
    color: #dad;}
.player .volume-ctrl-container {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-top: 0px;
    height: 50px;
    width: 118px;
    float: right;
}
.player .fa-pause {
    position: absolute;
    top: 7px;
    left: 18px;
}
.player .fa-play {
    position: absolute;
    top: 7px;
    left: 20px;
}
.player .time-info {
    clear: both;
    position: relative;
    top: 8px;
    text-align: center;
    font-size: 13px;
}
.player .time-current {
    color: #ff0;
}
.player .volume-slider {
    display: inline-block;
    height: 2px;
    width: 50px;
    background: #666;
    margin: 0 10px;
    position: relative;
    top: -10px;
}
.player .volume-knob {
    background: #fff;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    position: relative;
    top: -6px;
}   
 </style>

<div id="animation-mys2010">
<div class="insidewalls" id="animation-mys2010">
<img border="0" class="bugaloos" src="http://khezo.com/wp-content/uploads/2013/06/Animasi-kelelawar-vampire.gif" height="29" name="e902" width="28" />
<div id="Flying-mys2010" class="slow">
<div id="Flying-mys2010" class="slow">
<img class="Flying-mys2010" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaZuiWPiDWCKbHXkZ8CiCP9qesYzqYK2sv7vy1mgJJRBGfE25pXn1yGegDL0R5Q2IoUvOCIswWxaX_hgDVK2Ctj216laKCMEJcbDoT6QgvtDrHPJGpfyxpKO3EgwII9wfc53XFpPwjBp5/s1600-r/kalong-mys2010.gif"name="e902" border="0" width="60" height="90" /></a>

<div class="ap" id="ap">
<div align="center">
<h2>
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> EDITED BY. <a href="https://Link Download"title="Download Full Code"><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:#fff;"> COPYRIGHT <a href="http://codepen.io/Myscript2010" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> 
</div> 
<a href="#"title="Myscript2010s">  
CIBEBER CIMAHI</h2></a>  
</div>
<header> 
<div class="Top Title Header">
<div align="center">
<audio id="player">
<source src="https://sites.google.com/site/code6916/lagu/Now-and-forever-Mys2010s.mp3" type="audio/mpeg">
</audio>
</div>
</header>

<h1>
<span><a href="http://myscript2010s.blogspot.co.id" target="_blank" title="Myscript2010"> Mys2010</a></span><span><a href="http://sample-mys2010.blogspot.co.id/p/statis-home.html" target="_blank" title="Css Effect">Effects</a></span></h1>

<link rel='stylesheet prefetch' href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script><script src='//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js'></script><script src='http://cdnjs.cloudflare.com/ajax/libs/mootools-more/1.4.0.1/mootools-more-yui-compressed.js'>
</script>

<script>
"use strict";
/**
 * Requires mootools core and mootools more Slider
 */
var Player = function(audio_element, options) {
    this.audio_obj = document.id(audio_element);
    this.options = options;
    this.init = function() {
        this.status = 'pause';
        //this.duration = this.audio_obj.duration;
        this.time = '00';
        this.render();
        this.addEvents();
    };
    this.render = function() {
        // source controller
        this.source_ctrl_el = new Element('div.source-ctrl.fa.fa-play');
        this.source_ctrl_button = new Element('div.source-ctrl-container')
            .adopt(this.source_ctrl_el);
        // time info
        this.time_current_el = new Element('span.time-current');
        this.time_duration_el = new Element('span.time-duration');
        var time_info = new Element('div.time-info')
            .adopt(
                this.time_current_el,
                new Element('span.time-current-duration-separator').set('text', ' / '),
                this.time_duration_el
            );
        // volume ctrl
        this.volume_slider = new Element('div.volume-slider');
        this.volume_ctrl = new Element('div.volume-ctrl')
            .adopt(
                new Element('span.fa.fa-2x.fa-volume-off'),
                this.volume_slider.adopt( new Element('div.volume-knob')),
                new Element('span.fa.fa-2x.fa-volume-up')
            );
        var container = new Element('div.player')
            .adopt(
                this.source_ctrl_button,
                new Element('div.volume-ctrl-container').adopt(this.volume_ctrl),
                time_info
            )
            .inject(this.audio_obj, 'after');
    };
    this.addEvents = function() {
        this.audio_obj.load();
        this.audio_obj.addEventListener('loadeddata', function() { 
            this.time_duration_el.set('text', this.toHHMMSS(this.audio_obj.duration));
            this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        }.bind(this));
        this.source_ctrl_button.addEvent('click', this.sourceCtrlAction.bind(this));
        new Slider(this.volume_slider, this.volume_slider.getElement('.volume-knob'), {
            range: [0, 100],
            initialStep: this.audio_obj.volume * 100,
            onChange: function(value){
                this.audio_obj.volume = value/100;
            }.bind(this)
        });
    };
    this.sourceCtrlAction = function() {
        if(this.status == 'pause') {
            this.play();
        }
        else {
            this.pause();
        }
    };
    this.toHHMMSS = function(s) {
        var sec_num = parseInt(s, 10);
        var hours   = Math.floor(sec_num / 3600);
        var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
        var seconds = sec_num - (hours * 3600) - (minutes * 60);
        if(hours   < 10) { hours   = "0" + hours; }
        if(minutes < 10) { minutes = "0" + minutes; }
        if(seconds < 10) { seconds = "0" + seconds; }
        var time = (hours == '00' ? '' : hours + ':') + minutes + ':' + seconds;
        return time;
    }
    this.play = function() {
        this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        this.time_ti = setInterval(function() {
            this.time_current_el.set('text', this.toHHMMSS(this.audio_obj.currentTime));
        }.bind(this), 1000);
        this.source_ctrl_el.removeClass('fa-play').addClass('fa-pause');
        this.audio_obj.play();
        this.status = 'play';
    };
    this.pause = function() {
        clearInterval(this.time_ti);
        this.source_ctrl_el.removeClass('fa-pause').addClass('fa-play');
        this.audio_obj.pause();
        this.status = 'pause';
    };
}
var player = new Player('player');
player.init();
</script>

Audio Code by. Cartoonist ARiF 
Design code is edited by. Mys2010 on Codepen 

DEMOSHOW

If you want to directly copy and paste you canDownload Here Animated Sea Audio

Category: Animated Sea with Audio

Post Komentar

Category: Post Komentar

Animated Book Covers

Memasang Kode Animated Book Covers
Login ke akun blog klik tombol blog baru, buat satubuah link baru  
kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  ganti dengan kode blank template, yang tersedia pada sumber  berikut ini :
Get Blank Template    
edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="Mys2010-styles"> 
.animated-promos, .animated-promos li {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}
.animated-promos li {
  float: left;
}
.animated-promos a {
  display: block;
}
.animated-promos li {
  position: relative;
  margin-right: 60px;
}
.animated-promos .book-cover {
  position: relative;
  z-index: 10;
  transition: all 0.5s ease-in-out 0s;
}
.animated-promos .promo-disc {
  position: absolute;
  z-index: 1;
  bottom: 70px;
  left: 93px;
  transition: all 0.5s ease-in-out 0s;
}
.animated-promos a:hover .promo-disc, .animated-promos a:focus .promo-disc {
  transform: translate(20px, 0px) rotate(320deg);
}
.animated-promos a:hover .book-cover, .animated-promos a:focus .book-cover {
  transform: rotate(-2deg);
  transform-origin: 50% 100%;
}
.book-cover {
  border: 10px solid #fff;
}
body {
  background-color: #cecece;
  padding: 20px;
}
a {
  color: #a20000;
}
/* clearfix */
.clearfix:after {
  clear: both;
  content: ".";
  display: block;
  font-size: 0;
  height: 0;
  visibility: hidden;
}
.clearfix {
  display: block;
}
/* extra for Safari */
.clearfix {
  *height: 1%;
}
/* trigger hasLayout for IE6 + 7*/
</style>

<ul class="animated-promos clearfix">
 <li>
  <a href="">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/cover3-klein.png" alt="First book cover" class="book-cover">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/promo-disc-klein.png" alt="promotion disc, a DVD" class="promo-disc">
   <h3>Book #1</h3>
  </a>
 </li>
 <li>
  <a href="">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/cover2-klein.png" alt="Second book cover" class="book-cover">
   <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/promo-disc-klein.png" alt="promotion disc, a DVD" class="promo-disc">
   <h3>Another hillarious book</h3>
  </a>
 </li></ul>

<link rel='stylesheet prefetch' href='https://sites.google.com/site/code6916/file/box-sizing-mys2010.css'>

Penjelasan :
Untuk memodifikasi kode tersebut tambahkan kode Outer di bawah ini :

.outer
{
 width:150px;
 height:220px;
 float:left;
 background-size:contain;
 overflow:hidden;
 box-sizing:border-box;
 margin:10px 18px 10px 18px;
 box-shadow:1px 1px 5px #111;}
/*end Outer*/
#topbar .Mys2010 {  
  code-modification: Mys #2010;
}

Terapkan di atas kode </style> kemudian tambahkan kode teks 3D

h1 {
  text-align: center;
  font: bold 80px Sans-Serif;
  padding: 0px 0;
}

.otto {
  background: #fff;
  color: #F0FFF0;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);}

Terapkan di bawah Kode

#topbar .Mys2010 {  
  code-modification: Mys #2010;
}

Selanjutnya hapus semua Kode yang berwarna putih
ganti dengan kode di bawah ini, terapkan di bawah kode  </style>

<h1 class="otto">
BOOK COVERS
</h1>
<center>
<div id="topbar">
<table  border"2px solid">
<tr><td>
<ul class="animated-promos clearfix">
<li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmihdAZkFDa7NOkPosk4CFZyHDl6p0YRyp_Gc7a9V-IVCJ-JtPWiCQ_A5IReGYNv78nYv_cvvFYfwdy-Za7YqQTihJ2tXMU2goMTc7VZVRMWAR1FgEh3JWLDzMQ1hXpMj2yxbz8GAMa5KA/s1600-r/aa.jpg">
<section>
<div class="outer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7xMZiEnxLCcgf_aAzGlv2Z42OXwWVgLk7ysG9faEMQ9UdlFuojkcD5O7v87CS6n-QbJJTY-RxPIsEunbXEOlab_G_efUy89n9q0S47y0xtmlFnxVwo8jmDex6PuarxvkDTh0fPtIzpggf/s1600-r/buku-mys2010.jpg" alt="First book cover" class="book-cover">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt6tM3Uxc09SKLf4S5AwSRnd4wutJKirBzkUziBP1ZvZ45Zw2o07kxh4DNz3kKXou8CP8pTWuH9y4NW0xsrXKvA81xIw4YYXfa5Dl3doCYxYkQIG4MRwNh5I1vylEZew_y37Kr6r3y7eSI/s1600-r/dvd-mys2010.png" alt="promotion disc, a DVD" class="promo-disc">
</a>
</li>
<li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmihdAZkFDa7NOkPosk4CFZyHDl6p0YRyp_Gc7a9V-IVCJ-JtPWiCQ_A5IReGYNv78nYv_cvvFYfwdy-Za7YqQTihJ2tXMU2goMTc7VZVRMWAR1FgEh3JWLDzMQ1hXpMj2yxbz8GAMa5KA/s1600-r/aa.jpg">
<section>
<div class="outer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7xMZiEnxLCcgf_aAzGlv2Z42OXwWVgLk7ysG9faEMQ9UdlFuojkcD5O7v87CS6n-QbJJTY-RxPIsEunbXEOlab_G_efUy89n9q0S47y0xtmlFnxVwo8jmDex6PuarxvkDTh0fPtIzpggf/s1600-r/buku-mys2010.jpg" alt="First book cover" class="book-cover">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt6tM3Uxc09SKLf4S5AwSRnd4wutJKirBzkUziBP1ZvZ45Zw2o07kxh4DNz3kKXou8CP8pTWuH9y4NW0xsrXKvA81xIw4YYXfa5Dl3doCYxYkQIG4MRwNh5I1vylEZew_y37Kr6r3y7eSI/s1600-r/dvd-mys2010.png" alt="promotion disc, a DVD" class="promo-disc">
</a>
</li>
</ul>
</td><td> 
<ul class="animated-promos clearfix">
<li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmihdAZkFDa7NOkPosk4CFZyHDl6p0YRyp_Gc7a9V-IVCJ-JtPWiCQ_A5IReGYNv78nYv_cvvFYfwdy-Za7YqQTihJ2tXMU2goMTc7VZVRMWAR1FgEh3JWLDzMQ1hXpMj2yxbz8GAMa5KA/s1600-r/aa.jpg">
<section>
<div class="outer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7xMZiEnxLCcgf_aAzGlv2Z42OXwWVgLk7ysG9faEMQ9UdlFuojkcD5O7v87CS6n-QbJJTY-RxPIsEunbXEOlab_G_efUy89n9q0S47y0xtmlFnxVwo8jmDex6PuarxvkDTh0fPtIzpggf/s1600-r/buku-mys2010.jpg" alt="First book cover" class="book-cover">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt6tM3Uxc09SKLf4S5AwSRnd4wutJKirBzkUziBP1ZvZ45Zw2o07kxh4DNz3kKXou8CP8pTWuH9y4NW0xsrXKvA81xIw4YYXfa5Dl3doCYxYkQIG4MRwNh5I1vylEZew_y37Kr6r3y7eSI/s1600-r/dvd-mys2010.png" alt="promotion disc, a DVD" class="promo-disc">
</a>
</li>
<li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmihdAZkFDa7NOkPosk4CFZyHDl6p0YRyp_Gc7a9V-IVCJ-JtPWiCQ_A5IReGYNv78nYv_cvvFYfwdy-Za7YqQTihJ2tXMU2goMTc7VZVRMWAR1FgEh3JWLDzMQ1hXpMj2yxbz8GAMa5KA/s1600-r/aa.jpg">
<section>
<div class="outer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7xMZiEnxLCcgf_aAzGlv2Z42OXwWVgLk7ysG9faEMQ9UdlFuojkcD5O7v87CS6n-QbJJTY-RxPIsEunbXEOlab_G_efUy89n9q0S47y0xtmlFnxVwo8jmDex6PuarxvkDTh0fPtIzpggf/s1600-r/buku-mys2010.jpg" alt="First book cover" class="book-cover">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt6tM3Uxc09SKLf4S5AwSRnd4wutJKirBzkUziBP1ZvZ45Zw2o07kxh4DNz3kKXou8CP8pTWuH9y4NW0xsrXKvA81xIw4YYXfa5Dl3doCYxYkQIG4MRwNh5I1vylEZew_y37Kr6r3y7eSI/s1600-r/dvd-mys2010.png" alt="promotion disc, a DVD" class="promo-disc">
</a>
</li>
</ul>
</table>
<link rel='stylesheet prefetch' href='https://sites.google.com/site/code6916/file/box-sizing-mys2010.css'>

Untuk melihat hasil klik pratinjau dan untuk penyimpanan klik perbarui selesai

Source Code by. Jens Grochtdreis 
Design code is edited by. Mys2010 on Codepen 

DEMOSHOW

If you want to directly copy and paste you canDownload Here Animated Book Covers

Category: Animated Book Covers

CSS3 Rotating Image Hover

Memasang Gambar dengan effect hover
Menampilkan gambar dan gambar akan menampilkan Link Title  ketika cursor menyentuh gambar tersebut, berikut cara penerapannya : Login ke akun blog klik entri halaman baru HTML copy kode dibawah ini pastekan kedalam halaman baru HTML dan klik simpan selesai. Untuk penerapan gunakan Kode Blank Template

<style>
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:    0px 0;
  position: fixed;
  top:  0;
  width: 100%;
  background: #222;
  border-bottom: 3px solid #dad;
}
/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #333;
background:  #000020;
border-top: 2px solid #f0f;
z-index: 9999;
} 
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, pink 50%, transparent 90%); 
}

*{    margin:0px;
 padding:0px;}
body
{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib77D3CtqUisVw8uiyCwAtt97g6U8X9MlVJiVyL0ESz0K9HU-DVkWP0Ha1KAEt2TELgTV-kNhDBFfe_MLc0UNpPmm_xM6SpZ7Y-q6_mkJr_SywJRNTsPWBJ2DLkcgDGtEHUGhwjGRZF1vn/s1600-r/pSGRMWg.jpg);
 background-size:cover;
 background-repeat:no-repeat;
 font-family:Arial, Helvetica, sans-serif;
 }
.container{
 width:85%;
 min-height:500px;
 margin:0px auto;
 padding:0px; 
}
header
{
 width:100%;
 height: 45px;
 float:left;
 text-align:center;
 margin-top: 0px;
}
.text
{
 font-size:46px;
 font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
 text-shadow:-1px 2px 1px #999;
 font-weight:bolder;
 line-height:50px;
 padding: 0px;
 color:rgba(51,0,102,1);
}
section
{
 width:100%;
 float:left;
 height:auto;
}
h3
{
 padding: 0px;
 font-size:24px;
 color:#fff;
 font-weight:bold;
 font-family:cursive, sans-serif, serif; 
}p{
 color:#fff;
 font-size:14px;
 padding:0px  0px;
 
}img{
 width:100%;
 height:100%;
 background-size:contain;
}
button
{
 opacity:1;
 width:100px;
 height:30px;
 background-color:#000;
 border:none;
 outline:none;
 color:#fff;
}
.outer
{
 width:250px;
 height:250px;
 float:left;
 background-size:contain;
 overflow:hidden;
 box-sizing:border-box;
 margin:10px 18px 10px 18px;
 box-shadow:0px 0px 5px #000;
}
.hvr-rotate
{
 width:100%;
 height:100%;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  background: #2098d1;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
 position:relative;
}
.mask-rotate
{
 content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:rgba(0,0,0,0.40);
  opacity:0;  
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  text-align:center;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
 transform: rotate(100deg); /* div rotate by 100 deg*/
 /* -moz-transform: rotate(100deg);
  -ms-transform: rotate(100deg);
  -o-transform: rotate(100deg);
  -webkit-transform: rotate(100deg);*/
  text-align:center;
  backface-visibility: hidden;
}
.drop
{
 top:150px;
 left:65px;
 position:absolute;
 transform: translateZ(0);
 opacity:1;
 backface-visibility: hidden;
}
.hvr-rotate:hover .mask-rotate
{
 opacity:1;
  transform: rotate(0deg); /* default*/
 /*
 ******** These are prefix for different Browsers*********
 
  -moz-transform: rotate(10deg); // Mozilla
  -ms-transform: rotate(10deg);  // Microsoft Internet Explored
  -o-transform: rotate(10deg);  // Opera
  -webkit-transform: rotate(10deg);  // Chrome and Safari */ 
}
button:hover
{
 background-color:rgba(255,0,0,1);
}
</style>

<center>
<p class="text">
Image Hover Effects</p>
<table  border"2px solid">
<tr><td>
<section>
<div class="outer">
<div class="hvr-rotate">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRnFoYkLOSxUuvnV8wgOFdcqsDgxCFhIC2y5OhSuoOOIXNl6-X6zYwCJ0-gIPEg0nRzmcoH5Fn_rCTPGEHdp1S0jZ1fXKoqw2byur8t4BfmTtEeBO6PzLPFJ2HkxPo1J_aq47StKTID878/s1600-r/yayang5.jpg" >
<div class="mask-rotate">

<h3>
Myscript2010</h3>
<p>
Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar
</p>
<button onclick="window.open('http://myscript2010error.blogspot.co.id/p/error-page-not-found.html','_blank');">Read More 1</button>
</div>
</div>
</div>
</td><td>

<div class="outer">
<div class="hvr-rotate">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7yJgYZ5fzM507tQQZ3Ngqi4j6DQ0aBFP0OaYhyzosbCqAY3flDmiXQgf6c3WbkvtUL8oYjovsSjLdbfDLcXhMmTifleWUVwjupjZoi7P_Iaw-_iRX1p6ImNd04wbSzcbTV7zW7O5SQk_e/s1600-r/yayang6.jpg">
<div class="mask-rotate">
<h3>
Myscript2010</h3>
<p>
Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar
</p>
<button onclick="window.open('http://myscript2010error.blogspot.co.id/p/error-page-not-found.html','_blank');">Read More 2</button>
</div>
</div>
</div>
</td><td>

<div class="outer">
<div class="hvr-rotate">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3rLZP0G-_MkGbG2KtNJpmKt27OcM-idU1GD1awonCT1sIV1UexUpGzF2kjGOwvIjdH4DwMMRZKYgkqB6DZUdQIwg2DYQlZXXwTa22VWDgl4OHv1CySeTwEtDM7mMyXOXspUqEgk7715iM/s1600-r/yayang5.jpg">
<div class="mask-rotate">
<h3>
Myscript2010</h3>
<p>
Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar
</p>
<button onclick="window.open('http://myscript2010error.blogspot.co.id/p/error-page-not-found.html','_blank');">Read More 3</button>
</div>
</div>
</div>
</table>
<table><table  border"2px solid">
<tr><td>
<div class="outer">
<div class="hvr-rotate">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF4qjTjZ0DdNRt9yz4mwJA94-3qgzJZlMHYqFj7D-l191xsg82NrIeRbgvzdCIksU6mcpxG6E9r5mN0HBKka1Z7bWbSM160u04bgrP2Kp4aG0KJzYQdiXBf3pXg7NDCTNzL0N-MEqfLNMS/s1600-r/yayang3.jpg">
<div class="mask-rotate">

<h3>
Myscript2010</h3>
<p>
Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar
</p>
<button onclick="window.open('http://myscript2010error.blogspot.co.id/p/error-page-not-found.html','_blank');">Read More 1</button>
</div>
</div>
</div>
</td><td>
<div class="outer">
<div class="hvr-rotate">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTko9b20oD3_wZLsBpRs1t5sE_60VUi6Z0JCamv4G85Rhpfs40MZ2iB_LEHRzhdT7f13cjQZN6wl-VHqIA4HyrxHgKdtTK88Yugu-SVjdXy2BvTczvHTEHwB66rG-KllBL0f3UsiCRzwdt/s1600-r/yayang2.jpg">
<div class="mask-rotate">

<h3>
Myscript2010</h3>
<p>
Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar
</p>
<button onclick="window.open('http://myscript2010error.blogspot.co.id/p/error-page-not-found.html','_blank');">Read More 2</button>
</div>
</div>
</div>
</td><td>

<div class="outer">
<div class="hvr-rotate">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihJ003GlC_uFrusbhMqHRfZ6HVRyB5qYqBFw8J6fb1KK-hRbTe7ZVmIcLp0FZQ-bY_vla5iHhf0i5nSwIx5rHHvkbho5jtWPkeE7_ZfTAlcGdwtEu-LgauTKTzh0fauez9DH-JAFC3kx1Z/s1600-r/yayang1.jpg">
<div class="mask-rotate">
<h3>
Myscript2010</h3>
<p>
Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar Mari Belajar
</p>
<button onclick="window.open('http://myscript2010error.blogspot.co.id/p/error-page-not-found.html','_blank');">Read More 3</button>
</div>
</div>
</div>
</section>
</div>
</table>

<header> 
<div class="Top Title Header">
<div align="center">
<a href="https://sites.google.com/site/code6916/file/Rotating-Image-Hovers-Mys2010.css"title="Myscript2010s"><font size="1" color="orange"face="arial"> <b>DOWNLOAD FULL CODE</b>
</div>
</header>

<div class="ap" id="ap">
<div align="center">
<a href="http://myscript2010s.blogspot.co.id/2016/01/rotating-image-hover.html" target="_blank" title="Rotating Image Hover">
<h2>
ROTATING IMAGE HOVER EFFECTS</2></a>  
</div>

Source Code by. Phpludhiana 
Design code is edited by. Mys2010 on Codepen 

DEMOSHOW

If you want to directly copy and paste you canDownload Here Rotating Image Hover

Category: CSS3 Rotating Image Hover

Kode Iklan Melayang

Kode Script Iklan melayang
kode ini dapat menampilkan gambar dengan format jpg, gif, png, serta dapat menampilkan script dengan cara menambahkan kode textarea. Untuk penerapannya Login ke akun blog, klik tata letak dan klik tambahgadged, copy kode dibawah ini : terapkan kedalam ruang gadged tersebutkemudian klik simpan selesai

<style type="text/css">

#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:#fff;
 margin:0;
 padding:4px;
 width: 250px;
 border: 1px solid #444;
}
</style>

<div id="topbar">
<div class="tombol"><a href="" onclick="closebar(); return false" style="text-decoration: none;"><button>Tutup</button></a></div>
<div class="isi_iklan">
<a href="http://toyotanasmoco.net/category/rush" target="_blank"> 
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv0xkhqXUTkhBpw0cyQX280cUg2TLOSgsBPf5G7hsx7pVYazlAB-VFHOhy1CwDDu425AZps4_luYNltHyALscalOv3VAWtnSOe7VTZRDStvIvr57tAjXMAz6kjfhLSTIK62Z2VbJ6EKQE/s1600/iklan-rush.gif
" name="e902" border="0" width="250" height="150" /></a></script>

<script src="https://sites.google.com/site/code6916/file/Kode-Iklan-Melayang-Mys2010.js" type="text/javascript"></script>
<script type="text/javascript">
var persistclose=1
var startX = 20
var startY = 20
var verticalpos="fromtop"
</script>

Source Code by. Blogcunayz
Design code is edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy and paste you canDownload Here Floating ad code

Category: Kode Iklan Melayang

Movie Credits

Memasang Code Movie Credit :
Login ke akun blog klik tombol blog baru, buat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  ganti dengan kode blank template, yang tersedia pada sumber  berikut ini : Get Blank Template      

edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="Mys2010-styles">
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #333;
  border-bottom: 3px solid #dad;
}
/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 40px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 14px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #333;
background: #222;
border-top: 2px solid #f0f;
z-index: 9999;
}  

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  background: radial-gradient(ellipse at top left, #334455 0%, #112233 100%);
  overflow: hidden;
}

.wrapper {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 400px;
  margin-left: -200px;
  font: 300 30px/1 'Open Sans Condensed', sans-serif;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  animation: 60s credits linear infinite;
}

.movie {
  margin-bottom: 50px;
  font-size: 50px;
}

.job {
  margin-bottom: 5px;
  font-size: 18px;
}

.name {
  margin-bottom: 50px;
  font-size: 35px;
}

@keyframes credits {
  0% {
    top: 100%;
  }
  100% {
    top: -500%;
  }
}
</style> 

<div class='wrapper'>
<div class='movie'>
Welcome</div>
<div class='job'>
Myscript2010</div>
<div class='name'>
LEARN EDITING SCRIPT</div>
<div class='job'>
WITH CODE</div>
<div class='name'>
CSS HTML EFFECT</div>
<div class='job'>
SOURCES CODE</div>
<div class='name'>
CODEPEN GITHUB</div>
<div class='job'>
SOURCE NEXT</div>
<div class='name'>
ALL SOURCES CODE</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT SHINE</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT ROTATE</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT SLIDE</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT HOVER</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT TRANSISI</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT FLIP</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT TOOLTIP</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT RADIAL</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT MULTIPLE</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT ANIMATED</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT EXPANDING</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT TRANSFORMS</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT OVERLAY</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT LOADING</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT CIRCLE</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT NAPIGATION</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT DROPDOWN</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT LIGHTING</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT ZOOM</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT SCALE</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT OPACITY</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFECT FLASHING</div>
<div class='job'>
CODE EFFECT</div>
<div class='name'>
EFFCET SMOKE</div>
<div class='job'>
CODE EDITED BY.</div>
<div class='name'>
MYSCRIPT2010</div>
<div class='job'>
</div>
<div class='name'>
CIBEBER CIMAHI</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
</div>
<div class='name'>
</div>
<div class='job'>
@
</div>
<div class='name'>
@</div>

<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<p>
Cibeber Cimahi</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9mZwE1hxxBIz-tWksu-19Ci_bDAev9Twjk2s3_RJ3Y3DqPeaPkqWJ3nwDgTJ40UNr7AfkjNcUrMrZyk7sjM5SW9zZawfYM2izL8G7E0tKNBQtsGXomZXySgY_AFT2HEx818p1SNdjUrLt/s1600-r/Loading-Mys2010.gif" name="e902" border="0" width="28" height="29" /></a>

<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/04/movie-credits.html"target="_blank" title="Myscript2010s"> <b>LET'S STUDY</b> </a>
</div>
</header>

Source Code by. Oliver Knoblich
Design code is edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy and paste you canDownload Here Movie Credits 

Category: Movie Credits