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>