How to Add Music Player to Your Blogspot Page. Berikut ini adalah cara membuat pemutar musik (music player) pada halaman/page di Blogger. Biasanya kita memasang widget ini pada sidebar blog, tapi kali ini berbeda dengan sebelumnya-sebelumnya karena kita akan memasang widget pemutar musik ini pada halaman blog.

Kamu bisa memilih lagu favorit kamu, mengupload lagu favorit kamu ke Google site dan kemudian memasang link lagunya ke widget ini. Di widget ini bukan hanya satu atau dua lagu saja yang bisa kamu pasang, kamu bisa memasang beberapa lagu sekaligus. Oh iya sebelumnya juga saya sudah mebagikan widget pemutar musik lagu pilihan sendiri (baca widget pemutar musik 1)

Widget ini bukan pemutar lagu otomatis, jadi untuk memainkan lagu kamu harus menekan tombol Playnya. Ada juga tombol-tombol lain layaknya pemutar musik sungguhan, seperti: menu, pause, stop, next, prev dan volume. Untuk lebih jelasnya kamu dapat melihat gambar dibawah ini dan demo nya juga.

Cara Membuat Pemutar Musik pada halaman di Blogspot
Widget Pemutar Musik


Cara Memasang Pemutar Musik Pada Halaman di Blogger

1. Di Blog kamu,
2. Pilih Laman >> Laman Baru
3. Pilih mode HTML (sebelahnya compose) dan masukan kode dibawah ini.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js' type='text/javascript'></script>
<script src='https://cdn.rawgit.com/Brando07/share/newbe/SEOCIPS-musiccc.js' type='text/javascript'></script>
<script src='https://cdn.rawgit.com/Brando07/share/newbe/seocips-music.js' type='text/javascript'></script>
<style>
*,:after,:before { box-sizing:border-box; }
.pull-left { float:left; }
.pull-right { float:right; }
.clearfix:after,.clearfix:before { content:''; display:table; }
.clearfix:after { clear:both; display:block; }
.track { width:2px; margin-right:5px; background:rgba(0,0,0,0); transition:background 250ms linear; }
.track:hover,.track.dragging { background:#d9d9d9; background:rgba(0,0,0,.15); }
.handle { right:0; width:2px; background:#999; transition:width 250ms; background:rgba(255,255,255,.2); }
.mhn-player { width:360px; height:500px; padding:15px; position:relative; margin:55px auto 0; background:rgba(0,0,0,.9); box-shadow:0 16px 28px 0 rgba(0,0,0,.22),0 25px 55px 0 rgba(0,0,0,.21); }
.mhn-player .album-art,.mhn-player .album-thumb { background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI5MC4zMTNweCIgaGVpZ2h0PSI5MC4zMTNweCIgdmlld0JveD0iMCAwIDkwLjMxMyA5MC4zMTMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDkwLjMxMyA5MC4zMTMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxnPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjMTkxOTE5IiBkPSJNNDUuMTU2LDBDMjAuMjE4LDAsMCwyMC4yMTcsMCw0NS4xNTZjMCwyNC45MzksMjAuMjE4LDQ1LjE1Niw0NS4xNTYsNDUuMTU2YzI0LjkzOSwwLDQ1LjE1Ni0yMC4yMTgsNDUuMTU2LTQ1LjE1NkM5MC4zMTMsMjAuMjE3LDcwLjA5NSwwLDQ1LjE1NiwweiBNMjIuMzk3LDc4Ljc1M2MwLDAtNS4yNzQtMy41NC03LjIyNS01Ljc4Yy0xLjk1MS0yLjI0LTMuOTc0LTQuNjk2LTMuOTc0LTQuNjk2TDI2LjAxLDU4LjE2MWw1Ljc4LDUuNzhsMC4zNjIsMC4zNjFMMjIuMzk3LDc4Ljc1M3ogTTQ1LjE1Niw2My4yMTljLTkuOTc2LDAtMTguMDYzLTguMDg3LTE4LjA2My0xOC4wNjNjMC05Ljk3NSw4LjA4Ny0xOC4wNjMsMTguMDYzLTE4LjA2M2M5Ljk3NSwwLDE4LjA2Myw4LjA4NywxOC4wNjMsMTguMDYzQzYzLjIxOSw1NS4xMzIsNTUuMTMyLDYzLjIxOSw0NS4xNTYsNjMuMjE5eiBNNjQuMzAzLDMyLjUxM2MwLDAtMC42NjItMS4yMDQtMi4xNjctMi44OWMtMS41MDUtMS42ODYtMy45NzQtMy45NzQtMy45NzQtMy45NzRsMTAuMTE1LTE0LjQ1YzAsMCwyLjQwOCwxLjc0Niw0LjY5NiwzLjYxMmMyLjI4OCwxLjg2Nyw2LjE0MSw3LjIyNSw2LjE0MSw3LjIyNUw2NC4zMDMsMzIuNTEzeiBNNDUuMTU2LDQxLjE4MmMtMi4xOTUsMC0zLjk3NCwxLjc3OS0zLjk3NCwzLjk3NGMwLDIuMTk1LDEuNzc5LDMuOTc0LDMuOTc0LDMuOTc0YzIuMTk1LDAsMy45NzQtMS43NzksMy45NzQtMy45NzRDNDkuMTMsNDIuOTYxLDQ3LjM1MSw0MS4xODIsNDUuMTU2LDQxLjE4MnoiLz48L2c+PC9nPjwvc3ZnPg==) no-repeat center / 50%; }
.mhn-player .album-art { width:330px; height:330px; overflow:hidden; position:relative; border:1px solid #000; }
.mhn-player .album-art img { width:100%; display:block; }
.mhn-player .album-art:before { top:30px; left:50%; width:200px; content:'music'; font-size:72px; font-weight:600; position:absolute; margin-left:-100px; color:rgba(255,255,255,.4); }
.mhn-player .album-art:after { top:0; left:0; content:''; width:inherit; height:inherit; position:absolute; background:linear-gradient(to bottom,rgba(0,0,0,.2),rgba(0,0,0,1)); }
.mhn-player .album-art img { width:100%; position:relative; }
.mhn-player .album-art.blur img { -webkit-filter:blur(3px); -moz-filter:blur(3px); filter:blur(3px); }
.mhn-player a { color:inherit; text-decoration:none; }
.mhn-player .play-list { top:15px; left:15px; right:15px; display:none; bottom:245px; overflow-y:auto; position:absolute; width:auto !important; background:rgba(0,0,0,.4); padding-right:1px !important; }
.mhn-player .play-list a { color:#ccc; display:block; overflow:hidden; padding:6px 10px; white-space:nowrap; text-overflow:ellipsis; transition:all .4s ease-in-out 0s; }
.mhn-player .play-list a:hover { background:rgba(255,255,255,.2); }
.mhn-player .play-list a.active { color:#2ecc71; }
.mhn-player .play-list .album-thumb { width:35px; height:35px; overflow:hidden; margin-right:10px; border:1px solid #666; }
.mhn-player .play-list .album-thumb img { width:100%; display:block; }
.mhn-player .play-list .songs-info { max-width:240px; text-shadow:0 2px 2px #000; }
.mhn-player .play-list .songs-info .song-title { font-size:16px; }
.mhn-player .play-list .songs-info .songs-detail { font-size:13px; overflow:hidden; text-overflow:ellipsis; }
.mhn-player .current-info { left:30px; right:30px; color:#ccc; bottom:160px; margin-left:-15px; margin-right:-15px; position:absolute; text-shadow:0 2px 4px #000; }
.mhn-player .current-info>div { margin-top:10px; }
.mhn-player .current-info .song-title { font-size:24px; margin-top:10px; font-weight:400; }
.mhn-player .current-info .fa { min-width:30px; font-size:18px; text-align:center; font-weight:normal; }
.mhn-player .controls { margin-top:30px; position:relative; }
.mhn-player .controls .toggle-play-list { right:5px; width:40px; color:#ccc; height:40px; bottom:100px; border-radius:50%; line-height:40px; text-align:center; position:absolute; background-color:crimson; }
.mhn-player .controls .fa-pp:before { content:'\f04b'; }
.mhn-player .controls .active .fa-pp:before { content:'\f04c'; }
.mhn-player .controls .progress { height:1px; margin:15px 0; position:relative; background:#262626; }
.mhn-player .controls .duration { color:#ccc; font-size:14px; }
.mhn-player .controls .progress .bar { width:0; display:block; height:inherit; background:#bc3958; box-shadow:0 0 5px 0 #bc3958; }
.mhn-player .controls .action-button a { width:40px; height:40px; font-size:16px; margin-right:5px; border:2px solid; line-height:35px; border-radius:50%; text-align:center; display:inline-block; }
.mhn-player .controls .action-button a:hover,.mhn-player .controls .action-button a.active { color:#ccc; }
.mhn-player .controls .action-button a .fa { font-size:inherit; }
.volume { height:10px; width:100px; margin:0 10px; font-size:14px; cursor:pointer; display:inline-block; -webkit-appearance:none; background:transparent; }
.volume::-webkit-slider-runnable-track { height:.5em; background:#d8d8d8; border-radius:.25em; -webkit-appearance:none; }
.volume::-moz-range-track { border:none; height:.5em; background:#d8d8d8; border-radius:.25em; }
.volume::-ms-track { border:none; height:.5em; color:transparent; background:#d8d8d8; border-radius:.25em; }
.volume::-webkit-slider-thumb{-webkit-appearance:none; position:relative; margin:-.25em; border:none; /* Firefox,IE */
 width:1em; height:1em; border-radius:.5em}
.volume::-moz-range-thumb{border:none; /* Firefox,IE */
 width:1em; height:1em; cursor:ew-resize; border-radius:.5em}
.volume::-ms-thumb{border:none; /* Firefox,IE */
 width:1em; height:1em; border-radius:.5em}
.volume::-ms-fill-lower,.volume::-ms-fill-upper { border-radius:5em; background:transparent; }
.volume::-ms-tooltip { display:none; }
.volume::-ms-fill-lower { background:#f05e7b; }
.volume::-webkit-slider-thumb { background:#dc143c; }
.volume::-moz-range-thumb { background:#dc143c; }
.volume::-ms-thumb { background:#dc143c; }
.volume::-webkit-slider-runnable-track { background-size:50% 100%; background-repeat:no-repeat; background-image:linear-gradient(#f05e7b,#f05e7b); }
.volume::-moz-range-track { background-size:50% 100%; background-repeat:no-repeat; background-image:linear-gradient(#f05e7b,#f05e7b); }
.volume[data-css="0"]::-webkit-slider-runnable-track{background-size:0% 100%}
.volume[data-css="0"]::-moz-range-track{background-size:0% 100%}
.volume[data-css="0.1"]::-webkit-slider-runnable-track{background-size:10% 100%}
.volume[data-css="0.1"]::-moz-range-track{background-size:10% 100%}
.volume[data-css="0.2"]::-webkit-slider-runnable-track{background-size:20% 100%}
.volume[data-css="0.2"]::-moz-range-track{background-size:20% 100%}
.volume[data-css="0.3"]::-webkit-slider-runnable-track{background-size:30% 100%}
.volume[data-css="0.3"]::-moz-range-track{background-size:30% 100%}
.volume[data-css="0.4"]::-webkit-slider-runnable-track{background-size:40% 100%}
.volume[data-css="0.4"]::-moz-range-track{background-size:40% 100%}
.volume[data-css="0.5"]::-webkit-slider-runnable-track{background-size:50% 100%}
.volume[data-css="0.5"]::-moz-range-track{background-size:50% 100%}
.volume[data-css="0.6"]::-webkit-slider-runnable-track{background-size:60% 100%}
.volume[data-css="0.6"]::-moz-range-track{background-size:60% 100%}
.volume[data-css="0.7"]::-webkit-slider-runnable-track{background-size:70% 100%}
.volume[data-css="0.7"]::-moz-range-track{background-size:70% 100%}
.volume[data-css="0.8"]::-webkit-slider-runnable-track{background-size:80% 100%}
.volume[data-css="0.8"]::-moz-range-track{background-size:80% 100%}
.volume[data-css="0.9"]::-webkit-slider-runnable-track{background-size:90% 100%}
.volume[data-css="0.9"]::-moz-range-track{background-size:90% 100%}
.volume[data-css="1"]::-webkit-slider-runnable-track{background-size:100% 100%}
.volume[data-css="1"]::-moz-range-track{background-size:100% 100%}
</style>
Kode jQuery (warna merah) diatas jika sudah ada / sudah terpasang di blog kamu maka tidak usah dipasang lagi.
4. Letakan kode dibawah ini dibawah kode diatas.
<div class="mhn-player">
<div class="album-art"></div>
<div class="play-list">
 <a href="#" class="play"
  data-id="1"
  data-album="Lagu Pembukaan"
  data-artist="Seocips Alay Bingitz"
  data-title="Bingung"
  data-albumart="http://3.bp.blogspot.com/-Kw5Iu9dnGFE/VJjwLEwPZMI/AAAAAAAAB34/XezkYM46n6k/s1600/egoist.jpeg"
  data-url="https://sites.google.com/site/socipshotmusic/musicdjseocips/seocips-mp3-1.mp3"></a>
 <a href="#" class="play"
  data-id="2"
 data-album="Country song"
  data-artist="Alan Jackson"
  data-title="Remember When"
  data-albumart="http://3.bp.blogspot.com/_rSA9SVWw60w/SqslhK35_3I/AAAAAAAAI1g/69w9i9uh2QM/s400/AlanJackson-GreatestHits.jpg"
  data-url="https://sites.google.com/site/socipshotmusic/musicdjseocips/Remember%20When%20-%20Alan%20Jackson%20Lyrics.mp3"></a>
 <a href="#" class="play"
  data-id="3"
  data-album="SafeBand"
  data-artist="SafeBand"
  data-title="Semestinya Terlarang"
  data-albumart="http://1.bp.blogspot.com/-MOAM4rignp8/VGBmrG2mJ6I/AAAAAAAAAFQ/e4eHehkj0F4/s1600/Kumpulan%2BGambar%2BAnime%2BJepang%2BCantik%2Bdan%2BGanteng.jpg"
  data-url="https://sites.google.com/site/socipshotmusic/musicdjseocips/Save%20Band%20-%20Semestinya%20Terlarang.mp3"></a>
 <a href="#" class="play"
  data-id="4"
  data-album="ABCD"
  data-artist="EFGH"
  data-title="IJKL"
  data-albumart="http://2.bp.blogspot.com/-vJIK3vR06v8/UMtg3URJ0FI/AAAAAAAAAU8/_GUv8uaEF_c/s1600/dark-angels.jpg"
  data-url="https://sites.google.com/site/socipshotmusic/musicdjseocips/dj%20seocips.com-%20Hotmusic3.mp3"></a>
 <a href="#" class="play"
  data-id="5"
  data-album=""
  data-artist="Katy Perry"
  data-title="Roar"
  data-albumart="https://1.bp.blogspot.com/-p9ZRXwsnxvc/Vei4zkJTo8I/AAAAAAAAU0s/_kiDrkQwuBE/s1600/Katy%2BPerry%2B%25E2%2580%2593%2BHits%2BCollection%2B%25282015%2529%2B320%2BKBPS.jpg"
  data-url="https://sites.google.com/site/socipshotmusic/musicdjseocips/08.%20Katy%20Perry%20-%20Roar.mp3"></a>
 <a href="#" class="play"
  data-id="6"
  data-album=""
  data-artist="The Rock Indonesia"
  data-title="Selir hati"
  data-albumart="http://4.bp.blogspot.com/-GObWSUsR5OA/VDd-xiyW3kI/AAAAAAAAACo/ol8HPPy5yDY/s1600/TheRockIndonesia.jpg"
  data-url="https://sites.google.com/site/socipshotmusic/musicdjseocips/The%20Rock%20-%20Selir%20hati.mp3"></a>
  <a href="#" class="play"
  data-id="7"
   data-album="Yovie and Nuno"
  data-artist="Yovie and Nuno"
  data-title="Janji Suci"
  data-albumart="http://2.bp.blogspot.com/-tCrsOkCvABA/Vftl7cKHoOI/AAAAAAAAApo/9ILm-v6eVUo/s1600/still-the-one.jpg"
  data-url="https://sites.google.com/site/socipshotmusic/musicdjseocips/Yovie%20N%20The%20Nuno%20-%2003%20Janji%20Suci.mp3"></a>
 <a href="#" class="play"
  data-id="8"
  data-album="VX"
  data-artist="Seocips.com"
  data-title="Oh Yeah"
  data-albumart="http://1.bp.blogspot.com/-4qoZdCNXSOE/Vg6FfXMvF1I/AAAAAAAAIls/LJ_mIafcExU/s400-p/Gyakusatsu%2BKikan%2BGenocidal%2BOrgan%2BAnimeRid.jpg"
  data-url="https://sites.google.com/site/socipshotmusic/musicdjseocips/seocips-mp3-1.mp3"></a>
  </div>
<div class="audio"></div>
<div class="current-info">
 <div class="song-artist"></div>
 <div class="song-album"></div>
 <div class="song-title"></div>
</div>
<div class="controls">
<a href="#" class="toggle-play-list"><i class="fa fa-list-ul"></i></a>
<div class="duration clearfix">
 <span class="pull-left play-position"></span>
 <span class="pull-right"><span class="play-current-time">00:00</span> / <span class="play-total-time">00:00</span></span>
</div>
<div class="progress"><div class="bar"></div></div>
<div class="action-button">
 <a href="#" class="prev"><i class="fa fa-step-backward"></i></a>
 <a href="#" class="play-pause"><i class="fa fa-pp"></i></a>
 <a href="#" class="stop"><i class="fa fa-stop"></i></a>
 <a href="#" class="next"><i class="fa fa-step-forward"></i></a>
 <input type="range" class="volume" min="0" max="1" step="0.1" value="0.5" data-css="0.5">
</div>
</div>
</div>

Setting Widget

Perhatikan kode berwarna biru di atas, itu adalah judul album, artis (penyanyi) dan judul lagu. Perhatikan kode warna merah diatas, itu adalah Cover Album (gambar) dan dibawahnya adalah link lagu Mp3 yang akan di putar, Jika kamu ingin memutar lagu sendiri, maka kamu dapat mengupload di hosting penyimpanan file, kalau contoh diatas saya menyimpannya di Google site (baca:cara upload musik ke google site). Selanjutnya untuk lagu berikutnya kamu lihat saja kode yang sama dengan yang pertama (berwarna pada no 4) dan diganti-ganti saja.

5. Masih dalam mode HTML dan Publikasikan,
6. Selesai.

Kamu bisa memasang widget ini pada sidebar blog kamu, asalkan sidebar blog kamu sesuai dengan lebar widget ini. Jika tidak, dilain kesempatan saya bagikan widget pemutar musik ini sesuai dengan lebar sidebar blog pada umumnya.
0 Komentar untuk "Cara Membuat Pemutar Musik pada halaman di Blogspot"