RADARUTARA.ID -Tombol (button) merupakan salah satu elemen penting dalam sebuah blog karena berfungsi sebagai penghubung menuju halaman, artikel, atau tautan tertentu. Dengan desain tombol yang menarik dan responsif, pengunjung akan lebih mudah melakukan navigasi maupun menjalankan tindakan yang Anda inginkan, seperti membaca artikel lain, mengunduh file, atau mengunjungi halaman tertentu.
Selain mempercantik tampilan blog, penggunaan tombol yang responsive juga memberikan pengalaman pengguna (User Experience) yang lebih baik. Tombol akan tetap tampil rapi dan mudah diklik di berbagai ukuran layar, baik pada perangkat desktop, tablet, maupun smartphone. Hal ini menjadi nilai tambah bagi blog yang ingin terlihat profesional sekaligus ramah pengguna.
Pada tutorial ini, Anda akan mempelajari cara membuat tombol responsive di Blogger menggunakan HTML dan CSS tanpa memerlukan plugin tambahan. Tombol yang dihasilkan memiliki desain modern, ringan, mudah dikustomisasi, serta kompatibel dengan hampir semua template Blogger sehingga dapat diterapkan sesuai kebutuhan blog Anda.
1. Simpan CSS Ini Diatas </style>
#wrap {margin:20px auto;text-align:center;}
a.btn {display:inline-block;position:relative;font-family:'Open Sans',sans-serif;text-decoration:none;font-weight:700;background:#30abd5;letter-spacing:.5px;padding:10px 20px;margin:10px;color:#fff;box-shadow:inset 0 0 0 #22313F;font-size:16px;text-transform:uppercase;border-radius:3px;transition:all 0.3s ease-out;}
a.btn:hover {background:#30abd5;color:#fff;box-shadow:inset 0px -50px 0px #22313F;}
a.btn:active {color:#05555e;box-shadow:inset 0px -50px 0px #f5f7fa;}
a.btn.warn {background:#f5f7fa;color:#05555e;box-shadow:inset 0 0 0 #30abd5;}
a.btn.warn:hover {background:#f5f7fa;color:#fff;box-shadow:inset 0px -50px 0px #30abd5;}
a.btn.warn:active {color:#fff;box-shadow:inset 0px -50px 0px #30abd5;} 0px -50px 0px #30abd5;}
2. Lalu gunakan markup dibawah ini pada post editor tab HTML
<div id="wrap"><a class="btn" href="#">Button</a></div>
<div id="wrap"><a class="btn warn" href="#">Button</a></div>
3. Simpan.
Dengan menerapkan tombol responsive di Blogger, Anda dapat meningkatkan tampilan sekaligus fungsionalitas blog secara lebih optimal. Tombol yang modern, ringan, dan mudah digunakan akan mempermudah pengunjung dalam melakukan navigasi, sehingga pengalaman mereka saat menjelajahi blog menjadi lebih nyaman dan profesional.
Demikian tutorial mengenai cara membuat tombol responsive di Blogger yang modern dan menarik. Semoga panduan ini dapat membantu Anda membuat tombol yang sesuai dengan kebutuhan blog, baik untuk navigasi, tautan unduhan, maupun tombol ajakan bertindak (Call to Action). Jika Anda memiliki pertanyaan atau mengalami kendala saat mengikuti tutorial ini, silakan tuliskan di kolom komentar. Jangan lupa untuk mengikuti tutorial Blogger lainnya agar blog Anda semakin menarik, cepat, dan optimal di mesin pencari.
