input license here

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

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

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.

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://drive.google.com/uc?export=download&amp;id=1m6t4pGxOboeFHOUN1eLzOuFlOO2Julb9' 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.

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).

Sourcode được lấy từ truongblogger.top. Các bạn ghé ủng hộ bạn ấy nhé! Thanks!!!!!!!!

Related Posts
Diệp Quân
Nguyen Manh Cuong is the author and founder of the vmwareplayerfree blog. With over 14 years of experience in Online Marketing, he now runs a number of successful websites, and occasionally shares his experience & knowledge on this blog.
SHARE

Related Posts

Subscribe to get free updates

Post a Comment

Sticky