Sound Animated Pear Bird

Memasang Kode Sound Animated Pear Bird
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:red;height:100%;overflow:hidden;}
body {
  background: #151515;
}
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: -15px;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #fff;  
font-size:  6px;
background: -moz-linear-gradient(top, #333 0%, rgba(53,02,01,1) 100%);
  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;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:  11px;
background:  #111;
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%, #666 50%, transparent 90%); 
margin-top:-8px;
} 

#M-2010, #teks, #posisi, #dibawah  {
    position: absolute;
    font-size: 11px;
    margin: -4px
}
#M-2010, #teks div {
    text-decoration: underline;
    cursor: pointer
}
#teks, #posisi {
    text-align: right;
    right:  50px;
}
#teks, #dibawah {
    text-align: left;
    left:  50px;
}
 #dibawah, #posisi {
    bottom: 17px;
} 

 body {
  background: #000;
  position: relative;
  margin: 0;
}
.buttons{
  width:500px;
  margin:0 auto;
  text-align:center;
  font-family: 'Bernard MT Condensed', sans-serif;
  font-size:18px;
  color: #EE82EE
}
.buttons a:hover {
  background-color:#0033CC;}
.buttons a:active, a:focus {
background-color:  #FF6347;
 box-shadow:0 0px 0 rgba(0,0,0,0.4) inset;  
  transition:all 0.1s}
audio{
  display:none
}

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: #000;
  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: 12px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #333;
background: #000;
border-top: 2px solid #f0f;
z-index: 9999;
}<style>
.buttons{
  width:500px;
  margin:0 auto;
  text-align:center;
  font-family: 'Bernard MT Condensed', sans-serif;
  font-size:18px;
  color: #EE82EE
}
.buttons a:hover {
  background-color:#0033CC;}
.buttons a:active, a:focus {
background-color:  #FF6347;
 box-shadow:0 0px 0 rgba(0,0,0,0.4) inset;  
  transition:all 0.1s}
audio{
  display:none
} 
svg{ display:block; margin:0 auto; border:0px solid #222;}
</style>

<svg width="500px" height="500px" viewBox="0 0 500 500">
  <defs>  <radialgradient id="rg">
      <stop offset="0%" stop-color="chartreuse"></stop>
      <stop offset="100%" stop-color="#030"></stop>
    </radialGradient>
    <radialgradient id="rgs">
      <stop offset="0%" stop-color="#111"></stop>
      <stop offset="100%" stop-color="#333"></stop>
    </radialGradient>   <g id="legs">
      <polygon id="Rleg" points="254.683,374.612 259,394.741 280.582,401.216 259.719,401.216 258.28,416.324 
  254.683,400.497 239.935,399.777 254.683,395.469" /></polygon>
      <polygon id="Lleg" points="214.835,372.612 210.518,392.741 188.935,399.216 209.799,399.216 211.237,414.324 
  214.835,398.497 229.583,397.777 214.835,393.469 "></polygon>
    </g>  </defs>
  <ellipse id="bigS" fill="url(#rgs)" stroke="none" cx="250" cy="420" rx="86" ry="18">
    <animate id="bigSAnimacionRX" attributeName="rx" attributeType="XML" values="86;56;86" begin="0;Down.click" dur="2s" repeatCount="1" fill="freeze" />
    <animate id="bigSAnimacionRY" attributeName="ry" attributeType="XML" values="18;9;18" begin="0;Down.click" dur="2s" repeatCount="1" fill="freeze" />
  </ellipse>  <g id="Down">
    <use xlink:href="#legs" fill="#B26B29" />
    <animatetransform id="LegsAnimacion" attributeType="XML" attributeName="transform" type="translate" values="0,0;  0,-180;  0,-150;  0,-180;  0,0" keySplines=".5 0 .5 1;   0 .75 .25 1;    0 .75 .25 1; 1 0 .25 .25" begin="0;Down.click" dur="2s" repeatCount="1" fill="freeze" />   </use>
    <path id="Lwing" fill="#FFFFFF" stroke="#000000" d="M299.361,267.521c0,0,5.905,36.185,24.725,60.779
  c18.819,24.594-11.749,2.022-17.665-5.255c-5.918-7.278,13.125,18.913,13.125,18.913s-14.832-3.719-20.804-13.585
  c-5.972-9.867,3.246,13.51,3.246,13.51s-6.73,2.919-12.75-9.54c-6.021-12.462-13.332-40.664-13.332-40.664L299.361,267.521z">
      <animatetransform id="LwingAnimacion" attributeName="transform" type="rotate" attributeType="XML" values="0 299 267; -40 299 267;0 299 267" begin="0;Down.click" dur="200ms" repeatCount="10" fill="freeze" />  </path>
    <path id="Rwing" fill="#FFFFFF" stroke="#000000" d="M195.678,267.521c0,0-5.905,36.185-24.725,60.779  c-18.819,24.594,11.749,2.022,17.665-5.255c5.918-7.278-13.125,18.913-13.125,18.913s14.832-3.719,20.804-13.585  c5.972-9.867-3.246,13.51-3.246,13.51s6.73,2.919,12.75-9.54c6.021-12.462,13.332-40.664,13.332-40.664L195.678,267.521z">
      <animatetransform id="RwingAnimacion" attributeName="transform" type="rotate" attributeType="XML" values="0 196 266;40 196 267 ;0 196 267" begin="0;Down.click" dur="200ms" repeatCount="10" fill="freeze" />    </path>
    <path id="comb" fill="#F7941E" d="M251.504,171.111c3.167,12.389,6.055,29.201,6.055,29.201h-13.947
  C242.079,196.878,251.411,180.798,251.504,171.111L251.504,171.111z">
      <animate id="combAnimacion" attributeName="d" attributeType="XML" values="M251.504,171.111c3.167,12.389,6.055,29.201,6.055,29.201h-13.947
  C242.079,196.878,251.411,180.798,251.504,171.111L251.504,171.111z; M232.22,184.296c14.604,3.296,25.338,16.016,25.338,16.016h-13.947  c-2.347-3.252,0.02-5.704-6.15-11.874L232.22,184.296z;M251.504,171.111c3.167,12.389,6.055,29.201,6.055,29.201h-13.947
  C242.079,196.878,251.411,180.798,251.504,171.111L251.504,171.111z" begin="0;Down.click" dur="2s" repeatCount="1" fill="freeze" />    </path>
<path id="body" fill="url(#rg)" stroke="none" d="M249.023,390.597
  c50.446,0.719,86.244-23.74,86.964-58.992S305.053,276.928,303.613,250s-22.303-50.77-54.59-50.77H250
  c-32.288,0-53.151,23.842-54.59,50.77s-33.093,46.353-32.374,81.604s36.518,59.711,86.964,58.992">
 <animate id="bodyAnimacion" attributeName= "d" attributeType= "XML"
   values ="M249.023,390.597
  c50.446,0.719,86.244-23.74,86.964-58.992S305.053,276.928,303.613,250s-22.303-50.77-54.59-50.77H250
  c-32.288,0-53.151,23.842-54.59,50.77s-33.093,46.353-32.374,81.604s36.518,59.711,86.964,58.992;M249.023,390.597
  c50.446,0.719,55.446-21.582,56.166-56.834s-0.137-56.835-1.576-83.763s-22.303-50.77-54.59-50.77H250
  c-32.288,0-53.151,23.842-54.59,50.77s-7.194,45.634-6.475,80.886s10.619,60.43,61.065,59.711;M249.023,390.597
  c50.446,0.719,55.446-21.582,56.166-56.834s-0.137-56.835-1.576-83.763s-22.303-50.77-54.59-50.77H250
  c-32.288,0-53.151,23.842-54.59,50.77s-7.194,45.634-6.475,80.886s10.619,60.43,61.065,59.711; M249.023,390.597
  c50.446,0.719,86.244-23.74,86.964-58.992S305.053,276.928,303.613,250s-22.303-50.77-54.59-50.77H250
  c-32.288,0-53.151,23.842-54.59,50.77s-33.093,46.353-32.374,81.604s36.518,59.711,86.964,58.992"
   keyTimes= "0; 0.2;0.90; 1"
   begin= "0;Down.click" dur= "2200ms"  repeatCount="1" fill="freeze"/>
 </path>    <g id="beak">
      <polygon id="light" fill="#F7941E" points="243.528,290.228 226.864,247.9 249.025,251.215 271.854,254.631" />
      <polygon id="dark" fill="#B26B29" points="249,251 244,290 272,255" /> </g>
    <ellipse id="eyeL" fill="#FFFFFF" cx="227" cy="245" rx="12" ry="14" />
    <ellipse id="eyeR" fill="#FFFFFF" cx="268" cy="245" rx="12" ry="14" />
    <circle id="irisL" cx="230" cy="249" r="10">
      <animate id="irisLAnimacion" attributeName="cy" attributeType="XML" values="249;241; 249" begin="0;Down.click" dur="2s" repeatCount="1" fill="freeze" />
    </circle>
    <circle id="irisR" cx="266" cy="249" r="10">
      <animate id="irisRAnimacion" attributeName="cy" attributeType="XML" values="249;241; 249" begin="0;Down.click" dur="2s" repeatCount="1" fill="freeze" />
    </circle>  </g></svg>  
<div class="animal-container animated">
<p align="center">
<div class="buttons">
<a href="#" data-fx="epic.swf_1"><b>PLAY</b></a>
<h4>
SOUND BIRD</h4>
</div>
<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> SOURCE <a href="#"target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; CODE </a>&nbsp; ANIMATED BIRD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> SOURCE <a href="#" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; CODE </a>&nbsp; SOUND </a> 
</div>
<h2>
<span style="font-family: arial ; font-size: 12px; color:#fff;"> SOUND <a href="#" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; ANIMATED </a>&nbsp; KITTY </a> 
</div>
</h2>
</div>
<header>
<a href="#" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">DOWNLOAD</a>  </h2>
</a>  
</div>
</header>

<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>
<script>$('.buttons a').on('click', function (e) {
    e.preventDefault();
    $('audio').remove();
    var fx = $(this).attr('data-fx');
    $('<audio controls="controls" autobuffer="autobuffer" autoplay="autoplay"> <source src="https://sites.google.com/site/fileblogfor/code/burung1-Mys2010.mp3"  type="audio/mpeg"> </audio>').appendTo('.buttons');
}); 
</script>

Pear Bird code by. Gabi
Sound Code by. Nodws

Design code is edited by. Mys2010 In Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here Sound Animated Bird  

Category: Sound Animated Pear Bird

Tweet