[Thủ Thuật Blogger] Hướng Dẫn Thêm Thanh Nghe Nhạc Cực Đẹp

Hello xin chào các bạn cũng đã lâu lắm rồi mình mới ra một thủ thuật hay cho những ai đang làm Blogspot.Hôm nay mình sẽ hướng dẫn các bạn các thêm nhạc nền vào Blog đơn giản,đẹp,dễ làm nhất nhá :D



Bước 1 : Các bạn vào Chủ Đề < Chỉnh Sửa HTML

Bước 2 : Dán code bên dưới này vào trước thẻ đóng <body>


<style>
.music-box{position:fixed;width:300px;height:60px;z-index:120;bottom:10px;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"></i></a>
</button>
<div class="music-holder">
<iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/444209886&amp;auto_play=true&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
</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>
Bước 3 : Lưu lại và tận hưởng thành quả !
Chúc các bạn thành công ^^

Nguồn : Codedayroi.net


Tạ Thiên Quốc Designer, Developer

Tôi là một anh chàng đam mê công nghệ...!
Xem thêm nhiều bài viết hay tại đây nhé.
Các bạn hãy đóng góp ý kiến của mình vào đây giúp tôi nhé !
Liên hệ qua Email : Naruto95qt@gmail.com để tôi có thể hỗ trợ bạn tốt nhất
Tác giả: Phú Cường Blogger

Tôi là Cường, sinh viên năm cuối ngành Điện tử - Viễn thông trường Đại học Bách Khoa Hà Nội. Say hello to you!

  • 15 nhận xét: