Pendahuluan
Efek visual seperti gelembung (bubble animation) masih menjadi salah satu elemen dekoratif yang banyak digunakan untuk mempercantik tampilan blog. Efek ini memberikan kesan modern, interaktif, dan ringan, sehingga cocok untuk berbagai niche seperti lifestyle, teknologi, hingga personal blog.
Namun, metode lama yang menggunakan script dari hosting pihak ketiga seperti Google Code sudah tidak lagi relevan di tahun 2026. Banyak layanan tersebut sudah tidak aktif, tidak aman, atau tidak kompatibel dengan browser modern. Karena itu, kita akan menggunakan pendekatan baru yang lebih stabil, ringan, dan aman.
Pembaruan Penting dari Metode Lama
Beberapa hal yang sudah tidak digunakan lagi:
- ❌ Script dari
googlecode.com(sudah tidak aktif) - ❌ Tag
<script />tanpa penutup yang valid - ❌ HTTP non-HTTPS (tidak aman di browser modern)
- ❌ File eksternal tanpa kontrol keamanan
Pendekatan terbaru:
- ✅ CSS Animation + JavaScript ringan
- ✅ Tanpa dependency eksternal
- ✅ Lebih cepat di mobile
- ✅ Aman untuk SEO & Core Web Vitals
- ✅ Kompatibel dengan Blogger terbaru 2026
Cara Membuat Efek Gelembung di Blog Blogger 2026
Efek 1: Gelembung Berjatuhan (Bubble Falling Effect)
Langkah-langkah
- Login ke akun Blogger Anda
- Masuk ke Tata Letak → Edit HTML
- Cari tag
<body>pada template - Tempelkan kode berikut tepat di bawah
<body>
<style>
.bubble {
position: fixed;
bottom: -50px;
width: 15px;
height: 15px;
background: rgba(135, 206, 250, 0.7);
border-radius: 50%;
animation: rise 6s linear infinite;
z-index: 9999;
}
@keyframes rise {
0% {
transform: translateY(0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateY(-110vh);
opacity: 0;
}
}
</style>
<script>
function createBubble() {
const bubble = document.createElement("div");
bubble.className = "bubble";
bubble.style.left = Math.random() * 100 + "vw";
bubble.style.width = (Math.random() * 10 + 5) + "px";
bubble.style.height = bubble.style.width;
bubble.style.animationDuration = (Math.random() * 4 + 4) + "s";
document.body.appendChild(bubble);
setTimeout(() => {
bubble.remove();
}, 8000);
}
setInterval(createBubble, 300);
</script>
Efek 2: Gelembung Terapung (Floating Bubble Effect)
Cara Pemasangan
- Masuk ke Tata Letak (Layout)
- Klik Tambah Gadget → HTML/JavaScript
- Masukkan kode berikut:
<style>
.float-bubble {
position: fixed;
bottom: -60px;
background: rgba(173, 216, 230, 0.6);
border-radius: 50%;
animation: floatUp linear infinite;
z-index: 9999;
}
@keyframes floatUp {
from {
transform: translateY(0);
opacity: 0;
}
to {
transform: translateY(-120vh);
opacity: 1;
}
}
</style>
<script>
function createFloatBubble() {
const bubble = document.createElement("div");
bubble.className = "float-bubble";
const size = Math.random() * 20 + 10;
bubble.style.width = size + "px";
bubble.style.height = size + "px";
bubble.style.left = Math.random() * 100 + "vw";
bubble.style.animationDuration = (Math.random() * 5 + 5) + "s";
document.body.appendChild(bubble);
setTimeout(() => {
bubble.remove();
}, 10000);
}
setInterval(createFloatBubble, 400);
</script>
Tips Optimasi (Penting untuk 2026)
Agar blog tetap ringan dan SEO-friendly:
- Gunakan maksimal 1–2 efek animasi saja
- Hindari penggunaan bersamaan dengan banyak script berat
- Pastikan template sudah responsive (mobile-first)
- Gunakan efek hanya di homepage atau landing page
- Perhatikan Core Web Vitals agar tidak menurunkan ranking Google
Kesimpulan
Efek gelembung di Blogger kini bisa dibuat dengan cara yang lebih modern tanpa bergantung pada script lama yang sudah tidak aktif. Dengan kombinasi CSS dan JavaScript ringan, blog Anda akan terlihat lebih menarik, interaktif, dan tetap optimal untuk SEO di tahun 2026.
Selamat mencoba dan semoga blog Anda semakin menarik perhatian pengunjung 💙