Inilah cara menampilkan murottal Alquran di blog yang benar

coba dengarkan contoh murottal Alquran berikut ini :

saya akan memberi kode HTML dan CSS  untuk menyederhanakan tampilannya, sehingga fokus pada audio player, judul, dan tautan download.

Kode HTML dan CSS :

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

Use code with caution. Html

Surah No.	Surah Name		Download MP3
1	Al-Fatihah		Download
2	Al-Baqarah		Download
3	Al-Imran		Download

Perubahan yang Dilakukan:

1. Penghapusan Gambar:

   • Saya menghilangkan tag <img> dan elemen pembungkusnya (<div class="player-header">) untuk menghilangkan tampilan gambar cover.

2. Penyederhanaan CSS:

   • Saya menghilangkan style yang terkait dengan gambar cover (seperti .cover-image dan .player-header) sehingga kode CSS menjadi lebih sederhana dan efisien.

3. Penyesuaian Style:
   *Saya melakukan penyesuaian style .player-title agar sesuai tanpa adanya gambar dan merapikan tampilannya agar lebih ringkas.

Penjelasan Kode:

• <div> class="murottal-player": Membungkus seluruh konten player.

  • 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>: Elemen audio 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="...">: Elemen link 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-elemen player.

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

Cara Penggunaan:

1. Salin Kode: Salin seluruh kode HTML dan CSS di atas.

2. Buka Blogger/Platform Blog Anda: Masuk ke editor HTML di blog Anda.

3. Tempel Kode: Tempelkan kode HTML yang sudah Anda salin ke tempat yang Anda inginkan (misalnya di dalam sidebar, di dalam postingan, atau di tempat lain).

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

5. Pratinjau dan Publikasikan: Lihat pratinjau untuk memastikan tampilan player sudah sesuai di blog Anda, lalu publikasikan atau simpan perubahan.

Penting:

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

Dengan kode ini, Anda bisa memasang audio murottal di blog Anda tanpa gambar, dengan tampilan yang sederhana dan profesional. Semoga kode ini bermanfaat! Jika ada pertanyaan lebih lanjut, jangan ragu untuk bertanya.