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
Cara Memasang Pemutar Audio MP3 HTML Di Blogger
Langkah-Langkah
1. Tambahkan Audio Player Di Blogger [ Type 1 ]
<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>
- 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 ]
<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>
Leave a Reply