Seringkali, untuk memasang lagu di laman blog adalah menggunakan widget. Cara itu adalah cara yang bisa dibilang kuno. Nah, ada cara yang lebih modern untuk memanjakan telinga blog's viewer mu loh!
Yap dengan menggunakan coding HTML, kamu bisa memilih lagu apa asaja yang akan di play, menghentikan lagu, dan hal-hal yang biasa dilakukan playermu.
Sayangnya, pemutar lgu ini tidak secara otomatis dimainkan ketika laman dibuka, tapi harus di press play dahulu. Berikut adalah tutorial membuat Music Player pada laman blogmu:

1. Buka laman blog kamu, lalu pilih Laman -> Laman Baru.
2. Switch ke mode HTML (Disamping bar Compose)
3. Salin gambar 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>
4. Salin gambar ini dibawah coding sebelumnya.
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE7as06pMBgz9I3BZM_M9hnBE-LDSVm1sRgTZVCdwPkU3IGxn1UaFb9GL4CBzA8j1yz9pHoExawLbCwxkfxj0e49Bp_RTVu7mKmXexrnIvMkJlIW2LbwOoAwQ-1WxctcodtdsH4X6y8OwE/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/AVvXsEhsDCGv6V9tPUVg_0zJj0fmFQQV5sO03_GB1GqDSU3_LJvH6UoQnE9EkL3BKeelpOUIDOCxnNAinaQdARm6WHdkmmOfAfGEc8Cmie1vLaChx-jJtdl1NuuysQW2dqngosKdhJycJPrHiAM/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/AVvXsEhjle6Bzc1r9vIcIOxOXAzBAbiHQ7xmMPh2gVCPP0zVwY9btd6AoR4a251wUBtijcKAQ6OiKgrNtXtlobsPfpwW70T5cI975cXazZFNyAOtil5gFbfOwi0aVCBog01U3tpRUC3RwMAzjZI/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/AVvXsEgH0Tpc99EAZZLz1crQJSPLlEUBu11RbjoQX0DBZxihh7wuyYpfBev9idIVvGx_eWII62r-jVA_3OQ3SKDyKIpVAaUbAQEOJq9QvfGwUVruEvIB3SyjhfC78_fb-rmEJfcEz1v8CiQTlcQ/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/AVvXsEhK_aTCjcD73CDei7pK1xJB0RlMMTyIzrERl6rduBIDSP03XA5c6572ciGgFHxIGDUMM9Hndw4RgYN5wXfz23kEUHYre27fAmn2vBBFR5U8nx-JeIM7yQ2h6RhZ5-zCp3djW4MeExdbp_A/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/AVvXsEhpMijey-1jIvitOVQepoa0VHR5L53biZ78y4Nfnp8mX0aDlBtOz-fSFCeMatxL8bf3QyNpTQ9PzZtF5B1UK3fqbxHez6sfky0N1Wu7nkhmJBAJCJ_n5Ip1CvXzf8IDk9eKhmzX9doR9w/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/AVvXsEi6PdpRqqBALIk_EpaAK6k0Y5Int4dXFAXQsfFqeDzvTKXHjMUgxKfaEHTHIbIzY21d4s-_LsJiIKxndNstpnFOp7PBwolq9UZ56Cwgsd9e0g3PsvsNdO8n9j26I83mV_iKMmXrFF9ggVU/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/AVvXsEjCtu29URykBLuU6IJSB6nQXr1AoonjMVDPmv-ci0hocFf7PcNsAemunXPKQFOHyiSiAD1_72SAwaOAsBljXiTIX0vMmP0KzBa7qTCv53pn5lOeKHa6TwqjVTFvkcGg_MJGa0ccXgQ5JtU/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 warna bitu untuk judul albu, artis, dan judul lagu.
kode warna merah untuk cover lagu. dan link yang dibawah adalah link lagu MP3 yang akan diputar.
5. Masih dalam mode html, klik Publish.
6. Selesai