[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á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!

  • Không được backlink và nói tục. Hãy là một độc giả có ý thức.

    15 nhận xét: