Thủ Thuật Blogspot l Tạo Tiện Ích Nghe Nhạc

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!
- Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
- Mọi chi tiết xin liên hệ:
• Email: starbinhblog.com@gmail.com
• Facebook: Fb.com/tomitsystem
Xin chân thành cảm ơn những đóng góp của bạn để chúng tôi ngày càng phát triển hơn nữa...

Bình luận Facebook:

» Hướng Dẫn Chèn Liên Kết: <a href="Link" rel="nofollow">Tên</a>
» Tích vào ô "Thông báo cho tôi" để nhận thông báo phản hồi của Admin

Không có nhận xét nào