Image Matting Frame

Memasang Kode Image Matting Frame
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;  
} 
.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: 5px;
} 
#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: 22px;
}

 img.mat { 
 width: 42%; height: auto; display: block;
  margin: -1rem auto; padding: 2%;
  background-color: #FA8072;
  background-repeat: no-repeat;
  background-size: cover;
  border: 18px double #111;
  box-shadow: 0 0 0 50px rgba(244,240,236,0.4) inset, 0 0 0 11px rgb(180, 130, 90), 0 0 30px rgba(0,0,0,0.8) inset; 
-webkit-box-shadow: 0 0 0 50px rgba(244,240,236,0.4) inset, 0 0 0 11px rgb(180, 130, 90), 0 0 30px rgba(0,0,0,0.8) inset, 0 30px 20px rgba(0,0,0,0.3); 
  outline: 2px solid #333;
  outline-offset: 10px;
}
</style> 

<img class="mat" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh93JyejZsQP2PfhcXzTFqy7-dO1UbpFpYuVQHrptgXgkrGNrGWj0ELwjQz6INrvRpje1wcQgl0zaZOPwjnOr8A2taw5_XgVYIGzJSDCYH45GwDuZ8ZOQowS_YPdj5Bl6XDOnxk2Ufd7g2v/s1600-r/pooto-mys2010.jpeg"title="Suara Manuk Potoo">
<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/06/sound-manuk-potoo.html" target="_blank" title="Menampilkan">
<h2>
<span style="color:orange; font-size: 9pt">LET'S STUDY</a></span>  </h2>
</a>  
</div>
</header>

<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> SOURCE <a href="https://codepen.io/dudleystorey/pen/sjvCA" target="_blank" title="Menampilkan"><span style="color: #FFFF00; font-size: 14px;">&nbsp; MATTING </a>&nbsp; FRAME </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> DOWNLOAD<a href="https://Link Download"title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; SOUND </a>&nbsp; BIRD POTOO </a> 
</div>
<h2>
<audio id="mys2010" src="https://sites.google.com/site/fileblogfor/code/pooto-Mys2010s.mp3" controls="controls"></audio></div>
</h2>
</div>

<ul class="mys2010-list">
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>   
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>  
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>   
<script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script> 
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"></script> 

<script>
      $(function () {
    $('video,audio').mediaelementplayer({
        success: function (mediaElement, domObject) {
            var audio_src = $('li.current').attr('data-url');
            mediaElement.setSrc(audio_src);
            mediaElement.addEventListener('ended', function (e) {
                mys2010PlayNext(e.target);
            }, false);
        },
        keyActions: []
    });
    $('.mys2010-list li').click(function () {
        $(this).addClass('current').siblings().removeClass('current');
        var audio_src = $(this).attr('data-url');
        $('audio#mys2010:first').each(function () {
            this.player.pause();
            this.player.setSrc(audio_src);
            this.player.play();
        });
    });
});
function mys2010PlayNext(currentPlayer) {
    if ($('.mys2010-list li.current').length > 0) {
        var current_item = $('.mys2010-list li.current:first');
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('if ' + audio_src);
    } else {
        var current_item = $('.mys2010-list li:first');
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('elseif ' + audio_src);
    }
    if ($(current_item).is(':last-child')) {
        $(current_item).removeClass('current');
    } else {
        currentPlayer.setSrc(audio_src);
        currentPlayer.play();
    }
}  
 </script>

Matting Frame code by. Dudley Storey
Design code is edited by. Mys2010 In Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here Image Matting Frame  

Category: Image Matting Frame

Tweet