Cara Membuat Pemutar Musik pada Halaman Blogger

Halo gan Sorry gua jarang upload karena habis sakit nah kali ini gua akan posting lagi dan membagikan tutorial untuk kamu semua. Simak Baik baik!

✔ Cara Membuat Pemutar Musik pada Halaman Blogger

1. Masuk Ke akun blogger kamu DISINI

2. Lalu masuk ke Laman >> Buat Laman Baru

3. Setelah itu Pastikan Kolom Nya dalam Mode HTML bukan Compose

4. Lalu salin kode di bawah 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>

Note: Hapus Kode Yang Berwarna Merah diatas Jika Kode Itu Sudah Dipsang Di blog Kamu

5. Salin Juga Kode Dibwah ini Tepat 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="Nama Album"
data-artist="Nama Artis"
data-title="Nama Judul"
data-albumart="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioW0Ryd7n236zP0qsS73ZuTuRN9u05VdXmoZppzixyB8a9i3avRdzzPm21vgJ-uVSZi94sROCNJXIDvpPIfW_wPgVjse7Mi0Tm7slJzIL1BclIgjt91VDlELaosfc6Wr3bSQjbdS-3A0Ir/s1600/egoist.jpeg"
data-url="URL LAGU"></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/AVvXsEhISZ8rekNUTEavBIgk_7A7ocDzkgSu5mI06Z_eSRh2G0KFpvudNmJz1ImQbsxQ2VQPHxe9o2SFKi4KuhZYqR6g1OvY6gKxEl1_BPHUn83wyju0YaYBSoMRESxJ6Gi1XD5C7tHclRH7J2k/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/AVvXsEiIZyZsiza29dkKOYcxYXH71231JPwP_WlBOuWuep7agRCgBSx_7akUoEA4_HcTpmGQgp1wha7v1OYAjAHyGMXe2UJzDHISvIS5sAzKUMA_AniaV9RaE78Q0b8vqkK6DiGysYuxzJ1adDw/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/AVvXsEgi5t-aBKFikexlUA58cPXtYXIYQZ_q0B3zUP-o-FVJJP6nBSOrlh9YWV26EGvyOX3LpJzr_gUIyvN4b3FbU4NJPWJ-ezUkT-Ct0aedFIVOu1o9HIt0EK5yhlbQ8zTAtF0TVd2yTZPyErU/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/AVvXsEheBQZEDCC3PGzuTOJFJ_gqqL7HniIii7mcqbSvIP1H26AZMJNawjJsCYBx5QJJKMbFSm01hKR5l15_ddBGEFyF7XP7g5GuQVPVQsBWgWpx7a18M089dB3dc48JqXPh2gOTMKwYonVCP0E/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/AVvXsEiZL5Lbny7f2I0fA7SQBsXRnQ_0noHtU_P4jgrFJFDHehMAGWhIlmYFKASD6tBmB-WDsntzAFEI9bFqAsgV_ipcg1dbK4ZjVH8Vi45deJdoWPKamAziGo5DzABoUI_kkbtBmcsLGUWptw/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/AVvXsEhs-LfCteDA08sggn-5k5FYho47sin44kWxOwERJ-bKZyTWc970mc57RGeBY4dJfU0Ej7kMNNqUfOSg9RoGHmGY-da8oGoPDxwsh8MpuG-4502piyRpl5eOEZMKckxxw0HAZ7UxY-j57PA/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/AVvXsEh9sz0jzhsNg5LJLhmKfYsU-m8nQXz5NsjDmhuCZW_qUnO0fV6YKbzVOTqkDzHAztM-kcy2DIFueC4yI2S_5mfMx-I7dLUaT6icjp_6Ik7kw5uXKZ81U3KFa-9nfOEeVjoZQDy2xux6q8M/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>

NOTE : Rubah Kode yang bewarna Biru Menjadi Album Lagu, Artis Lagu, Judul Lagu
Dan rubah kode yang bewarna Kuning Menjadi URL Lagu Tersebut (Disarankan Lewat Site.google.com)

Simpan.

Jangan Lupa berlangganan Lewat Email dibawah Untuk Memberitahu Jika Postingan Update 

 Achlesy Man adalah seseorang yang hobby nge post & Gonta Ganti Platform Blogger Karena Senangnya, Dia sampai Lupa Waktu