|
| Cara membuat text seperti tombol di post blogger |
Cara Membuat Teks Seperti Tombol di Postingan Blogger (100% Mudah)
Ingin membuat teks di blog kamu terlihat seperti tombol keren tanpa pakai gambar? Kamu bisa memanfaatkan kombinasi HTML dan CSS untuk membuat tampilan teks yang mirip tombol aksi (CTA). Tombol ini bisa digunakan untuk tautan download, baca selengkapnya, atau link eksternal.
Panduan ini cocok untuk kamu pengguna Blogger (Blogspot) yang ingin mempercantik tampilan postingan, Simak langkah-langkahnya berikut ini!
Cara Cepat Menggunakan tampilan Keyboard
Contoh:
- Salin teks: Ctrl + C
- Tempel teks: Ctrl + V
- Buka tab baru: Ctrl + T
- Tutup tab: Ctrl + W
- Task Manager: Ctrl + Shift + Esc
Contoh dan dan tambahan ccs cara penulisan :
<kbd>Ctrl</kbd> + <kbd>C</kbd>
<li>Tempel teks: <kbd>Ctrl</kbd> + <kbd>V</kbd>
Buka tab baru: <kbd>Ctrl</kbd> + <kbd>T</kbd>
Tutup tab: <kbd>Ctrl</kbd> + <kbd>W</kbd>
Task Manager: <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Esc</kbd>
<style>
kbd {
padding: 4px 6px;
font-size: 14px;
color: #333;
background: #f4f4f4;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0 -1px 0 #bbb;
font-family: monospace;
}
</style>e
untuk menganti warna bisa kamu ganti bagian ini: background: #f4f4f4;
Jika di template bawan kamu sudah ada ccs untuk kbd, kamu tidak perlu lagi menambahkan cid ccs nya lagi.
Cara dengan warna
🔧 1. Kode HTML Tombol Sederhana
Berikut adalah contoh tombol dasar menggunakan tag <a>:
<a href="https://example.com" class="tombol-blog">Download Sekarang</a>Untuk tampilannya, kita tambahkan CSS seperti ini:
<style>
.tombol-blog {
display: inline-block;
padding: 10px 20px;
background: #2196f3;
color: #fff;
text-decoration: none;
border-radius: 6px;
font-weight: bold;
transition: 0.3s ease;
}
.tombol-blog:hover {
background: #0b7dda;
}
</style>
📌 2. Contoh Penerapan Lengkap di Postingan
Silakan tempel kode berikut di mode HTML editor Blogger:
<style>
.tombol-blog {
display: inline-block;
padding: 12px 24px;
background-color: #4caf50;
color: white;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
font-weight: 600;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.tombol-blog:hover {
background-color: #388e3c;
transform: scale(1.05);
}
</style>
<a href="https://example.com" class="tombol-blog" target="_blank">
Kunjungi Situs
</a>
🎨 3. Variasi Warna Tombol (Siap Pakai)
Kamu bisa ubah warna tombol sesuai tema blog kamu:
- Merah:
background-color: #f44336; - Kuning:
background-color: #ff9800; - Ungu:
background-color: #9c27b0; - Hitam:
background-color: #333;
Contoh tombol warna merah:
<a href="#" class="tombol-blog" style="background:#f44336">Baca Selengkapnya</a>📱 4. Responsive dan Cocok untuk Mobile
Tombol ini otomatis menyesuaikan dengan layar HP karena menggunakan display: inline-block dan padding yang fleksibel. Jadi aman dipakai di tema Blogger modern seperti template UI.
⚙️ 5. Bisa Digunakan untuk:
- Tombol Download APK
- Link ke halaman safelink
- CTA ke halaman kontak, form, atau link eksternal
- Promosi afiliasi / produk digital
📝 Penutup
Dengan sedikit kode HTML dan CSS, kamu bisa membuat teks apapun menjadi tombol keren di Blogger. Gunakan tombol ini untuk menarik perhatian pengunjung dan meningkatkan interaksi. Jangan lupa sesuaikan warna tombol dengan tema blog kamu ya!
Semoga tutorial ini bermanfaat. Kunjungi TipsTechPraktis untuk trik Blogger lainnya.
Faq Post:
Apa itu teks seperti tombol?
Teks seperti tombol adalah teks yang diberi gaya (style) menggunakan CSS agar terlihat seperti tombol interaktif, meskipun sebenarnya bukan tombol HTML.
Bagaimana cara membuat teks terlihat seperti tombol?
Gunakan elemen <a> atau <span> dan tambahkan CSS seperti background-color, padding, border-radius, dan text-decoration: none agar tampilannya mirip tombol.
Apakah ini bisa digunakan untuk tombol download?
Ya, bisa. Kamu cukup membuat link dengan atribut href menuju file download, lalu terapkan CSS agar terlihat seperti tombol.
Apakah mempengaruhi SEO?
Tidak secara langsung. Namun, desain yang menarik dapat meningkatkan interaksi pengguna, sehingga secara tidak langsung berdampak positif pada SEO.
