Foto, Gambar, & Emoji Blogger Blogspot Diperbesar
✅ Cara Menampilkan Emoji 🌸 Sebagai Gambar di HTML Blogger
1. Gunakan Emoji Langsung dengan <span> (Pasti Tampil)
<span style="font-size: 100px;">🌸</span>Cara Praktis: Tambahkan display: inline-block dan margin-top. display: inline-block; dibutuhkan agar elemen span> bisa menerima margin vertikal. margin-top: 20px; memberi jarak 20 piksel dari teks di atasnya. Gunakan inline-block + margin-top jika ingin solusi bersih dan bisa dikontrol sepenuhnya dalam satu baris span>.
Teks di atas emoji, ok
🌸Alternatif: Tambahkan Elemen Blok (Seperti div> atau
)
Teks di atas emoji, ok
🌸
atau
Teks di atas emoji
- Tampil di semua browser dan Blogger
- Ukuran bisa disesuaikan dengan
font-size - Tidak perlu upload gambar
2. Pakai Gambar Sendiri (JPG/PNG dihosting)
<img src="https://example.com/bungaku.png" width="32" height="32" style="vertical-align: middle;" alt="🌸">
- Tampil stabil jika URL gambar valid dan bisa diakses publik
- Cocok untuk emoji kustom atau hasil desain sendiri
3. Embed Gambar Langsung dengan Base64 (Tanpa Hosting)
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." width="32" height="32" alt="🌸">
- Tidak perlu upload file
- Cocok untuk HTML mandiri, tapi ukuran Base64 bisa besar
4. Pakai Twemoji PNG (CDN)
<img src="https://twemoji.maxcdn.com/v/latest/72x72/1f338.png" width="128" height="128" alt="🌸">
- Sering bisa tampil, tapi kadang diblokir di Blogger
5. Pakai Twemoji SVG (Sering Gagal)
<img src="https://twemoji.maxcdn.com/v/latest/svg/1f338.svg" width="128" height="128" alt="🌸">
- Sering tidak tampil di Blogger karena format SVG dibatasi
✅ Rekomendasi Urutan Terbaik untuk Blogger
<span>emoji + font-size (pasti tampil)<img>dari URL gambar pribadi (stabil)<img>dari Base64 (tanpa hosting)- Twemoji PNG (jika kompatibel)
- Hindari Twemoji SVG (sering gagal)
✅ Cara Menerapkan CSS ke Gambar dari blogger.googleusercontent.com Misalnya, Anda punya gambar seperti ini:
💡 Pilihan 1: Pakai style langsung (inline CSS)
💡 Pilihan 2: Pakai class CSS
Tambahkan kode CSS di bagian atas HTML (sebelum <body> atau di <style> Blogger). Contoh Lengkap:
Judul atau teks di atas
Teks di bawah gambar
Catatan Penting
Gambar dari blogger.googleusercontent.com bisa diberi CSS seperti biasa, karena itu hanya URL gambar seperti gambar lain.
Jika tidak terlihat efeknya, periksa beberapa hal berikut:
- Pastikan tidak ada konflik CSS lain yang menimpa aturan yang kamu buat.
- Coba tambahkan aturan seperti:
display: block;ataumargin: 24px 0;pada gambar untuk pengujian. - Atau bungkus gambar di dalam elemen
<div>dan terapkan gaya di pembungkus tersebut.
Contoh penggunaan:
Comments
Post a Comment