Cara Mengubah Link Nama Komentar Blogger Menjadi Dropdown URL
📌 Pada kesempatan kali ini, saya akan berbagi artikel tentang bagaimana cara membuat nama pengunjung di kolom komentar blog, ketika d klik tidak menjadi link aktif hanya dengan menambah kode JS dan CSS saja jadi saya rasa aman tidak menjadikan error di template karena hanya menggunakan JavaScript dan CSS sederhana tanpa mengubah sistem komentar Blogger secara keseluruhan.
Seperti sebelumnya pada Artikel Cara membuat daftar isi terbaru di blog,, Artikel sekarang yang saya tulis saya berikan judul Cara Mengubah Link Nama Komentar di Blogger Menjadi popup Dropdown URL ,ini juga semua hasil dari oprek oprwk sendiri sampai tampilan blog ancur hehe....
Merubah link di komentar blog menjadi dropdown nanti hasilnya akan seperti contoh dalam gambar d bawah ini
🟡 Namun perlu di ketahui: secara default, Blogger memang menampilkan nama pengunjung pada kolom komentar dalam bentuk link yang jika diklik akan membuka halaman profil atau URL yang di masukan sebelum berkomentar, dan itupun kalau setelan komentar blog ny di aktifkan untuk semua orang termasuk anonim, namun tanpa di aktifkan pun pengunjung yang memberi komentar selalu otomatis menjadi link aktif (tautan ke prifil mereka).
Nah disini saya ingin berbagi tutorial untuk anda yang mau saja mengubah agar:
Nama komentar tidak langsung membuka lik
Tetapi ketika diklik, muncul popup atau dropdown kecil berisi URL/link dari pengunjung yg mmberi komentar tersebut.
⚠️ Catatan sebelum mulai
Trik ini tidak mengubah data komentar asli bawaan dari blogger ya..
Yang saya tahu script yang akan saya bagikan sekarang ini hanya mengubah tampilan dan perilaku di sisi browser saja, dan semoga saja Cocok untuk template Blogger anda.
Panduan Merubah Link Komentar
Ikuti panduan saya ini sampai selesai ya
Baca Bismillah sebelum mulai
Langkah 1: Masuk ke Dasboard blog anda dan pilih tema lalu edit HTML (Disarankan untuk membackup terlebih dahulu templatw awal hanya untuk menjaga error pada saat penerapan kode).
🧩 Langkah ke 2: Silakan 👉 Salin dan Tempel kode javascript (JS) dibawah ini (Disarankan) tempel tepat di sebelum tag </body>.
📌 Kode JS
<script>
(function () {
function applyFix() {
const links = document.querySelectorAll(".comments a, .comment-thread a");
links.forEach(el => {
if (el.dataset.fixed) return;
el.dataset.fixed = "true";
const url = el.href;
el.addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
document.querySelectorAll(".url-popup").forEach(x => x.remove());
const box = document.createElement("div");
box.className = "url-popup";
box.textContent = url;
el.style.position = "relative";
el.appendChild(box);
});
});
}
document.addEventListener("DOMContentLoaded", applyFix);
// komentar dimuat ulang / async
const obs = new MutationObserver(applyFix);
obs.observe(document.body, { childList: true, subtree: true });
document.addEventListener("click", function () {
document.querySelectorAll(".url-popup").forEach(x => x.remove());
});
})();
</script>
Safelink-aza
OPTIONAL: Anda juga bisa meng Escape/Parse kode script dengan Tool Parse HTML ini
🎨 Langkah 3: Salin dan tempel kode CSS Dropdown dibawah ini di bagian <style> atau bagian b:skin pada template anda:
📌 CSS Dropdown
.url-popup{
position:absolute;
top:28px;
left:0;
min-width:160px;
max-width:260px;
background:rgba(20,20,20,0.95);
color:#fff;
padding:8px 10px;
font-size:12px;
border-radius:10px;
z-index:999999;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
box-shadow:0 8px 20px rgba(0,0,0,0.35);
animation:popupFade .15s ease-out;
backdrop-filter: blur(6px);
}
/* panah kecil di atas */
.url-popup::before{
content:"";
position:absolute;
top:-6px;
left:12px;
width:10px;
height:10px;
background:rgba(20,20,20,0.95);
transform:rotate(45deg);
}
/* animasi */
@keyframes popupFade{
from{
opacity:0;
transform:translateY(-6px) scale(0.95);
}
to{
opacity:1;
transform:translateY(0) scale(1);
}
}
Safelink-aza
⚙️ Lajut ke Langkah 4(terakhir): Simpan perubahan pada template anda, dan sekarang lihat hasilnya apa sudah sesuai keinginan?.
Cara kerja Script
1. Mendeteksi semua link yang ada di area komentar Blogger. jadi tidak hanya nama komentar saja tapi semua link yang ada.
2. Menyimpan URL asli dari link tersebut, dan menampilkannya di area dropdown yg dibuat dengan CSS
3. Mencegah link terbuka saat diklik
4. Klikik dimanapun di luar dropdown untuk menutup popup
💡 Kesimpulan
Setelah diterapkan, perubahan yang terjadi:
✔ Nama komentar tidak lagi membuka halaman
✔ Klik nama → malah muncul popup hehe..
✔ Tampilan lebih mirip seperti tooltip
✔ Tidak mengganggu struktur Blogger
Mudahkan cara membuatnya? hehe.. untuk langkah selanjutnya jika anda mau Pengembangan (Level Lanjutan) mau upgrade fitur, anda bisa merubah lebar, tinggi, padding dan lain lain di kode CSS nya, atau maumenambahkan Tombol copy URL pada popuo dropdownnya itu tinggal di edit edit saja ya.
ungkin cukup dulu trik blogspot saya kali ini, mudah mudahan kita semua di beri umur panjang dan sehat selalu supaya kita bisa bertemu lagi di lain waktu, akhir kata saya ucapkan terimakasih, mohon maaf jika banyak penulisan kata dan gaya bahasa yang kurang di mengerti, untuk saran dan keritiknya, kita diskusikan divkolom komentar.😁
Pertanyaan Umum (FAQ)
Apa kelebihan fitur Mengubah link di komentar blog?
Fitur ini akan cocok untuk kamu yang ingin mempercantik tampilan komentar Blogger agar terlihat lebih interaktif dan modern tanpa perlu backend tambahan..
Apa yang di cari orang untuk trik mengubah link komentar ini?
Tutorial Membuat Dropdown URL pada Nama Komentar di Blogspot
Cara Menampilkan URL Pengunjung Saat Nama Komentar Diklik di Blogger
Nama Komentar di Blogger Jadi Link? Ubah Jadi Dropdown Begini
Biar Nama Komentar Tidak Langsung Buka Link di Blogspot
Klik Nama Komentar Tidak Buka Halaman, Tapi Muncul URL (Blogger Trick)
Custom Comment UI Blogger: Dropdown URL pada Nama Pengunjung
Modifikasi Komentar Blogger: Klik Nama → Muncul URL Popup
Blogger Comment Hack: Ubah Link Author Jadi Tooltip URL.
