Cara Membuat Button (Tombol) Link di html pada Postingan Blog
Sebagai seorang blogger, kita tentu ingin terus berinovasi agar tampilan postingan terlihat menarik dan interaktif bagi pembaca. Salah satu elemen visual yang krusial namun sering diabaikan adalah tombol tautan atau button link.
Tombol HTML tidak hanya berfungsi mempercantik estetika layout, melainkan juga memperjelas Call to Action (CTA)—seperti tombol unduh berkas, tautan referensi ilmiah, atau halaman kemitraan. Keberadaan tombol yang tertata rapi akan sangat membantu penataan navigasi halaman serta menekan angka pentalan (bounce rate) pengunjung.
Nah, pada tulisan kali ini saya akan memberikan tutorial sederhana tentang cara membuat button link di HTML pada postingan blog. Selain itu, bagi Anda yang sedang merapikan visual blog, silakan baca juga artikel mengenai cara membuat gambar sejajar di Blogspot melalui kode HTML.
1. Struktur Dasar Button HTML Murni (Universal)
Secara standar struktur web W3C, susunan tombol link yang benar wajib menempatkan tag tautan <a> di bagian luar, baru kemudian membungkus tag <button> di dalamnya. Struktur ini memastikan tombol dapat diklik dengan sempurna di seluruh perangkat gawai.
A. Tombol Tautan Standar (Membuka di Halaman yang Sama)
<a href="https://www.qowim.net"><button>Kunjungi Situs</button></a>B. Tombol Tautan Buka Tab Baru (Sangat Direkomendasikan)
Jika Anda mengarahkan pembaca ke website luar atau layanan penyimpanan eksternal seperti Google Drive, pastikan menambahkan atribut target="_blank" dan rel="noopener noreferrer" agar pembaca tidak kehilangan halaman blog Anda.
<a href="https://drive.google.com" target="_blank" rel="noopener noreferrer"><button>Download Berkas</button></a>2. Cara Membuat Tombol Khusus Pengguna Template Wuzz (Sugeng.id)
Bagi Anda pengguna template Wuzz Theme v1.9.0 seperti blog qowim.net ini, Anda tidak perlu lagi menambahkan kode CSS manual. Template ini sudah menyediakan kelas CSS bawaan (native class) yang sangat ringan, responsif, serta otomatis mendukung fitur Dark Mode.
A. Membuat Tombol Utama (Button Primary)
Tombol ini akan mengambil warna dasar utama dari skema warna blog Anda secara otomatis.
<a class="btn-primary" href="https://www.qowim.net" target="_blank" rel="noopener"><button>Tombol Utama Wuzz</button></a>B. Membuat Tombol Garis Tepi (Button Secondary)
Tombol dengan desain latar transparan dan garis tepi yang sangat serasi untuk tombol navigasi alternatif.
<a class="btn-secondary" href="https://www.qowim.net" target="_blank" rel="noopener"><button>Tombol Kedua Wuzz</button></a>C. Tombol Otomatis Berikon Download, WhatsApp, & Tab Baru
Untuk menambahkan ikon otomatis tanpa memasukkan gambar tambahan, Anda cukup menambahkan kelas kombinasi khas Wuzz Theme:
Tombol Download Berikon:
<a class="btn-download btn-primary" href="https://drive.google.com" target="_blank" rel="noopener"><button>Download Berkas</button></a>Tombol WhatsApp Berikon:
<a class="btn-whatsapp btn-primary" href="https://api.whatsapp.com/send?phone=628562885074" target="_blank" rel="noopener"><button>Hubungi WhatsApp</button></a>Tombol Demo Tab Baru Berikon:
<a class="btn-new-tab btn-primary" href="https://www.qowim.net" target="_blank" rel="noopener"><button>Lihat Demo</button></a>3. Tambahan Kode CSS untuk Template Blogger Lain (Non-Wuzz)
Bagaimana jika template blog Anda belum memiliki kelas tombol di atas? Jangan khawatir. Anda bisa menyalin kode CSS sederhana di bawah ini dan menempelkannya di menu Edit HTML blog Anda (tepat di atas kode </b:skin>) sebagaimana panduan saya di artikel cara mengganti template Blogger.
.btn-primary, .btn-secondary {
display: inline-block;
margin: 10px 0;
}
.btn-primary button, .btn-secondary button {
padding: 12px 20px;
font-size: 15px;
font-weight: 600;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease-in-out;
border: none;
}
.btn-primary button {
background-color: #3949ab;
color: #ffffff;
}
.btn-primary button:hover {
opacity: 0.9;
}
.btn-secondary button {
background-color: transparent;
border: 2px solid #3949ab;
color: #3949ab;
}Kode Panggil HTML
Jika anda ingin menggunakan tombol-tombol di atas, silakan gunakan kode
<!-- Tombol Download -->
<a class="btn-primary btn-download" href="https://drive.google.com" target="_blank" rel="noopener noreferrer">
<button type="button">Download Berkas</button>
</a>
<!-- Tombol WhatsApp -->
<a class="btn-primary btn-whatsapp" href="https://api.whatsapp.com/send?phone=628562885074" target="_blank" rel="noopener noreferrer">
<button type="button">Hubungi WhatsApp</button>
</a>
<!-- Tombol Buka Tab Baru / Demo -->
<a class="btn-primary btn-new-tab" href="https://www.qowim.net" target="_blank" rel="noopener noreferrer">
<button type="button">Lihat Demo</button>
</a>Mengapa Harus Menghindari Kode Warna Inline?
Ketika kita memaksa warna tombol menggunakan kode gaya langsung seperti style="background-color: #7ae6c9; color: white;", tombol tersebut akan terkunci secara kaku. Masalah besar akan muncul saat pembaca blog mengaktifkan sistem mode malam (Dark Mode). Latar belakang artikel meredup menjadi gelap, namun tombol Anda akan tetap menyala terang yang berpotensi merusak kenyamanan mata pembaca.
Dengan menggunakan fungsi kelas bawaan CSS, tombol Anda akan beradaptasi secara otomatis mengikuti preferensi mode tampilan gawai pembaca.
Penutup
Membuat elemen navigasi yang rapi dan fungsional di HTML bukan sekadar pemanis visual, melainkan taktik teknis SEO untuk kenyamanan pengguna. Pastikan juga Anda teratur mengecek kelancaran tautan blog agar terhindar dari broken link, seperti ulasan saya mengenai cara mengetahui broken link blog, serta rajin memanfaatkan 3 alat cek plagiasi tulisan gratis agar reputasi blog tetap terjaga di mata mesin pencari.
Apakah Anda masih mengalami kendala tampilan tombol melar atau berantakan saat dipasang? Tuliskan pertanyaan Anda di kolom komentar di bawah, mari kita diskusikan bersama. Semoga bermanfaat!
Setiap minggu, saya membagikan tips optimasi teknis Blogger, ulasan dunia akademik, dan catatan reflektif harian pesantren langsung ke email pembaca tanpa spam. Jika Anda tidak ingin ketinggalan panduan ramah SEO seperti ini, silakan masukkan email Anda pada kolom Langganan Newsletter (Google Reader Revenue Manager) di bagian atas halaman blog ini. Terima kasih!
