Cara Membuat Popup Musik di Blogger yang Muncul Hanya pada Artikel Tertentu
.png){kind=small}
Table of Contents
 |
| Cara Membuat Popup Musik di Blogger yang Muncul Hanya pada Artikel Tertentu |
Menambahkan musik di blog bisa membuat pengunjung merasa lebih nyaman saat membaca artikel. Apalagi jika blog kamu memiliki niche tertentu seperti cerita, tutorial, kehamilan, atau motivasi. Nah, sekarang kamu bisa membuat popup musik di Blogger yang muncul hanya pada artikel tertentu sehingga tampil lebih rapi dan tidak mengganggu semua halaman blog.
Fitur ini cukup menarik karena pengunjung bisa memilih sendiri apakah ingin mendengarkan lagu atau tidak. Jadi musik tidak langsung diputar otomatis saat halaman dibuka. Selain terlihat lebih profesional, cara ini juga membuat pengalaman membaca menjadi lebih nyaman.
Kenapa Popup Musik di Blogger Menarik?
Banyak pemilik blog ingin menambahkan musik, tetapi takut membuat pengunjung terganggu. Dengan menggunakan popup pilihan musik, pengunjung memiliki kontrol penuh.
Keuntungan menggunakan popup musik antara lain:
- Tampilan blog terlihat lebih interaktif
- Pengunjung bisa memilih memutar lagu atau tidak
- Musik hanya muncul pada artikel tertentu
- Tidak mengganggu halaman lain di Blogger
- Cocok untuk blog cerita, kehamilan, lirik, galeri, atau tutorial
Selain itu, fitur ini juga bisa membuat pengunjung lebih lama berada di halaman artikel.
Cara Kerja Popup Musik di Blogger
Saat pengunjung membuka artikel tertentu, akan muncul notifikasi kecil berupa popup berisi pertanyaan seperti:
“Apakah kamu ingin mendengarkan musik sambil membaca artikel ini?”
Jika pengunjung memilih:
- Ya → musik akan diputar
- Tidak → popup langsung tertutup
Karena menggunakan JavaScript sederhana, fitur ini bisa dipasang langsung di blogger tanpa perlu plugin tambahan.
Cara Membuat Popup Musik di Blogger yang Muncul Hanya pada Artikel Tertentu
Berikut langkah sederhananya:
1. Masuk ke Blogger
Login ke akun Blogger kamu terlebih dahulu.
2. Buka Menu Tema
Masuk ke:
Tema
Klik Edit HTML
3. Tempelkan Script Popup Musik
Letakkan script sebelum kode:
</body>
<script>
/*<![CDATA[*/
// ===============================
// POPUP MUSIK BLOGGER
// ===============================
document.addEventListener("DOMContentLoaded", function () {
// ===============================
// ARTIKEL YANG AKAN MUNCUL POPUP
// ===============================
const targetArticles = [
"/2026/04/cara-membuat-popup-musik-di-blogger.html"
];
// ===============================
// LINK MUSIK MP3 DARI GITHUB
// ===============================
const musicUrl = "https://raw.githubusercontent.com/adityaosisrensma/blog/b2d31bb5194ef2ba81f6d48fb5e17fc2a67ac29c/The%20Red%20Jumpsuit%20Apparatus%20-%20Face%20Down.mp3";
// ===============================
// CEK URL ARTIKEL
// ===============================
const currentPath = window.location.pathname;
const shouldShowPopup = targetArticles.some(function(path){
return currentPath.includes(path);
});
// ===============================
// JIKA ARTIKEL SESUAI
// ===============================
if (shouldShowPopup) {
// ===============================
// CSS
// ===============================
const style = document.createElement("style");
style.innerHTML = `
#musicPopupOverlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.65);
backdrop-filter:blur(4px);
z-index:999999;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
visibility:hidden;
transition:.3s ease;
}
#musicPopupOverlay.show{
opacity:1;
visibility:visible;
}
#musicPopup{
width:90%;
max-width:360px;
background:#fff;
color:#222;
border-radius:22px;
padding:25px;
text-align:center;
box-shadow:0 10px 35px rgba(0,0,0,.25);
animation:popupAnim .4s ease;
font-family:Arial,sans-serif;
}
@keyframes popupAnim{
from{
transform:translateY(20px) scale(.95);
opacity:0;
}
to{
transform:translateY(0) scale(1);
opacity:1;
}
}
#musicPopup h3{
margin:0 0 10px;
font-size:22px;
}
#musicPopup p{
margin:0;
font-size:15px;
line-height:1.6;
opacity:.8;
}
.musicButtons{
display:flex;
gap:10px;
margin-top:22px;
}
.musicButtons button{
flex:1;
border:none;
padding:12px;
border-radius:12px;
cursor:pointer;
font-size:15px;
font-weight:600;
transition:.2s;
}
#playMusicBtn{
background:#4f46e5;
color:#fff;
}
#playMusicBtn:hover{
transform:scale(1.03);
}
#closeMusicPopup{
background:#eee;
color:#333;
}
@media (prefers-color-scheme: dark){
#musicPopup{
background:#1f1f1f;
color:#fff;
}
#closeMusicPopup{
background:#333;
color:#fff;
}
}
`;
document.head.appendChild(style);
// ===============================
// HTML POPUP
// ===============================
const popupHTML = `
<div id="musicPopupOverlay">
<div id="musicPopup">
<h3>🎵 Putar Musik?</h3>
<p>
Apakah kamu ingin mendengarkan musik sambil membaca artikel ini?
</p>
<div class="musicButtons">
<button id="playMusicBtn">
Ya, Putar
</button>
<button id="closeMusicPopup">
Tidak
</button>
</div>
</div>
</div>
<audio id="bloggerMusic" loop>
<source src="${musicUrl}" type="audio/mpeg">
</audio>
`;
document.body.insertAdjacentHTML("beforeend", popupHTML);
// ===============================
// ELEMENT
// ===============================
const popup = document.getElementById("musicPopupOverlay");
const playBtn = document.getElementById("playMusicBtn");
const closeBtn = document.getElementById("closeMusicPopup");
const music = document.getElementById("bloggerMusic");
// ===============================
// TAMPILKAN POPUP
// ===============================
setTimeout(function(){
popup.classList.add("show");
}, 600);
// ===============================
// PLAY MUSIC
// ===============================
playBtn.addEventListener("click", function(){
music.play();
popup.classList.remove("show");
setTimeout(function(){
popup.remove();
}, 300);
});
// ===============================
// TUTUP POPUP
// ===============================
closeBtn.addEventListener("click", function(){
popup.classList.remove("show");
setTimeout(function(){
popup.remove();
}, 300);
});
}
});
/*]]>*/
</script>
Lalu simpan tema Blogger kamu.
Bagian Penting yang Harus Diisi
Agar popup musik bisa berjalan dengan benar, ada beberapa bagian yang wajib kamu atur.
1. Mengatur Artikel yang Akan Muncul Popup
Bagian ini berfungsi menentukan artikel mana yang akan memunculkan popup musik.
Cari kode berikut:
const targetArticles = [
"/2026/04/cara-membuat-popup-musik-di-blogger.html"
];
Cara Mengisinya : Isi dengan URL artikel Blogger milikmu.
Jika Ingin Banyak Artikel kamu bisa menambahkan lebih dari satu artikel.
Contoh:
const targetArticles = [
"/2026/04/tips-kehamilan.html",
"/2026/04/cara-program-hamil.html",
"/2026/04/tips-ibu-hamil.html"
];Dengan begitu popup musik hanya muncul pada artikel tersebut saja.
2. Mengganti Link Musik MP3
Selanjutnya kamu harus mengisi link lagu MP3.
Cari bagian ini:
const musicUrl = "LINK-MUSIK";Lalu ganti dengan link MP3 milikmu.
Apakah Popup Musik Aman untuk Blogger?
Ya, selama menggunakan script ringan dan tidak berlebihan. Script popup musik sederhana biasanya tidak mempengaruhi SEO Blogger secara signifikan jika dipasang dengan benar.
Selain itu, fitur ini tidak membutuhkan library tambahan sehingga loading blog tetap ringan.
Menambahkan popup musik pada artikel tertentu di Blogger bisa menjadi cara sederhana untuk membuat blog terlihat lebih hidup dan interaktif. Pengunjung juga dapat memilih sendiri apakah ingin mendengarkan lagu atau tidak, sehingga pengalaman membaca terasa lebih nyaman.
Jika digunakan dengan tepat, fitur ini bisa membuat artikel terlihat lebih unik dibanding blog biasa. Jadi, kalau kamu ingin membuat tampilan Blogger lebih menarik, mencoba popup musik bisa menjadi pilihan yang patut dicoba.
Posting Komentar