Cara Membuat Widget Music Player Keren Update

Cara Membuat Widget Music Player Keren Update - Jarang posting blogger tutorial, admin mau sharing tutorial widget music player atau pemutar musik keren dengan tampilan display mirip seperti pemutar music android atau smartphone. Penasaran ? sebelum dilanjutkan admin juga akan memperjelas pada agan semua, sebaiknya agan sudah memiliki tutorial mendasar dalam mengoperasikan blog agan. Jangan sampai tidak mengerti apa - apa tetapi agan terlanjut mencoba tanpa pengetahuan. Yuk lanjut membaca gan.

Sebelum melanjutkan posting ini menuju tutorial pemasangan widget music player ini, admin berterimakasih kepada admin dari blog seocips yang sudah sharing tutorial ini. Jika agan berminat mengunjungi blog seocips, admin juga akan mengarahkan link berikut pada blog seocips. Sebagai blog yang lebih professional, admin sangat terinspirasi dari blog tersebut. Okaylah lanjut pada tutorialnya gan.

Tutorial Pemasangan

Pertama agan buka blogger dan masuk ke template, setelah itu edit html dan copypaste javascript dibawah ini tepat diatas kode </head>

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

Kedua masih tetap dalam edit html template, copypaste script style css berikut ini tepat diatas kode </b:skin> sebenarnya ada kode tambahan di depan </b:skin> intinya diatas kode tersebut.

*,: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%}

Ketiga klik save template, dan sekarang agan pergi ke tata letak dan add widget. Setelah itu pilih HTML/Javascript dan copypaste script dibawah ini.

<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/AVvXsEiZsgUEM9P6OwSqu6FnewR-H5Vm4A3uLk7XdcQtM-35N_XgfJsp98A3xDTFm1c_qqqOL43QqYMxnvpMZVVje584wq7WbM5l7_hwbJJn6ZVU_8w3mWY2m6gcfXHbX0QhKTh-vsMPnoSDAC04/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/AVvXsEhityj1qtWwQ4DIkr6MNSsVpL6ZcmchxMO9ILxqyGHMyIWCGoTccGm63RToLYNghrK7koNn1CJTEeDbLGpv4FDkuiG9_GZaEazy0-xejYEXARa0qvnfGqxU2lgqOPo0dJPWnYgCA6-uqUI/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/AVvXsEiq3SZ2UZZ-3YmIhdwPMBpYvlll5NGouYU_Vxr8e9xFURDphQZXBWSGbsQFj9xxCrdNVvgkZoP6X7z6hv0oOL7ETvR0BFgf0TiPUUGY5bzgTqLkFxYhigAAN6VP9qh_9SoLzJc2s8IILfI/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/AVvXsEhRrYGoaW691BgQhEa-T7T5e47PPmGPWSWyT1IoWvd7EIBayrM0w-21GJ9qekPW3wBM_6ZgcVJNSnYC4dnMYeiSaUHYcKiAcoVo3zmB0AljL0JtOqEm5F5bRCjJRhOEP7iZUw5aBe7Wouo/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/AVvXsEiUGbZb3OAf5DDTy_41OX4g_WHtxqGzocbQIpb3kvMBLpu4iiXCmcA4A7Vn9mQ3HVD5M2_7m0I7S6Rno-y3dgTqNDIM2Rf5H9gDQlKN-PXy31WbNA1MJi0NMGUxTncxKiNFBoAGtDikhX0/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/AVvXsEgLYaIsAO5mUmKXTWu6MgBvhJtvDKK-6fI1zzgyl9_K1_IdUlExu3l4SsZZ4ezmD1Basx7rTgffWdoFh95xIan9g2b-MzjoT2dXuVFFM-20jQmeRytnAf6qYuxwYf6NiFSnLNqvEl_xwA/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/AVvXsEgR7cx_6B9Y-OZNYklv2_JnfAsqYN7Ebwof29bZEUno3pCqbpcFiknDKi1f2gVRWusnoF6KPE9JFAQrbXzPSpcshaoVcSc7Qd4gjAcGBP0Q2L5wxwZkucdtActtBp01WuDIbsnHXhWKWbI/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/AVvXsEh8_eCoOkshUY1PidECELx8xOH_fQhHi0YxyHK-k7XJE4oJ0Mvy7HqdSnI-ioNZKTVZ-gH4w3F_3Lxz2pAqoPej2-Nma-4PF0tlaNd6EkwB2HTKdXPieZ-_sGauCxvegXI-GVWd9nQKSj4/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>

Selesai, tinggal save dan jika ingin mengedit bisa lihat tulisan yang diblock warna merah gan. Jika masih ada pertanyaan yang ingin disampaikan, silahkan gan. Lewat komentar juga bisa gan, akan admin balas komentar agan secepat mungkin.

Sekian tutorial blogger yang admin sampaikan, semoga bermanfaat terimakasih.

Biqi

Saya tinggal di Cirebon dan besar di kota udang ini. Tertarik dengan dunia blog tidak membuat saya lupa dengan pendidikan dan agama. Kunci utama saya adalah percaya bahwa apapun yang terjadi, usaha dan doa itu nomor satu.

Cara Membuat Widget Music Player Keren Update

Biqi

Artikel Terkait