Cara Memasang Pemutar Music Untuk Situs Web atau Blog


Cara Memasang Pemutar Music Untuk Situs Web atau Blog - Hallo sobat semuanya, pada kesempatan ini saya akan membagikan tutorial tentang cara memasang pemutar music ke situs web atau blog. Tutorial ini hampir sama dengan tutorial yang saya bagikan sebelumnya yaitu Cara Menyematkan Music di Halaman Situs Web Dengan Gaya Baru. Namun ada sedikit perbedaan, yaitu jika pemutar music yang sebelumnya kita harus mengupload file MP3 ke ZippyShare dan mengambil linknya untuk dipasang di blog dan untuk tutorial ini kita akan mengambil url music dari aplikasi populer Soundcloud.

Untuk cara memasangnya, sobat bisa mengikuti tutorial di bawah ini.

Cara Memasang Pemutar Music Di Blog atau Situs Web.
Cari tag </body>, kemudian tempelkan kode dibawah ini sebelum tag </body>


<!-- 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/275853672&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 →

Catatan: tracks/275853672 Anda ubah menjadi tautan musik dari soundcloud dan perhatikan bahwa hanya tracks/275853672 yang di ganti.

Semoga Anda berhasil!

0 Response to "Cara Memasang Pemutar Music Untuk Situs Web atau Blog"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

close