Cara Memasang Pemutar Audio MP3 HTML Di Blogger

Cara Memasang Pemutar Audio MP3 HTML Di Blogger – Menambahkan audio player blogger dengan custom html di blogspot atau blogger dengan mudah, Pada kesempatan kali saya akan menuliskan dan memberikan untuk sobat tutorialnya beserta langkah-langkah maupun gambar dan juga keterangannya, hal ini bertujuan supaya para sobat setia pengunjung blog ini bisa mempelajari dan memahami agar lebih mudah dimengerti dan dapat menerapkan disitus atau blog sobat tanpa mengalami kendala apapun.

Cara Memasang Pemutar Audio MP3 HTML Di Blogger

Membuat atau memasang audio player di blogger atau blogspot dengan memakai custom html di blog atau situs ataupun bisa dipakai untuk postingan blogger, sebenarnya cukup mudah untuk dilakukan, akan tetapi karena masih banyak sobat belum mengetahui, jadi diartikel kali ini saya akan menjelaskan untuk para sobat dibagian berikutnya, untuk itu silahkan disimak lalu dibaca sampai habis yah sobat.

Menambahkan Custom HTML Audio Player Di Blogspot

Bagaimana cara menambahkan custom html audio player atau alat pemutar audio mp3 di blogspot (blogspot), yang dimana ketika diputarkan mp3 baik dipasang pada blog atau situs, maupun postingan blog, akan bisa sobat dengarkan audio dari mp3 sobat pakai.
Nah, pemakaian custom html audio player diblogspot atau blog sangat mudah digunakan, baik ketika pengguna sedang membaca tulisan sobat diartikel yang sobat posting diblog, dengan menambahkan audio player untuk pemutar musik mp3, maka pengunjung akan senang dan menambah kesan, hal ini akan memberitahu pengunjung atau orang lain, bahwa di blog sobat ada pemutar musik mp3 sungguh keren dan unik.

Cara Memasang Pemutar Audio MP3 HTML Di Blogger

Jadi, kalau sobat tertarik ingin pasang pemutar audio dengan custom html di blogger atau blogspot,maka silahkan diikuti pada tutorial dengan langkah-langkah disetiap point-point penerapannya,sebagai berikut.

Langkah-Langkah

Untuk menambahkan pemutar audio di blogger atau blogpsot :

1. Tambahkan Audio Player Di Blogger [ Type 1 ]

Tambahkan Audio Player Di Blogger
Jika sobat menambahkan audio player diblogger, sebaiknya sobat menyiapkan gambar,audio yang telah sebelumnya dihosting.
Saya menyarankan kepada para sobat semuanya untuk mengggunakan google drive, contohnya sobat siapkan audio mp3 lalu masukkan ke akun google drive milik sobat tersebut dan selanjutnya ambil link google drive berisi audio mp3 dan ubah drive link menggunakan laman tautan berikut : https://sites.google.com/site/gdocs2direct/ tersebut.

Pergunakan kode script dipostingan blog dengan Tampilan HTML, lalu salin kode dibawah ini untuk HTML dan CSS.
<div class=”HTML_Audio_player”>
        <div class=”Audio_Player_image”><img style=”border-radius: 60px;” src=”Link Gambar Disini” /></div>
      <div class=”player-content”>
         <div class=”player-info”>
            <a class=”song-name” target=”_blank” href=”#”>Judul Disini</a>
            <a class=”artist” href=”#”>Nama Disini</a>
         </div>
         <div class=”k2_audio_player”>
            <audio controls style=”width: 80%;”>
  <source src=”#” type=”audio/mpeg”/>
</audio>
         </div>
      </div>
   </div>
   <style>
       .HTML_Audio_player { z-index:10; 
         background: linear-gradient(135deg,#f4f8ff 0,#f4f8ff 49%,#e5efff 49%,#e9e8f2 100%); 
         color: inherit; 
         min-height:120px; max-height:150px; 
         display:flex;
         box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; 
         flex-direction:row;padding: 20px 10px 20px;} 
     
     .Audio_Player_image { width:150px; display: flex; justify-content: center; } 
     .player-content { 
       flex-grow:1; 
       display:flex; 
       flex-direction:column;}
     
     .player-info { 
       flex-grow:1; display:flex; 
       flex-direction:column; 
       justify-content:center; 
       padding-left:10px;} 
     
     .song-name { font-size:18px; font-weight:600; } .k2_audio_player { display:flex;} 
     
     audio { flex-grow:1; height:40px; } 
     
     audio::-webkit-media-controls-play-button {
     background-color: #B1D4E0;
     border-radius: 50%;}
     audio::-webkit-media-controls-play-button:hover {
     background-color: rgba(177,212,224, .7);}
     
     audio::-webkit-media-controls-panel {
     background: #e9e8f2;}
     
     .Audio_Player_image img:hover{animation:rotating 3s linear infinite} @keyframes rotating{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
     </style>
Catatan
  • Gambar Disini : Pergunakan link tautan yang mengarah ke hosting gambar sobat simpan.
  • Judul Disini : Isi judul sesuai keinginan sobat.
  • Nama Disini : isi nama sesuai yang sobat ingin pakai.
  • Tanda [ # ] : isi sesuai yang diminta sesuai dengan kode script diatas.

2. Tambahkan Audio Player Di Blogger [ Type 2 ]

Kode script
<div class=”HTML_Audio_player”>
        <div class=”Audio_Player_image”>
          
         <img src=”Source Gambar Disini” /></div>
  <div class=”k2_audio_info”>
    <a class=”song-name” target=”_blank” href=”#”>Judul disini</a>
    <p style=”text-align: center; padding:0px 10px 0px;”> Deskripsi disini </p>
  </div>  
         <div class=”k2_audio_player”>
            <audio controls>
  <source src=”#” type=”audio/mpeg”/>
</audio>
         </div>
      </div>
<style>   
  
  .HTML_Audio_player{
  Position: relative;
    width:350px;
    background: #faf3f4;
    box-shadow: 0 50px 80px rgba(0,0,0,0.25); 
  }
  
  .HTML_Audio_player .Audio_Player_image{
   position: relative;
    width:100%;
    height: 350px;
    
  }
  
  .HTML_Audio_player .Audio_Player_image img{
   position: absolute;
    top:0;
    bottom: 0;
    width: 100%;
    height:100%;
    object-fit: cover;
    
  }
  
  .HTML_Audio_player audio {
  width: 100%;
  outline: none;
  }
     
     .song-name { font-size:18px;
       font-weight:600;
       display: flex;
        justify-content: center;
        margin-top: 10px;
  }
  audio::-webkit-media-controls-play-button {
     background-color: #B1D4E0;
     border-radius: 50%;}
</style>

3. Tambahkan Audio Player Di Blogger [ Type 3 ]

Kode Script

<div class=”audio_Player_grid”>
<div class=”HTML_Audio_player”>
        <div class=”Audio_Player_image”>
          
         <img src=”Source Gambar Disini” /></div>
  <div class=”k2_audio_info”>
    <a class=”song-name” target=”_blank” href=”#”>Nama Judul Disini</a>
  </div>  
         <div class=”k2_audio_player”>
            <audio controls>
  <source src=”#” type=”audio/mpeg”/>
</audio>
         </div>
      </div>
  
<div class=”HTML_Audio_player”>
        <div class=”Audio_Player_image”>
          
         <img src=”Source Gambar Disini” /></div>
  <div class=”k2_audio_info”>
    <a class=”song-name” target=”_blank” href=”#”>Nama Judul Disini</a>
  </div>  
         <div class=”k2_audio_player”>
            <audio controls>
  <source src=”#” type=”audio/mpeg”/>
</audio>
         </div>
      </div>
<div class=”HTML_Audio_player”>
        <div class=”Audio_Player_image”>
          
         <img src=”Source Gambar Disini” /></div>
  <div class=”k2_audio_info”>
    <a class=”song-name” target=”_blank” href=”#”>Nama Judul Disini</a>
  </div>  
         <div class=”k2_audio_player”>
            <audio controls>
  <source src=”#” type=”audio/mpeg”/>
</audio>
         </div>
      </div>
  
  
  <div class=”HTML_Audio_player”>
        <div class=”Audio_Player_image”>
          
         <img src=”Source Gambar Disini” /></div>
  <div class=”k2_audio_info”>
    <a class=”song-name” target=”_blank” href=”#”>Nama Judul Disini</a>
  </div>  
         <div class=”k2_audio_player”>
            <audio controls>
  <source src=”#” type=”audio/mpeg”/>
</audio>
         </div>
      </div>
  
</div>
<style> 
  .audio_Player_grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
  
  .HTML_Audio_player{
  Position: relative;
    width:350px;
    background: #faf3f4;
    box-shadow: 0 50px 80px rgba(0,0,0,0.25);
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .HTML_Audio_player .Audio_Player_image{
   position: relative;
    width:100%;
    height: 350px;
    
  }
  
  .HTML_Audio_player .Audio_Player_image img{
   position: absolute;
    top:0;
    bottom: 0;
    width: 100%;
    height:100%;
    object-fit: cover;
    
  }
  
  .HTML_Audio_player audio {
  width: 100%;
  outline: none;
  }
     
     .song-name { font-size:18px;
       font-weight:600;
       display: flex;
        justify-content: center;
        margin-top: 10px;
  }
  audio::-webkit-media-controls-play-button {
     background-color: #B1D4E0;
     border-radius: 50%;}
</style>
Nah, sebelum sobat mempublikasikan artikel di postingan blog atau situs, maka sobat perhatikan pratinjau terlebih dahulu, agar dapat nantinya sobat menganalisa lalu mengetahui apa yang error maupun belum bekerja sempurna kode scipt diatas untuk diperbaiki, namun jika sudah merasa berhasil, maka sobat tinggal publikasikan artikel di postingan blog sobat tersebut.
Oh iya sobat, begitulah kira-kira untuk pembahasan saya diartikel kali ini yaitu Cara Memasang Pemutar Audio MP3 HTML Di Blogger, yang dapat sobat pelajari dan pahami lalu selanjutnya bisa dengan mudah diterapkan dari setiap tutorial dengan langkah-langkah yang sudah saya jelaskan ditulisan saya pada artikel di blog sederhana milik saya ini, semoga bisa bermanfaat dan menambah wawasan, sekian dan terimakasih.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *