Cara pasang musik di blog terbaru

Kembali lagi berjumpa dimalam hari ini, nah mimin disini akan memberikan tips blogger tentang bagaimana cara membuat pemutar lagi di blog dengan mudah dan cepat. Tentunya dengan adanya halaman musik player ini akan membuat pengunjung anda menjadi sangat terhibur dikala mereka lagi jenuh atau pun sedang galau. Biasanya memasang widget pemutar musik ini di letakan pada sidebar blog, namun kali ini mimin akan memasang widget pemutar musik pada halaman blog.

Dengan menggunakan widget pemutar lagu ini di blog yang anda kelola, kalian dapat memilih jenis lagu apa saja yang ingin anda upload dan ditambahkan ke dalam playlist widget pemutar music ini. Keunggulan widget ini dapat menyimpan beberapa lagu bukan hanya 1 atau 2 saja namun beberapa lagu yang dimana lagu ini akan menjadi daftar musik pada blog anda.

Tutorial malam ini adalah bagaimana cara memasang musik didalam blog, Baik di blogger maupun di Wordpress jadi terus membaca artikel malam ini ya sobat rampok jangan sampai ketinggalan dan terus dateng keblog bobrok ini ya hahahahah,  Terus merampok dollar ya sob jangan pantang menyerah hajaaar terus hahah ^_^

Disamping itu cara memasukan lagu ke blog juga sangat mudah sekali, anda dapat memilih semua daftar lagu yang akan diputar pada halaman blog itu sendiri. Review untuk widget play musik di blog ini tidak bermain atau berputar dengan otomatis melainkan pengunjung blog anda harus menekan tombol play untuk memainkan lagu tersebut. Untuk langkah pembuatan dan pemasangan anda bisa mengikuti langkah - langkahnya pada berikut ini.

Cara memasang Pemutar musik di halaman atau page blog 

1. Login dan masuk ke dashboard blog sobat. Kemudian klik menu di bilah kiri yaitu menu Laman > Laman Baru.

2. Ganti metode penulisan blog dari Compose menjadi HTML.

3. Tambahkan kode di bawah ini tepat di kolom editor mode HTML.

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

Untuk kode yang mimin tandai dengan warna merah, jika kode tersebut sudah terpasang pada template blog anda silahkan anda bisa menghapusnya.


4. Tambahkan juga kode di bawah ini tepat di bawah kode di atas.

<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="carablogseo.id"
  data-title="Rocket Rockers"
  data-albumart="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMGu98Z13uNq4XLQhp0uhBWzNId701lfhFNkLkA4pIuPL4kyp29w0H5mEwzdgdNfRbfzNURs57Gqp10tgdw0A4n7_udsdJoqtnhij3K9s3sEqVJUArTiK0nTBuh6Yxx09fcMzqfOrRESx7/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidbWvXogaD4nr7dhTLm-nmsrmxba8irq8byYdPmw-4lERkEthbHkZAPd2sKXeuu7ghcHGXnnuTBOfAM2hHok1h8Ajv8VLKEmmP_2O-MPHKLiZApm4aZSmO5-zTya0Vc-lQ-gNO0pZs8E8/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijdyyr1J3qyH6C1OE8N6QpaUJFuGR0CZI7d67OvbaV7zTp38R5_q7z75MH-GS9G7kvG0EFSoOmc_2oyHD82FNhWqwcjcPnR0le6ZOnQD4otyvHxPtquBZobo8qOew1qV8W2unrJ7Cj7Tw/s1600/Kumpulan+Gambar+Anime+Jepang+Cantik+dan+Ganteng.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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjizwcVG-v8zO05yrNM3JmDAfnz3BRaNLyQIuvht9QvY6TAK_HwPjAaZfqWzhAsJI2I6f0Uool4h9Qo_aEExKAEERYxuTa9RT2_k9AgoErTTBT8ejk9n1j5td3VsnIzNWp4gXnf6hSbtqA/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRWgixtzUq4b_yQ9XkLFtqtxlERtUKmgtuQrv8upHl0tn1KENNp1r0jlM_Cu1R5xNn7sBkaB_FpHtPhU-PcHdoDSurNAdbcDtjIDNH99AXxv7ikgUYrMvcq6eJjQbrURHutEpFj9JA5O4/s1600/Katy+Perry+%25E2%2580%2593+Hits+Collection+%25282015%2529+320+KBPS.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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBXGph3OXnV-ywWQlGaG1LdIytKjSgHVflpAJOHI2l9QiMRH4zJM6PS4k46spnaJUdRs67LYE6z6-ms4xazyB6V5_a_zwuIMSVYMbz176o9CN96UAgzPfTPNvQWFCiaTqlmWkBasvOpw/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuMCDwnIi92qqb6AgLiKXYojXDo8dOY6HbcxBTTnsxGHem7YxN6SlW7HbVnWLaO1jgS7q1OvBdWPAzDi3Kj6zlBHM__44u2weGTsIyWgSChXWfLB2Bi7OXkl9Jc7eVT0qgCpAb7pW-Z_0/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYQSGJo7PA5FP2Zfzzb-S6XkdvvlW71BqJEvWG3GPhQ5nCGgraW4mwRoFzEmdE_v39o7OhyhdNNt-R08itnOW6LYjw7wPy1wPqpU72_6MHMJ5u_NcqhsyeiaZB8ix-Sa9Zxe_sqMdEnkc/s400-p/Gyakusatsu+Kikan+Genocidal+Organ+AnimeRid.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>

Perhatikan kode di atas dengan fonts berwarna biru kode tersebut adalah judul lagu album, artist atau penyanyi dan judul lagu. Dan kode yang sudah mimin tandai dengan block merah adalah gambar dari album penyanyi. Kode warna kuning adalah kode link atau url lagu. Anda bisa memasukan lagu ke blog dengan cara mengupload lagu ke hosting seperti google drive atau lain sebagainya.

Selamat Mencoba dan Bermanfaat!