🎧 Widget Playlist SoundCloud Dinamis + Preview Interaktif
Ingin menyematkan playlist SoundCloud ke blog dengan tampilan keren dan bisa dinamis ganti artis? Berikut adalah tutorial lengkap membuat SoundCloud Widget Dinamis dengan HTML, lengkap dengan pencarian artis via Google dan preview player langsung di halaman!
✨ Fitur Unggulan:
- 🎨 Desain colorful dan modern
- 🔁 Playlist bisa diganti tanpa edit kode
- 📱 Mobile responsive
- 🚀 Autoplay playlist otomatis
💻 Demo Langsung:
📄 Cara Memasang di Blogger:
- Masuk ke Blogger > Tata Letak
- Tambahkan Gadget HTML/java script
- Tempelkan seluruh kode ini
- Simpan dan lihat hasilnya 🎉
💻 Kode Script untuk Ditempel di Blogger:
<!-- Start of Colorful SoundCloud Widget Box -->
<div style="font-family: Arial, sans-serif; background: #fffbe6; border: 2px solid #ffd700; border-radius: 16px; padding: 20px; margin: 20px 0; animation: floatBox 3s ease-in-out infinite alternate;">
<h3 style="text-align:center;">🎵 Playlist Dinamis SoundCloud</h3>
<!-- Embed Area -->
<div id="embed-result" style="margin-top: 10px;">
<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay"
src="https://w.soundcloud.com/player/?url=https%3A//soundcloud.com/muhammadzakirsaputra/sets/noah-full-album&auto_play=true&visual=true">
</iframe>
</div>
<!-- Search Form -->
<div style="margin-top: 20px;">
<label for="artistInput">🔍 Cari playlist artis:</label>
<input type="text" id="artistInput" placeholder="Contoh: tulus, armada, d'masiv" />
<button onclick="searchArtist()">Cari & Putar</button>
</div>
</div>
<style>
@keyframes floatBox {
from { transform: translateY(0); }
to { transform: translateY(-10px); }
}
</style>
<script>
function searchArtist() {
const artist = document.getElementById("artistInput").value.trim();
if (!artist) return;
const query = encodeURIComponent(artist + " playlist site:soundcloud.com");
const searchUrl = `https://www.google.com/search?q=${query}`;
window.open(searchUrl, "_blank");
alert("🔍 Hasil pencarian dibuka di tab baru.\nSilakan copy link playlist yang kamu pilih dan paste ke widget ini nanti.");
}
</script>
<!-- End of SoundCloud Widget -->🔍 LSI Keywords (SEO):
soundcloud widget html, embed soundcloud player, dynamic soundcloud playlist, html audio player, music widget blogger, responsive music embed, soundcloud iframe autoplay, html5 soundcloud player
🛠️ Tips Tambahan:
Untuk mengganti playlist, cukup search artis menggunakan form di atas, lalu salin URL playlist dari SoundCloud dan tempel ke dalam kode iframe. Atau minta kami bantu buat versi otomatis!
Tags
Coder