Chèn nhạc vào Blogger có nút bật tắt

Anh Trai Nắng
6

Việc chèn nhạc vào Blogger là hết sức dễ dàng, tuy nhiên để thêm phần thú vị thì hôm nay Anh Trai Nắng hướng dẫn các bạn làm nút bật tắt cho nhạc nha!

Chèn nhạc vào Blogger có nút bật tắt
Chèn nhạc vào Blogger có nút bật tắt.

Thời điểm này cũng đã gần tới Noel và Tết rồi nên tạo một cái nút phát nhạc về Giáng Sinh hay Năm Mới sẽ làm cho blog của chúng ta đến gần với không khí hơn.

Để tránh bị làm phiền phát đi phát lại khi đọc giả chuyển trang thì Trình phát nhạc này sẽ tích hợp thêm nút bật tắt.

Xem thêmCách chèn nhạc vào blogspot đơn giản nhất

Các bạn sử dụng đoạn code dưới đây chèn vào trên thẻ đóng </body> nhé:

<audio>
<source src='https://ia601305.us.archive.org/7/items/nhac-chuong-com-doan-vien/nhac-chuong-com-doan-vien.mp3' type='audio/mpeg'/>
Trình duyệt của bạn không hỗ trợ thẻ audio, vui lòng cập nhật lên phiên bản mới nhất hoặc đổi trình duyệt.
</audio>
<div class='nghe-nhac'>
<button onclick='document.getElementsByTagName(&apos;audio&apos;)[0].play();'><i class='fal fa-play'/></button>
<button onclick='document.getElementsByTagName(&apos;audio&apos;)[0].pause();'><i class='fal fa-volume-slash'/></button>
</div>
<style>.nghe-nhac{z-index:999;background: #cb1c22;padding: 10px;text-align: center;display: inline-block;border-radius: 10px;box-shadow: 0 0 2rem 0 rgb(0 0 0 / 30%);position: fixed;left: 10px;bottom: 180px;}.nghe-nhac button{display: flex;flex-wrap: wrap;border: 0;background: transparent;color: #fff;font-size: 15px;margin: 0;padding: 5px;justify-content: center;width: 25px;}</style>

Trong đó, link mình bôi đỏ là nhạc Google Drive, các bạn có thể bài nào của mình tùy thích rồi thay link vào.

À lưu ý: để hiện thị được mấy cái nút Play Loa các bạn phải xài Font Awesome 5 Pro nhé, như mình đang xài. Các bạn có thể xài code dưới đây chèn vào thẻ <head>

<!-- Font Awesome Pro -->
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://kit-pro.fontawesome.com/releases/v5.13.0/css/pro.min.css");
//]]>
</script>

Để tìm hiểu thêm về Font Awesome sử dụng cho blogspot các bạn có thể xem bài này để biết xài nhiều hơn nha!

Lời kết

Thật đơn giản để có Một trình phát nhạc có nút bật/tắt xịn xò trên Blog đúng không nào! Các bạn có thể xem demo trực tiếp trên blog mình luôn (sau này có thể tháo xuống).

Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

6 Nhận xét

  1. Me ry chịt mệt....Sáng mới thấy bên ku Trường cái ghé qua đây có ngay bài hd liền :3

    Trả lờiXóa
  2. Cho e xin liên kết với ạ
    URL: https://www.nguyenhablog.com/
    Tiêu đề: Nguyen Ha Blog

    Trả lờiXóa
  3. Liên kết ạ
    Tên: Vnbookmusic
    Url: https://vnbookmusic.blogspot.com/

    Trả lờiXóa
Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

<b>Chữ in đậm</b>
<i>Chữ in nghiêng</i>
<u>Chữ gạch chân</u>
<strike>Chữ gạch ngang</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu