Tạo tiện ích nghe nhạc cho trang web

Tạo tiện ích nghe nhạc cho trang web

Tạo tiện ích nghe nhạc cho trang web

Xin chào tất cả các bạn hôm nay mình sẽ hướng dẫn các bạn tích hợp tiện ích nghe nhạc vào trang web của các bạn Hướng dẫn cách làm: Tìm thẻ ...
Comment tháng 5 23, 2018
Xin chào tất cả các bạn hôm nay mình sẽ hướng dẫn các bạn tích hợp tiện ích nghe nhạc vào trang web của các bạn

Hướng dẫn cách làm:

Tìm thẻ </body> và dán toàn bộ đoạn code bên dưới lên trên thẻ vừa tìm
<!-- star music-box -->
<style>
.music-box{position:fixed;width:300px;height:160px;z-index:120;bottom:30px;left:30px}
@media (max-width: 991px) {
.music-box{width:250px;height:120px;left:auto;left:30px}
}
.music-box .music-holder{width:100%;height:100%;border:2px solid #eee;position:absolute;left:0;top:-30px;visibility:hidden;opacity:0;-webkit-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out}
.music-box .music-holder iframe{width:100%;height:100%}
.music-box button{background:rgba(0,0,0,0.1);width:40px;height:40px;line-height:37px;font-size:18px;font-size:1rem;color:#5e9a8e;border:1px solid #e6e6e6;outline:0;padding:0;margin:0;position:absolute;left:0;bottom:0;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-ms-border-radius:50%;border-radius:50%}
@media (max-width: 991px) {
.music-box button{left:auto;left:0}
}
.music-box .toggle-music-box{top:-50px;visibility:visible;opacity:1}
</style>
<div class='music-box'>
<button class='music-box-toggle-btn'>
<a title='Play music'><i class='fa fa-music'/></a>
</button>

<div class='music-holder'>
<iframe src='https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/342591097&amp;amp;auto_play=true&amp;amp;hide_related=false&amp;amp;show_comments=true&amp;amp;show_user=true&amp;amp;show_reposts=false&amp;amp;visual=true'/>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
if($(".music-box").length) {var musicBtn = $(".music-box-toggle-btn"),musicBox = $(".music-holder");musicBtn.on("click", function() {musicBox.toggleClass("toggle-music-box");return false;})}
//]]>
</script>
<!-- end music box -->
Chú ý: tracks/342591097 bạn thay thành link nhạc và hãy lưu ý rằng chỉ lấy đoạn tracks/.../
Chúc bạn thành công!
Tạo tiện ích nghe nhạc cho trang web Tạo tiện ích nghe nhạc cho trang webNguyễn Đình Diện8.8stars based on9reviewsXin chào tất cả các bạn hôm nay mình sẽ hướng dẫn các bạn tích hợp tiện ích nghe nhạc vào trang web của các bạn Hướng dẫn cách làm: Tìm thẻ ...