iklan banner

How To Add Music in Blog Page SEO Friendly

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.

DEMO Music

How to Add Music Players At Page in Blogger

  1. Login Blog
  2. Select Pages >> New Page
  3. 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.
  4. 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/AVvXsEgCCtJ_LBadU0zlBtcOb5y946FHe69BJ8ntgt64ZKB2JvAWtJw_5uVV1cLXwgRUNthmwxdJ_syr7q7Tak2_7lLcMnxKwmzgNFXMvI0DXpWkSjOLNh3zUc8_L_ImUGZ-KblfM3baYr9fmeCW/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/AVvXsEgF9oR1Mx7ECKFMbf5J09IbrxOvTw7I_QSo5hUF2EmEsTYrYQthhbVN2WjHMXyoFmpGqjIOaSqcnai33pshBD359HhBIN54SpE9mtNa3LSECAtdXhuQEeKVXEHmszIaFzcmlsiObMFFH3Q/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/AVvXsEim5tKwOHoKpHdyf_dj_g2bn8CCCDpWQ4-n9vN5LoDTF3Z4xpbu1uW2EwTJNxjDveuQNnYgzIRfAMsYnro68jWCIn69zYoR6GLj9kQJYEJueDjDpk6bQ0tPLhlUPgbxNqVUyw4LdXyDvqM/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/AVvXsEj_u49IGzPKl89UUwIsQcAS5_rIPw9D_6_TYwSkkAClsddQ6XaUh9IgOa9tn23rZV59K80duAWqxn0XoeDLaF20ED0JjAPlRD3zK3ta6hfWYnT3Rsm7O4suVGVN2mHBSX8vJpwT6xoO0Jc/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/AVvXsEip9k3JMNJyiDqSf3SWWRO_w2dkgUX7m0lIUH_ZTAv9Ju-izDergCfbOKwpadKEnmMk0svkfiVJSY31iBShp_P1pJ3wXH5Sa0nU50geIaGMVRPPAo_H3hjO4GmCAW1DYtFwKB_AIuuCfpA/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/AVvXsEiSOaI2x7hERS9yUq-lpwYbbrIjNsjK6kasSZUYe1SHTfOfqPvfW2JLW6koV6eeXbn1f8rWm-HxdxdckyzB0sCxWnoSAXLIX2S3BUYdWOYDpKqeqXU1tWl65mpdoDYcEX_C5i1VYrIBkQ/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/AVvXsEju5Dx7kZnwpvY48AINtdX0aVXGbU6F1cuMFlPxuiMXvglMHGoGMW10oqhLS0LbIjzGaQRiRqZ0DLxMNXh7hjb1gQ5V-D8qthyvQt3F9JSo7jMsK-KLVSLMNWTgVdJN0eV1hTd51FfZ8AY/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/AVvXsEh72_KAHa3awSAniHDVact5_bdpOko5Pku59bYT3m1ew5Fy4hym_AQetrtfMs7aeIlfizEx_lnk1cedpxS32Qq-jJtHhyhxIcjo6Bd0uG7l7FqYBn5EyOz2A6EWORlaDHNt6mB2uMLOFjU/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>

    5. Note the color coded green on top, it is the album title, artist (singer) and the title track. Note the color code yellow above, it was Cover Album (picture) and below is a link Mp3 songs will be played, if you want to play your own songs, you can upload hosting file storage, if the example above, I keep it in the Google site. Furthermore, to the next song you see the same code as the first (colored in No. 4) and replaceable only.

  5. Still in HTML mode and Publish, finished

You can install this widget on your blog sidebar, blog sidebar as long as you fit the width of this widget.

You may also like :
Best Parse HTML to XML Converter Tools
Posted by :
Add Comment

Langganan: Posting Komentar (Atom)
iklan banner