Gia Huy NY BLOG

Blog chia sẻ ảnh chất lượng cao - thủ thuật hay - ảnh bìa chất

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ả!

Lê Võ Gia Huy Designer

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 !
Các bạn hãy đóng góp ý kiến của mình vào đây giúp tôi nhé !
Mọi chi tiết xin liên hệ:
Email : giahuylevo412@gmail.com
Facebook: https://www.facebook.com/giahuynyblog/
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!

  • 4 nhận xét:

    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