Xin chào anh em, bây giờ chả có bìa chả có thủ thuật fb nên share thủ thuật blogger. Thì hôm nay mình xin share cho các anh em blogger cách tạo tiện ích nghe nhạc cho trang web/blog . Ok bắt đầu nào. Đơn giản như đan giổ ấy mà :)) .

HƯỚNG DẪN CÁCH LÀM:

Các bạn vào phần chỉnh sửa HTML tìm thẻ </body> và dán đoạn code sau lên trên thẻ này.
<!-- 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ú ý: Trong đoạn code có đoạn 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!
                                                                                                                 (Nguồn : Codedayroi.net.)
- - 39 bình luận
CHUYÊN MỤC

BÌNH LUẬN (39)

  1. Bạn ghi nguồn codedayroi.net nhé

    Trả lờiXóa
    Trả lời
    1. Bạn ghi như vậy là ko tôn trọng tác giả rồi, nguồn dưới thumbnail lẫn dưới bài bạn nên chỉnh rõ ra

      Xóa
  2. Ơ hay v
    Từ trc h cứ nhúng vào blog th chứ ko làm kiểu này

    Trả lờiXóa
  3. Ơ hay v
    Từ trc h cứ nhúng vào blog th chứ ko làm kiểu này

    Trả lờiXóa
  4. Hay đó bác, mà để nguồn to ra để tỏ ra tôn trọng người viết chứ

    Trả lờiXóa
  5. Đừng đi coppy em ạ, hãy tự mình viết, sưu tầm và edit lại và đăng sẽ tốt hơn đó.

    Trả lờiXóa
    Trả lời
    1. ok giờ em sẽ bỏ cái tật copy tự làm bài =))

      Xóa
  6. Sao k làm demo trực tiếp trên bài đăng này luôn ko?

    Trả lờiXóa
  7. Sao k làm demo trực tiếp trên bài đăng này luôn ko?

    Trả lờiXóa
  8. thời nay cx ít blogger để nhạc vô r, chủ yếu là mấy đứa ms tập blog

    Trả lờiXóa
  9. Góp ý:
    Tại sao ông lại để liên kết của nhữg ng đặt trc trôi xuống cuối widget v

    Trả lờiXóa
  10. em đổi liên kết www.hungstar.tk thành https://hungstar-it.blogspot.com anh với nha :D

    Trả lờiXóa
  11. Sao 2 hôm nay ngó im hơi thế e ;)))

    Trả lờiXóa

Một số lưu ý khi bình luận

Vui lòng xem Hướng Dẩn Sử dụng trước khi bình luận

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)