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

đã xuất bản
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!

0 bình luận

Hãy cùng tham gia bình luận về bài viết này nhé!

CÓ THỂ BẠN ĐANG TÌM
  • Share Bộ Ảnh Alone - Alan Walker  Đặt Avatar + Bìa Facebook
    Share Bộ Ảnh Alone - Alan Walker Đặt Avatar + Bìa Facebook
    03/12/2016 - 0 bình luận
    Liên Hệ
  • Chia sẻ code đếm ngược tết cực đẹp cho blogspot
    Chia sẻ code đếm ngược tết cực đẹp cho blogspot
    30/12/2017 - 0 bình luận
    Chào các bạn, hôm nay mình sẽ share cho các bạn 1 code đếm ngược tết cực đẹp, cái này mình nhếch từ J2TEAMƯu đi…
  • Thêm search live cho blogger/blogspot
    Thêm search live cho blogger/blogspot
    25/12/2017 - 0 bình luận
    Xin chào các bạn, mình thấy cái search live này chắc cũng nhiều bạn đang cần nên hôm nay mình sẽ viết bài hướng…
  • Tạo phân trang trong bài viết cho blogspot
    Tạo phân trang trong bài viết cho blogspot
    16/04/2018 - 0 bình luận
    Chào các bạn cũng đã lâu rồi mình chưa post bài hướng dẫn về blogspot nên nay mình sẽ hướng dẫn các bạn cách tạ…
  • Adobe Photoshop CC 2017 - Cách nâng cấp từ Photoshop CC 2015 lên Photoshop CC 2017
    Adobe Photoshop CC 2017 - Cách nâng cấp từ Photoshop CC 2015 lên Photoshop CC 2017
    07/11/2016 - 0 bình luận
    Adobe vừa mới ra mắt phiên bản mới nhất của công cụ xử lý ảnh tốt nhất thế giới hiện tại. Bản Photoshop CC…
  • Tạo tiện ích thống kê cho blogger
    Tạo tiện ích thống kê cho blogger
    21/11/2017 - 0 bình luận
    Hello xin chào tất cả các bạn, theo yêu cầu của một số bạn thì hôm nay mình sẽ viết bài hướng dẫn cho các bạn t…
  • Thêm code tuyết rơi cho trang web
    Thêm code tuyết rơi cho trang web
    15/12/2017 - 0 bình luận
    Bài viết này tôi sẽ hướng dẫn cho các bạn thêm code tuyết lên trang web của mình!HƯỚNG DẪN CÁCH LÀM:Để thêm tuy…
  • Giao diện Blogspot BMAG Phiên bản 2.0.3 Việt hóa + Sửa lỗi
    Giao diện Blogspot BMAG Phiên bản 2.0.3 Việt hóa + Sửa lỗi
    25/10/2016 - 0 bình luận
    BMAG Template là một mẫu giao diện do Sweetheme phát triển, BMAG thuộc template cao cấp Responsive với nhiều ch…
  • Chia sẻ psd hình nền khóa điện thoại cực ngầu
    Chia sẻ psd hình nền khóa điện thoại cực ngầu
    23/08/2018 - 0 bình luận
    Chào các bạn, cũng đã lâu rồi mình chưa viết bài gì về Photoshop nên nay mình sẽ biết bài share một psd hình nề…
  • Sửa lỗi comment form không hiển thị trong Blogger/Blogspot
    Sửa lỗi comment form không hiển thị trong Blogger/Blogspot
    27/12/2017 - 0 bình luận
    Chào các bạn, hôm nay mình sẽ hướng dẫn các bạn fix lỗi comment form không hiển thị trong bloggerHướng dẫn sửa …
  • Tạo hiệu ứng loading cực ngầu cho blogspot
    Tạo hiệu ứng loading cực ngầu cho blogspot
    12/03/2018 - 0 bình luận
    Chào các bạn đọc giả của Codedayroi.com, hôm nay mình sẽ đem đến các bạn mẫu loading dành riêng cho blogspot cự…
  • Thêm ribbon thời gian vào bài viết cho blogspot
    Thêm ribbon thời gian vào bài viết cho blogspot
    08/05/2018 - 0 bình luận
    Chào các bạn hôm nay mình sẽ đem đến bạn 1 đoạn code hiển thị thời gian post bài cực chất dành cho blogspotHƯỚN…