How To Add Music in Blog Page SEO Friendly Terbaru

Thursday, 28 April 2016

Here is how to create a music player (music player) on a page in Blogger. Usually we put this widget on the sidebar of the blog, but this time is different from the earlier-before because we will put this music player widget on the blog page.

You can choose your favorite song, upload your favorite songs to the Google site and then put the song link to this widget. In this widget not just one or two songs that you can just plug it in, you can install multiple songs at once. Oh yes, before I also had the music player widget mebagikan own selection of songs.

This widget is not automatic track player, so to play songs you have to press a button Playnya. There are also other buttons like a real music player, such as: the menu, pause, stop, next, prev and volume. For more details you can see the picture below and his demos as well.

How to Add Music Players At Page in Blogger

Login Blog
Select Pages >> New Page
Select mode HTML and paste the following HTML Coding.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js' type='text/javascript'></script>
<script src='https://goo.gl/VQmlAK' type='text/javascript'></script>
<script src='https://goo.gl/YK816c' 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>

JQuery code (Green) above if it already exists on your blog then do not install anymore.
Put the code below under the code above.

<div class="mhn-player">
<div class="album-art"></div>
<div class="play-list">
<a href="#" class="play"
data-id="1"
data-album="Open Songs Music"
data-artist="Top24Hours"
data-title="What What What Man"
data-albumart="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq5S1GK-mlxvLaQKISNBER42z9xZiOL5y3p07Ql_8ftOvNT0o9GCu95X5HNyWUNhcg8aMZHF5V5GtUZvHt6_x6-63GVJK41mb4jHREU2hJkMmGcWxKI6kUpJ-BbhBsglZVNmxHEuVgUT24/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/AVvXsEh4yRiKpztNXDXDbLwmI5YDsjvBdqX2mcXI54dVCNoYGX7IVR5DKrZSZk-WydPoQT30lQQh2y3QtsFE62WDc_VHqGVtKC_pD5G0q3s4LfG7IL0amBC8AwfVT6pyF5gJKReU9wHK8yeCO1E/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/AVvXsEhdZ46iLqvw2wVuTS7cDjXvLcUVq21Li5I3Y9et8KBX-FBpleyZlBEqaoodVSfqlweOYfyHjdTnXTL674hlOnkGLK3W1I8U_IxHl8vJW2P6RCDQvaYMWco4JaN0mfYbNnf59jP60gSK0YU/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/AVvXsEgYP2KTSYg0ZliANopOpwDDtIssiV2uaKkUyM6Q9i-pamvE7EPa_yqqU8vF8lQAFCrDhSRIVZ8yJ1R4VvXwWCkKM-iT-vzIcuAE20TYCOJ05R1ICt4GbJ4Qf0FgER1VH9q48TcbnlniDvI/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/AVvXsEhbwoXvnGgOprzqy2w7Z5Rjvsv5ZyR5doOMX4ePUR2wTUjP_AiOojavpXYfkohMFiU1EBhBvn9ptHhqb6P0RSduS2CYT6P0JKryYqSqvcTbtPwsOmJeL4bHc_ArDkgBikrND5FkhNl9yqg/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/AVvXsEj-pULNyNRRrvcZN1EaDnYgz5bUaTejP-fYbm6dTtuQXqR4xS8KJAB9bzoZEySxb6pJppuZiJeptQrDwpZFydcUfa1HfIrHb-s2wzh5lQLEizSVp4yjh0sDpOxNDGLu9cEFx_3ujiFZCw/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/AVvXsEgcCim4SqlMhFH7KR2TfjU8yLFDikW4T_09sQuw0DZJNYUBwnRUBSPYwiaxnFKyCEyn3y4hQuhLRqPaGLSRSUNjsctzyKZpEIi5X49yXYokzGQYSHuDgf4W5SCMB1-eaek-bX_LWoVYibg/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="Top24Hours"
data-title="Oh Yeah"
data-albumart="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiugquThOv5TTgW6lU3UrrDPmO_R9S6pKrfcVQaW9Ne6AB_WYfxsEprgFIU3zRHVZSS9spoILUxgvh_O9pES0LaY1bqHsXAAgdBwlTzyzFsmq2xZpD7izDZsXvQHpkkgAhg4sW1DiIFiVo/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>