Pembaruan Terakhir (26-05-2023)
  • Update script: membuat notifikasi semua komentar di blogger (mode popup)

    • Spesifikasi: src='https://cdn.jsdelivr.net/gh/rahcode-ui/icloudice@dewa/users/js/user53cm.js'

  • Toast notif disertai Text-to-speech
  • Cukup klik 1 kali maka mode responsif akan aktif (sebelumnya dua kali kik)
  • Sekarang komentar telah di tambahkan beberapa fitur custom segera periksa
Beranda
Blogger

Membuat pemutar musik di blogger

views

Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai cara membuat player music di blogger dengan tampilan keren dan juga menarik tentunya

Info: Oke jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama

Player Music

Apakah itu player music? dan untuk apakah fungsi serta kegunaannya, oke pasti dari kamu pernah mendengarkan musik melalui aplikasi, jika iya aplikasi tersebutlah sebagai Player musik alias pemutar musik, nah di dalam player musik tersebut menampilkan berbagai informasi mengenai lagu yang sedang di putar seperti judul, artis, album dan lain sebaginya, dan tampilan seperti itulah yang ingin di terapkan pada website

Upload file

Sangat di sarankan bahwa sebelum kamu memasang dan menginstall seluruh source kode, kamu harus terlebih dahulu meng-upload lagu ataupun musik ke dalam sebuah platform, yang mana link dari hasil upload tersebut lah yang di gunakan sebagai source kode langsung untuk memutar lagu tersebut

Menggunakan Podbean

Platform terbaik untuk mengapload file dan mendapatkan akses link direct langsung ke dalam file adalah podbean.com, admin sangat merekomendasikan agar kamu menggunakan platform tersebut, silahkan lihat penjabaran cara menggunakan podbean untuk mengupload file dibawah ini

  1. Kunjungi website resmi nya Podbean.com
  2. Selanjutnya anda bisa melakukan login menggunakan akun google anda
  3. Setelah login silahkan buat episod baru seperti contoh gambar di bawah ini

    4. Info: Temukan menu Episod di dalam menu dashboard

  4. Kemudian Upload file khusus pembahasan kita kali ini adlah lagu atau musik
  5. Salin hasil upload lagu tersebut dan gunakan sesuai keperluan

Info: Untuk mendapatkan link, setelah selesai meng-upload file, silahkan scroll tampilan website ke bawah hingga menemukan link yang dimaksud seperti contoh gambar di atas

Contoh Tampilan

Jika kamu penasaran dengan bagaimana kah contoh tampilan dari player musik di blogger silahkan periksa menggunakan tombol di bawah ini ok

Info: Bagiamana sobat dengan contoh tampilan nya keren sekali yak, ya pastilah...

Cara pembuatan

Baiklah sekarang saatnya admin bakalan menjabarkan mengenai bagaimana caranya membuat player music di blogger, silahkan baca dan ikuti setiap arahan yang bakalan admin jabarkan di bawah ini ok

Kode CSS

Seperti biasanya kamu bisa langsung menyalin kode CSS di bawah ini kemudian letakkan di atas kode ]]></b:skin>

.rahPlyrMs{transform:translate(0%,0%);width:330px;height:500px;border-radius:15px;background-color:#fff;box-shadow:0 15px 20px 0 #dadada;}.rahPlyrMs input[type=range]{-webkit-appearance:none!important;margin:0px;padding:0px;background:#e7e8ff;height:5px;width:150px;outline:none;cursor:pointer;overflow:hidden;border-radius:5px;}.rahPlyrMs input[type=range]::-ms-fill-lower{background:#0505ff;opacity:.2}.rahPlyrMs input[type=range]::-ms-fill-upper{background:#0505ff;opacity:.2}.rahPlyrMs input[type=range]::-moz-range-track{border:none;background:#0505ff;opacity:.2}.rahPlyrMs input[type=range]::-webkit-slider-thumb{-webkit-appearance:none!important;background:#0505ff;height:5px;width:5px;border-radius:50%;box-shadow:-100vw 0 0 100vw #0505ff;}.rahPlyrMs input[type=range]::-moz-range-thumb{background:#0505ff;height:8px;width:8px;border-radius:100%;}.rahPlyrMs input[type=range]::-ms-thumb{-webkit-appearance:none!important;background:#0505ff;height:8px;width:8px;border-radius:100%;}.rahPlyrMs .rahcvrMs{width:150px;height:150px;border-radius:50%;overflow:hidden;position:absolute;left:50%;top:50px;transform:translateX(-50%)}.rahPlyrMs .rahcvrMs img{width:100%;height:100%;object-fit:rahcvrMs;}.rahPlyrMs .rahinfoMs{position:absolute;left:50%;top:240px;transform:translateX(-50%);text-align:center;}.rahPlyrMs .rahinfoMs .rahtitleMs{font-size:20px;font-weight:700;margin-bottom:2px;}.rahPlyrMs .rahinfoMs .rahsingerMs{font-size:12px;}.rahPlyrMs .rahbtnMs{position:absolute;top:330px;width:100%;display:flex;justify-content:center;}.rahPlyrMs .rahbtnMs i{font-size:24px;color:#72646f;margin:0 30px;cursor:pointer;}.rahPlyrMs .rahbtnMs i.active{color:#0505ff;}.rahPlyrMs .rahVolume{display:none;position:absolute;left:50%;top:295px;transform:translateX(-50%);z-index:1;padding:0 20px;}.rahPlyrMs .rahVolume .volume-down{position:absolute;left:-15px;top:50%;transform:translateY(-50%);cursor:pointer;color:#72646f;}.rahPlyrMs .rahVolume .rahvlmUpMs{position:absolute;right:-15px;top:50%;transform:translateY(-50%);cursor:pointer;color:#72646f;}.rahPlyrMs .rahVolume .rahvlmUpMs::selection{background-color:unset;}.rahPlyrMs .rahVolume input[type=range]{height:5px;width:150px;margin:0 0 15px 0;}.rahPlyrMs .rahVolume.active{display:block;}.rahPlyrMs .rahbxMs{position:absolute;left:50%;top:385px;transform:translateX(-50%);}.rahPlyrMs .rahbxMs input[type=range]{height:5px;width:230px;margin:0 0 10px 0;}.rahPlyrMs .rahbxMs input[type=range]::-webkit-slider-thumb{height:5px;width:7px;}.rahPlyrMs .rahbxMs .current-time{position:absolute;left:-35px;top:50%;transform:translateY(-50%);font-size:12px}.rahPlyrMs .rahbxMs .duration{position:absolute;right:-35px;top:50%;transform:translateY(-50%);font-size:12px}.rahPlyrMs .rahbxMs .play,.rahPlyrMs .rahbxMs .pause{position:absolute;left:50%;top:55px;transform:translateX(-50%);width:50px;height:50px;border-radius:50px;background-color:#0505ff;cursor:pointer;transition:all 0.4s;}.rahPlyrMs .rahbxMs .play i,.rahPlyrMs .rahbxMs .pause i{font-size:36px;color:#fff;position:absolute;left:50%;top:50%;transform:translate(-48%,-50%);}.rahPlyrMs .rahbxMs .pause i{font-size:32px;transform:translate(-50%,-50%);}.drK .rahPlyrMs{background:#2d2d30; box-shadow:none} .drK .rahPlyrMs .rahbxMs .play,.drK .rahPlyrMs .rahbxMs .pause {background-color:#5442f5}.drK.rahPlyrMs input[type=range]::-ms-fill-lower{background:#5442f5;opacity:.2}.drK .rahPlyrMs input[type=range]::-ms-fill-upper{background:#5442f5;opacity:.2}.drK .rahPlyrMs input[type=range]::-moz-range-track{border:none;background:#0505ff;opacity:.2}.drK .rahPlyrMs input[type=range]::-webkit-slider-thumb{-webkit-appearance:none!important;background:#0505ff);height:5px;width:5px;border-radius:50%;box-shadow:-100vw 0 0 100vw #0505ff;}.drK.rahPlyrMs input[type=range]::-moz-range-thumb{background:#0505ff;height:8px;width:8px;border-radius:100%;}.drK.rahPlyrMs input[type=range]::-ms-thumb{-webkit-appearance:none!important;background:#0505ff;height:8px;width:8px;border-radius:100%;}.drK .rahPlyrMs .rahbtnMs i.active{color:#0505ff;}.drK.rahPlyrMs input[type=range]::-ms-thumb{-webkit-appearance:none!important;background:#0505ff;height:8px;width:8px;border-radius:100%;}

Info: Atau sobat bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas

Kode Javascript

Langkah selanjutnya yang bisa kamu lakukan adalah menyalin lagi kode javascript di bawah ini kemudian letakkan atas kode </body>

<script>/*<![CDATA[*/
/* Music Player by ICloudice.com */
var _0x3a1a=["\x2E\x6D\x75\x73\x69\x63\x2D\x65\x6C\x65\x6D\x65\x6E\x74","\x71\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72","\x2E\x70\x6C\x61\x79","\x2E\x73\x65\x65\x6B\x62\x61\x72","\x2E\x63\x75\x72\x72\x65\x6E\x74\x2D\x74\x69\x6D\x65","\x2E\x64\x75\x72\x61\x74\x69\x6F\x6E","\x70\x61\x75\x73\x65\x64","\x70\x6C\x61\x79","\x63\x6C\x61\x73\x73\x4E\x61\x6D\x65","\x70\x61\x75\x73\x65","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x3C\x69\x20\x63\x6C\x61\x73\x73\x3D\x22\x6D\x61\x74\x65\x72\x69\x61\x6C\x2D\x69\x63\x6F\x6E\x73\x22\x3E\x70\x61\x75\x73\x65\x3C\x2F\x69\x3E","\x3C\x69\x20\x63\x6C\x61\x73\x73\x3D\x22\x6D\x61\x74\x65\x72\x69\x61\x6C\x2D\x69\x63\x6F\x6E\x73\x22\x3E\x70\x6C\x61\x79\x5F\x61\x72\x72\x6F\x77\x3C\x2F\x69\x3E","\x65\x6E\x64\x65\x64","\x63\x75\x72\x72\x65\x6E\x74\x54\x69\x6D\x65","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x6F\x6E\x6C\x6F\x61\x64\x65\x64\x64\x61\x74\x61","\x6D\x61\x78","\x64\x75\x72\x61\x74\x69\x6F\x6E","\x3A","\x6F\x6E\x74\x69\x6D\x65\x75\x70\x64\x61\x74\x65","\x76\x61\x6C\x75\x65","\x74\x69\x6D\x65\x75\x70\x64\x61\x74\x65","\x2E\x66\x61\x76\x6F\x72\x69\x74\x65","\x61\x63\x74\x69\x76\x65","\x74\x6F\x67\x67\x6C\x65","\x63\x6C\x61\x73\x73\x4C\x69\x73\x74","\x2E\x72\x65\x70\x65\x61\x74","\x6C\x6F\x6F\x70","\x2E\x76\x6F\x6C\x75\x6D\x65","\x2E\x72\x61\x68\x56\x6F\x6C\x75\x6D\x65","\x2E\x72\x61\x68\x72\x61\x6E\x67\x65\x4D\x73","\x2E\x76\x6F\x6C\x75\x6D\x65\x2D\x64\x6F\x77\x6E","\x2E\x72\x61\x68\x76\x6C\x6D\x55\x70\x4D\x73","\x76\x6F\x6C\x75\x6D\x65","\x63\x6C\x69\x63\x6B"];var music=document[_0x3a1a[1]](_0x3a1a[0]),playBtn=document[_0x3a1a[1]](_0x3a1a[2]),seekbar=document[_0x3a1a[1]](_0x3a1a[3]),currentTime=document[_0x3a1a[1]](_0x3a1a[4]),duration=document[_0x3a1a[1]](_0x3a1a[5]);function rahplayMs(){music[_0x3a1a[6]]?(music[_0x3a1a[7]](),playBtn[_0x3a1a[8]]= _0x3a1a[9],playBtn[_0x3a1a[10]]= _0x3a1a[11]):(music[_0x3a1a[9]](),playBtn[_0x3a1a[8]]= _0x3a1a[7],playBtn[_0x3a1a[10]]= _0x3a1a[12]),music[_0x3a1a[15]](_0x3a1a[13],function(){playBtn[_0x3a1a[8]]= _0x3a1a[7],playBtn[_0x3a1a[10]]= _0x3a1a[12],music[_0x3a1a[14]]= 0})}music[_0x3a1a[16]]= function(){seekbar[_0x3a1a[17]]= music[_0x3a1a[18]];var _0x2a8dx7=parseInt(music[_0x3a1a[18]]% 60),_0x2a8dx8=parseInt(music[_0x3a1a[18]]/ 60% 60);duration[_0x3a1a[10]]= _0x2a8dx8+ _0x3a1a[19]+ _0x2a8dx7},music[_0x3a1a[20]]= function(){seekbar[_0x3a1a[21]]= music[_0x3a1a[14]]},rahseekBar= function(){music[_0x3a1a[14]]= seekbar[_0x3a1a[21]]},music[_0x3a1a[15]](_0x3a1a[22],function(){var _0x2a8dx7=parseInt(music[_0x3a1a[14]]% 60),_0x2a8dx8=parseInt(music[_0x3a1a[14]]/ 60% 60);currentTime[_0x3a1a[10]]= _0x2a8dx8+ _0x3a1a[19]+ _0x2a8dx7},!1);var favIcon=document[_0x3a1a[1]](_0x3a1a[23]);function rahfavorite(){favIcon[_0x3a1a[26]][_0x3a1a[25]](_0x3a1a[24])}var repIcon=document[_0x3a1a[1]](_0x3a1a[27]);function handleRepeat(){1== music[_0x3a1a[28]]?(music[_0x3a1a[28]]=!1,repIcon[_0x3a1a[26]][_0x3a1a[25]](_0x3a1a[24])):(music[_0x3a1a[28]]=!0,repIcon[_0x3a1a[26]][_0x3a1a[25]](_0x3a1a[24]))}var volIcon=document[_0x3a1a[1]](_0x3a1a[29]),volBox=document[_0x3a1a[1]](_0x3a1a[30]),volumeRange=document[_0x3a1a[1]](_0x3a1a[31]),volumeDown=document[_0x3a1a[1]](_0x3a1a[32]),volumeUp=document[_0x3a1a[1]](_0x3a1a[33]);function rahvolume(){volIcon[_0x3a1a[26]][_0x3a1a[25]](_0x3a1a[24]),volBox[_0x3a1a[26]][_0x3a1a[25]](_0x3a1a[24])}function rahvolumeDown(){volumeRange[_0x3a1a[21]]= Number(volumeRange[_0x3a1a[21]])- 20,music[_0x3a1a[34]]= volumeRange[_0x3a1a[21]]/ 100}function rahvolumeUp(){volumeRange[_0x3a1a[21]]= Number(volumeRange[_0x3a1a[21]])+ 20,music[_0x3a1a[34]]= volumeRange[_0x3a1a[21]]/ 100}volumeDown[_0x3a1a[15]](_0x3a1a[35],rahvolumeDown),volumeUp[_0x3a1a[15]](_0x3a1a[35],rahvolumeUp)/*]]>*/</script>

Info: Kode javascript di atas sudah di enkripsi, jika kamu ingin mengenkripsi kode javascript gunakan tools milik ICloudice.com, silahkan klik disini

Cara Penggunaan

Setelah meng-install kode CSS dan javascript yang admin berikan sebelumnya di dalam template kamu, selanjutnya untuk menampilkan pemutar musik di blogger, silahkan salin kode HTML di bawah ini sesuai kebutuhan kamu aja, misal di dalam postingan atau sebagainya

<div align="center">
<div class="rahPlyrMs">
<div class="rahcvrMs">
<img alt="alt_here" src="add_image_here" title="title_here">
</div>
<div class="rahinfoMs">
<div class="rahtitleMs">song_title_here</div>
<div class="rahsingerMs">creator_name_here</div>
</div>
<div class="rahVolume">
<span class="volume-down"><i class="material-icons">remove</i></span>
<input type="range" class="rahrangeMs" step="1" value="80" min="0" max="100"
oninput="music.volume = this.value/100">
<span class="rahvlmUpMs"><i class="material-icons">add</i></span>
</div>
<div class="rahbtnMs">
<i class="material-icons repeat" onclick="handleRepeat()">repeat</i>
<i class="material-icons favorite active" onclick="rahfavorite()">favorite</i>
<i class="material-icons volume" onclick="rahvolume()">volume_up</i>
</div>

<div class="rahbxMs">
<input type="range" step="1" class="seekbar" value="0" min="0" max="100" oninput="rahseekBar()">

<audio class="music-element">
<source src="song_src_here">
</audio>
<span class="current-time">0:0</span><span class="duration">0:0</span>
<span class="play" onclick="rahplayMs()">
<i class="material-icons">play_arrow</i>
</span>
</div>
</div>
</div>
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>

Info: Silahkan ubah link gambar, link musik, judul, dan sebagainya di dalam kode HTML di atas Ok



Sing Me To Sleep
Sing Me To Sleep
Alan Walker
remove add
repeat favorite volume_up
0:00:0 play_arrow


Keindahanmu akan kuabadikan disetiap karyaku.

Posting Komentar

Pergunakanlah kecerdasan anda saat berkomentar, dan tinggalkan komentar sesuai topik tulisan. Komentar dengan link aktif tidak akan ditampilkan.
Masukkan URL Gambar atau URL Video YouTube atau Potongan Kode , atau Quote , lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image video quote pre code
© ‧ ICloudice.com . All rights reserved. Distributed by ICloudice.com
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.