Hướng Dẫn Thêm Thanh Music Nghe Nhạc Vào Blogger

Hello xin chào các bạn mình là Star Quốc, 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>


<!-- star music-box -->

<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>
<br />
<div class="music-box">
<button class="music-box-toggle-btn">
<a href="https://www.blogger.com/null" title="Play music"><i class="fa fa-music"></i></a>
</button>
<br />
<div class="music-holder">
<iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/444209886&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&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>
    <!-- end music box -->

Bước 3 : Lưu lại và tận hưởng thành quả!

4 Comments

  1. quên cái hướng dẫn đổi link nhạc kìa
    %3Cscript%3E%0A%3C%21--%0Adocument.write%28unescape%28%22%3Ciframe%20src%3D%22https%3A//w.soundcloud.com/player/%3Furl%3Dhttps%3A//api.soundcloud.com/tracks/444209886%26auto_play%3Dtrue%26hide_related%3Dfalse%26show_comments%3Dtrue%26show_user%3Dtrue%26show_reposts%3Dfalse%26visual%3Dtrue%22%3E%3C/iframe%3E%22%29%29%3B%0A//--%3E%0A%3C/script%3E

    Trả lờiXóa
  2. qua blog codedayroi để xem code bài này cho rõ ràng nhé!

    Trả lờiXóa
  3. Đem code bên blog khác về ko ghi nguồn nhỉ

    Trả lờiXóa
    Trả lời
    1. dạ xin lỗi anh bài này a Quốc ghi để em nói lại với ảnh

      Xóa