coba dengarkan contoh murottal Alquran berikut ini :
saya akan memberi kode HTML dan CSS untuk menyederhanakan tampilannya, sehingga fokus pada <div class="murottal-player"> <h3 class="player-title">Judul Murottal Anda</h3>
<audio id="murottal-audio" controls preload="none">
<source src="URL-FILE-AUDIO-MUROTTAL.mp3" type="audio/mpeg">
Browser Anda tidak mendukung elemen audio.
</audio>
<div class="player-actions">
<a href="URL-FILE-AUDIO-MUROTTAL.mp3" download="Nama-File-Murottal.mp3" class="download-link">
Download
</a>
</div>
</div>
<style>
/* Gaya Container */
.murottal-player {
background-color: #f9f9f9;
border: 1px solid #eee;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
text-align: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Gaya Judul Murottal */
.player-title {
font-size: 1.2em;
margin-bottom: 15px;
color: #333;
}
/* Gaya Elemen Audio Player */
audio {
width: 100%;
margin-bottom: 15px;
}
/* Gaya Tombol Download */
.download-link {
display: inline-block;
padding: 10px 15px;
background-color: #3498db;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.download-link:hover {
background-color: #217dbb;
}
/* Responsif */
@media (max-width: 600px) {
.player-title{
font-size: 1em;
}
}
</style>
Penghapusan Gambar: Saya menghilangkan tag <img> dan elemen pembungkusnya (<div class="player-header">) untuk menghilangkan tampilan gambar cover .
Penyederhanaan CSS: Saya menghilangkan style yang terkait dengan gambarcover (seperti .cover-image dan .player-header) sehingga kode CSS menjadi lebih sederhana dan efisien.
Penyesuaian Style: *Saya melakukan penyesuaian style .player-title agar sesuai tanpa adanya gambar dan merapikan tampilannya agar lebih ringkas.
<div> class="murottal-player": Membungkus seluruh kontenplayer .background-color: Latar belakang abu-abu muda. border: Garis tepi tipis. border-radius: Sudut melengkung. padding: Jarak di dalam kotak. margin: Jarak dari atas dan bawah. text-align: Text rata tengah box-shadow : Efek bayangan agar terlihat lebih menonjol.
<h3> class="player-title": Judul murottal dengan style.Tulis judul murottal Anda di dalam tag ini.
<audio id="murottal-audio" controls>: Elemenaudio player HTML5.id: Untuk identifikasi di CSS dan JavaScript (jika dibutuhkan). controls: Menampilkan kontrol player (play, pause, volume).preload="none": Mengatur audio agar tidak memuat otomatis. <source src="...">: Ganti dengan URL file audio murottal Anda. type="audio/mpeg": Tipe file audio (mp3). Teks di dalam <audio> akan ditampilkan jika browser tidak mendukung elemen audio.
<div class="player-actions">: Membungkus tombol/link download.<a href="..." download="...">: Elemenlink untuk mengunduh file audio.href: Ganti dengan URL file audio murottal Anda. download: Mengatur nama file yang akan diunduh. Tulis nama file yang akan diunduh (Nama-File-Murottal.mp3) di sini. class="download-link" : Memberikan style pada tombol download.
CSS: Mengatur tampilan elemen-elemenplayer .background-color : Mengatur warna background margin : Mengatur jarak antar element padding : Mengatur jarak dalam element border : Mengatur garis tepi text-align : Mengatur posisi text rata tengah transition : Mengatur efek transisi pada tombol download ketika dihover @media : Mengatur style css agar responsif pada berbagai ukuran layar.
Salin Kode: Salin seluruh kode HTML dan CSS di atas.Buka Blogger/Platform Blog Anda: Masuk ke editor HTML di blog Anda.Tempel Kode: Tempelkan kode HTML yang sudah Anda salin ke tempat yang Anda inginkan (misalnya di dalamsidebar , di dalam postingan, atau di tempat lain).Ganti URL: Ganti URL-FILE-AUDIO-MUROTTAL.mp3 dengan URL file audio murottal Anda yang berformat MP3. Ganti Nama-File-Murottal.mp3 dengan nama file yang Anda inginkan untuk diunduh. Ganti Judul Murottal Anda dengan judul murottal yang sesuai.
Pratinjau dan Publikasikan: Lihat pratinjau untuk memastikan tampilanplayer sudah sesuai di blog Anda, lalu publikasikan atau simpan perubahan.
File Audio MP3: Pastikan file audio murottal Anda berformat MP3.URL Audio: Pastikan URL file audio murottal Anda adalah URL publik (bisa diakses oleh siapa saja) dan tidak terbatas.Responsif: Kode CSS telah disesuaikan agar responsif dengan berbagai ukuran layar, sehingga tetap nyaman digunakan di mobile.Preload: Atribut preload="none" digunakan agar audio player tidak memuat audio secara otomatis saat halaman dimuat, sehingga menghemat bandwith.

Komentar