Widget Al-Qur'an Online untuk Blogger Gratis, Ringan & Responsive 2026

May 14, 2026
Widget Al-Qur'an Online untuk Blogger Gratis, Ringan & Responsive 2026 Widget Alquran Blogger

Di era digital seperti sekarang, banyak pemilik website dan Blogger ingin menghadirkan konten islami yang bermanfaat bagi pengunjung. Salah satu fitur yang cukup populer adalah widget Al-Qur'an online yang dapat dipasang langsung di sidebar maupun halaman blog.

Selain mempercantik tampilan website, widget Al-Qur'an online juga membantu pengunjung membaca surat Al-Qur'an dengan lebih mudah kapan saja melalui smartphone maupun desktop.


Widget ini sangat cocok digunakan untuk:

  • Blog pribadi islami
  • Website berita muslim
  • Portal pendidikan agama
  • Blog komunitas
  • Website sekolah atau pesantren
  • Blog motivasi islami

Apa Itu Widget Al-Qur'an Online?

Widget Al-Qur'an online adalah script HTML yang dapat dipasang pada Blogger atau Blogspot untuk menampilkan daftar surat Al-Qur'an secara online.

Biasanya widget ini memiliki fitur:

  • Daftar surat Al-Qur'an
  • Pencarian surat
  • Link baca Al-Qur'an online
  • Tampilan responsive
  • Loading ringan
  • Mobile friendly

Dengan adanya widget ini, pengunjung bisa langsung membaca Al-Qur'an tanpa harus meninggalkan website Anda.

Keunggulan Widget Al-Qur'an untuk Blogger

1. Ringan dan Cepat Dimuat

Script dibuat menggunakan HTML, CSS, dan JavaScript sederhana sehingga tidak memberatkan loading website.

2. Responsive di Semua Device

Tampilan otomatis menyesuaikan ukuran layar smartphone, tablet, maupun desktop.

3. SEO Friendly

Widget aman dipasang di Blogger dan tidak mengganggu performa SEO website.

4. Tampilan Modern

Desain modern membuat tampilan blog lebih profesional dan menarik.

5. Mudah Dipasang

Cukup copy dan paste script ke gadget HTML/JavaScript Blogger.


Script Widget Al-Qur'an Online Blogger

<!-- =====================================
WIDGET AL-QURAN ONLINE BLOGGER
===================================== -->

<style>
#alquran-widget{
  max-width:400px;
  margin:auto;
  background:#ffffff;
  border-radius:18px;
  overflow:hidden;
  font-family:Arial,sans-serif;
  box-shadow:0 6px 20px rgba(0,0,0,.12);
}

/* HEADER */
#alquran-widget .header{
  background:linear-gradient(135deg,#16a34a,#15803d);
  color:#fff;
  text-align:center;
  padding:20px;
}

#alquran-widget .header h2{
  margin:0;
  font-size:24px;
}

#alquran-widget .header p{
  margin-top:8px;
  font-size:14px;
  opacity:.9;
}

/* BODY */
#alquran-widget .body{
  padding:20px;
}

/* SEARCH */
#searchSurah{
  width:100%;
  padding:12px;
  border:1px solid #d1d5db;
  border-radius:10px;
  font-size:14px;
  box-sizing:border-box;
  margin-bottom:15px;
}

/* LIST */
.surah-list{
  max-height:400px;
  overflow-y:auto;
}

.surah-item{
  padding:12px;
  border-bottom:1px solid #f3f4f6;
  transition:.3s;
}

.surah-item:hover{
  background:#f9fafb;
}

.surah-item a{
  text-decoration:none;
  color:#111827;
  display:block;
}

.surah-name{
  font-weight:bold;
  font-size:15px;
}

.surah-arti{
  font-size:13px;
  color:#6b7280;
  margin-top:4px;
}

/* FOOTER */
.footer{
  text-align:center;
  padding:15px;
  font-size:12px;
  color:#6b7280;
}
</style>

<div id="alquran-widget">

  <div class="header">
    <h2>📖 Al-Qur'an Online</h2>
    <p>Baca Al-Qur'an kapan saja secara online</p>
  </div>

  <div class="body">

    <input type="text"
    id="searchSurah"
    placeholder="Cari surat..."
    onkeyup="filterSurah()">

    <div class="surah-list" id="surahList">

      <div class="surah-item">
        <a href="https://quran.com/1" target="_blank">
          <div class="surah-name">Al-Fatihah</div>
          <div class="surah-arti">Pembukaan • 7 Ayat</div>
        </a>
      </div>

      <div class="surah-item">
        <a href="https://quran.com/2" target="_blank">
          <div class="surah-name">Al-Baqarah</div>
          <div class="surah-arti">Sapi Betina • 286 Ayat</div>
        </a>
      </div>

      <div class="surah-item">
        <a href="https://quran.com/36" target="_blank">
          <div class="surah-name">Yasin</div>
          <div class="surah-arti">Yasin • 83 Ayat</div>
        </a>
      </div>

      <div class="surah-item">
        <a href="https://quran.com/55" target="_blank">
          <div class="surah-name">Ar-Rahman</div>
          <div class="surah-arti">Maha Pengasih • 78 Ayat</div>
        </a>
      </div>

      <div class="surah-item">
        <a href="https://quran.com/67" target="_blank">
          <div class="surah-name">Al-Mulk</div>
          <div class="surah-arti">Kerajaan • 30 Ayat</div>
        </a>
      </div>

    </div>

  </div>

  <div class="footer">
    Widget Al-Qur'an Online Responsive
  </div>

</div>

<script>
function filterSurah(){
  let input =
    document.getElementById("searchSurah").value.toLowerCase();

  let items =
    document.getElementsByClassName("surah-item");

  for(let i=0;i<items.length;i++){

    let text =
      items[i].innerText.toLowerCase();

    if(text.indexOf(input) > -1){
      items[i].style.display = "";
    }else{
      items[i].style.display = "none";
    }
  }
}
</script>

📖 Al-Qur'an MP3

Murrotal Online Lengkap 114 Surah

Pilih surat untuk diputar
1. Al-Fatihah
Pembukaan • 7 Ayat
2. Al-Baqarah
Sapi Betina • 286 Ayat
18. Al-Kahfi
Penghuni Gua • 110 Ayat
36. Yasin
Yasin • 83 Ayat
55. Ar-Rahman
Maha Pengasih • 78 Ayat
67. Al-Mulk
Kerajaan • 30 Ayat
112. Al-Ikhlas
Ikhlas • 4 Ayat
113. Al-Falaq
Waktu Subuh • 5 Ayat
114. An-Nas
Manusia • 6 Ayat

Cara Memasang Widget Al-Qur'an di Blogger

Ikuti langkah berikut:

1. Login ke Blogger

Masuk ke dashboard Blogger menggunakan akun Google Anda.

2. Masuk ke Tata Letak

Pilih menu:
Tata Letak → Tambah Gadget

3. Pilih HTML/JavaScript

Tambahkan gadget baru lalu pilih:
HTML/JavaScript

4. Tempel Script Widget

Copy script widget Al-Qur'an lalu paste ke kolom HTML.

5. Simpan

Klik tombol Simpan dan lihat hasilnya di website.

Tips Agar Widget Lebih SEO Friendly

Agar blog lebih mudah terindex Google, lakukan beberapa optimasi berikut:

  • Gunakan template Blogger yang ringan
  • Kompres gambar ke format WebP
  • Gunakan internal link artikel islami
  • Tambahkan meta description
  • Submit sitemap ke Google Search Console
  • Gunakan heading H1, H2, dan H3 secara rapi

Manfaat Menambahkan Konten Islami di Website

Konten islami memiliki banyak manfaat bagi pengunjung maupun pemilik website, antara lain:

  • Memberikan nilai positif
  • Menambah waktu kunjungan pengguna
  • Meningkatkan interaksi website
  • Membantu pengunjung mendapatkan bacaan islami
  • Menambah kepercayaan pengunjung

Wikipedia Logo
Baca Referensi Wikipedia

Sumber informasi tambahan terpercaya dari Wikipedia Indonesia.

Selain itu, niche islami juga memiliki pencarian yang cukup tinggi di Google sehingga berpotensi mendatangkan trafik organik.

Kesimpulan

Widget Al-Qur'an online untuk Blogger menjadi salah satu fitur islami yang menarik untuk dipasang pada website. Selain ringan dan responsive, widget ini juga mudah digunakan dan SEO friendly.

Dengan tampilan modern dan fitur pencarian surat, pengunjung dapat membaca Al-Qur'an secara online dengan nyaman langsung dari blog Anda.

Jika menggunakan template yang ringan dan optimasi SEO yang tepat, widget ini juga dapat membantu meningkatkan kualitas website di mesin pencari Google.

ARTIKEL POPULER
📰
Tutorial Script Membuat Artikel Keren dan Enak Dilihat Pembaca

Pelajari cara membuat tampilan artikel Blogger modern, responsif, ringan diakses, nyaman dibaca, dan SEO friendly agar pengunjung betah di website.

Baca Selengkapnya →
Tags

Post a Comment

0 Comments