kugel-menue-sozial-buttons-icons-mp3-player.php

Quell Code

 <style class="Mys2010-styles">


#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;
} 
/*end*/ 


.container {
  position: fixed;
  bottom: 1em;
  right: 1em;
}
/*1-bottom up 50px*/
.menu-toggle {
  width: 50px;
  height:50px;
  border-radius: 50%;
  background-color: #111;  
  position: absolute;
  z-index: 5;
  bottom: 46px;
  right:1px;
  display: table;
  text-align: center;
}
.menu-toggle .fa {
  color: #dad;
  font-size: 18px;
  display: table-cell;
  vertical-align: middle;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.menu-toggle.open .fa {
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}
.btn-app {
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  position: absolute;
  background-color: #4644fd;
  color: #fff;
  text-align: center;
}
.btn-app .fa {
  line-height: 2.5em;
}
.open .btn-app {
  box-shadow: 4px 4px 2px 1px rgba(0, 0, 0, 0.2);
}
/*2- bottom up 50px*/
.menu-round {
  position: absolute;
bottom:  50px;
  right: 0;
  z-index: 3;
}
.menu-round .btn-app {
  bottom: 0.25em;
  right: 0.25em;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.menu-round.open .btn-app:nth-of-type(1) {
  right: 0.5em;
bottom: 4.25em;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.menu-round.open .btn-app:nth-of-type(2) {
  right: 3.5em;
  bottom: 3.5em;
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}
.menu-round.open .btn-app:nth-of-type(3) {
  right: 4.25em;
  bottom: 0.5em;
}
/*3- bottom up icon 20px*/
.menu-line {
  position: absolute;
bottom: 50px;
  z-index: 2;
}
/*4- bottom up 50px*/
.menu-line .btn-app {
  bottom: 50px;
  right: 0.5em;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.menu-line.open .btn-app:nth-of-type(1) {
  bottom: 50px;
}
.menu-line.open .btn-app:nth-of-type(1) {
  bottom: 7.25em;
}
.menu-line.open .btn-app:nth-of-type(2) {
  bottom: 10.25em;
}
.menu-line.open .btn-app:nth-of-type(3) {
  bottom: 13.25em;
}
.menu-line.open .btn-app:nth-of-type(4) {
  bottom: 16.25em;
}
.menu-line.open .btn-app:nth-of-type(5) {
  bottom: 19.25em;
}
.menu-line.open .btn-app:nth-of-type(6) {
  bottom: 22.25em;
}
.menu-line.open .btn-app:nth-of-type(7) {
  bottom: 25.25em;
} 
</style>
 
<div class="share"> 
<div class="container">

    	<div class="menu-toggle">
		<span class="fa fa-superscript"></span>
	</div>
	<div class="menu-round">
		<div class="btn-app">
	<a id="hover" class="text" href="https://twitter.com/myscript2010s"target="_blank" title="Twitter"><span style="color:#0033CC"i class="fa fa-twitter"></i></a>
   </div>
		<div class="btn-app">
	<a id="hover" class="text" href="https://www.facebook.com/learn.editing.myscript2010"target="_blank" title="Facebook"><span style="color:#0033CC"i class="fa fa-facebook"></i></a>
   </div>	 
		<div class="btn-app">
	<a id="hover" class="text" href="https://plus.google.com/u/0/101254379497511200564/posts"target="_blank" title="G-Plus"><span style="color:#0033CC"i class="fa fa-google-plus"></i></a>
  </div>	 
	</div>
	
	<div class="menu-line">
		<div class="btn-app">
	<a id="hover" class="text" href="http://codepen.io/Myscript2010"target="_blank" title="Codepen"><span style="color:#0033CC"i class="fa fa-codepen"></i></a>
		</div>
		<div class="btn-app">
<a id="hover" class="text" href="https://id.pinterest.com/myscript2010"target="_blank" title="Pinterest"><span style="color:#0033CC"i class="fa fa-pinterest"></i></a>
 </div>	
		<div class="btn-app">
	<a id="hover" class="text" href="https://github.com/Myscript2010/Editing-Script-2010-2016"target="_blank" title="Github"><span style="color:#0033CC"i class="fa fa-github" aria-hidden="true"></i>
</i></a>
		</div>
		<div class="btn-app">
	<a id="hover" class="text" href="https://www.linkedin.com"target="_blank" title="Linkedin"><span style="color:#0033CC"i class="fa fa-linkedin"></i></a>
  </div>
		<div class="btn-app">
	<a id="hover" class="text" href="https://www.youtube.com/user/myscript2010s"target="_blank" title="Youtube"><span style="color:#0033CC"i class="fa fa-youtube"></i></a>
 </div>
		<div class="btn-app">
	<a id="hover" class="text" href="https://dribbble.com/Myscript2010s"target="_blank" title="Dribbble"><span style="color:#0033CC"i class="fa fa-dribbble"></i></a>
	</div>

	<div class="btn-app">
	<a id="hover" class="text" href="http://demoshow-mys2010.blogspot.co.id/p/contact-us-music.html"target="_blank" title="Email"><span style="color:#0033CC"i class="fa fa-envelope"></i></a>
  </div> 
		</div>
	</div>

 



 
 
 
<audio id="mys2010" src="https://sites.google.com/site/theecodes/lagu/Don-Williams-Lay-Down-Beside-MeM2010s.mp3"controls="controls"></audio> 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel='stylesheet prefetch' href='//codepen.io/assets/reset/normalize.css'>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout-53beeb1a007ec32040abaf4c9385ebfc.js'>
</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>
      $(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>  

<script>$('.menu-toggle').click(function () {
    $('.menu-toggle').toggleClass('open');
    $('.menu-round').toggleClass('open');
    $('.menu-line').toggleClass('open');
});
 
</script>

<script type='text/javascript'>
//<![CDATA[
// Menyisipkan markup tabir animasi loader
$(document.body).append('<div id="page-loader"></div>');
// Saat halaman aktif terpicu untuk berpindah/keluar menuju halaman lain...
$(window).on("beforeunload", function() {
// ... tampilkan tabir animasi dengan efek `.fadeIn()`
$('#page-loader').fadeIn(10).delay(6000).fadeOut(6000);
});
//]]>
</script>

</body>
</HTML>