Skip to main content
Website Mini

follow us

Cara Menggunakan Twitter Emoji Di Postingan Blog AMP dan Non AMP

Cara Menggunakan Twitter Emoji Di Postingan Blog AMP dan Non AMP - Setelah kemarin posting Cara Menampilkan Data Yang Sebenarnya pada Statistik Blog, kali ini Saya akan mencoba posting Cara Menggunakan Twitter Emoji di Postingan Blog AMP dan Non AMP.

Agar artikel di blog kita tidak terlihat seperti biasa-biasa saja, kita harus menambah kan emoji pada artikel yang kita tulis, salah satunya kita bisa menggunakan emoji dari Twemoji di postingan blog.

Sebenarnya di Blogger sudah tersedia emoji, namum masih hitam putih. Kalau kita menggunakan yang ini kan artikel kita akan terlihat lebih berwarna.

Untuk menggunakan twitter emoji di postingan blog pun caranya cukup mudah, kita hanya copy image untuk emoji-nya lalu paste di postingan. Saya sudah menyediakan list emoji untuk copy image emoji.

Kita tinggal pilih emoji yang ingin dipakai, lalu klik kanan pada emoji tersebut lalu copy image, kemudian paste di postingan.

Silahkan pilih emojinya di tombol berikut:


Kemudian silahkan di mode HTML lakukan seperti berikut:

Silahkan tambahkan kode attribute berikut pada kode <img untuk setiap emoji yang ditambahkan:


class="emojika" width="16" height="16"

Sehingga menjadi seperti ini.


<img class="emojika" width="16" height="16" alt="🆚" src="https://twemoji.maxcdn.com/16x16/1f19a.png" />

Untuk blog AMP, rubah kode <img jadi <amp-img dan kode /> di akhir kode jadi ></amp-img> sehingga menjadi seperti berikut:


<amp-img class="emojika" width="16" height="16" alt="🆚" src="https://twemoji.maxcdn.com/16x16/1f19a.png" ></amp-img>

Kemudian tambahkan sedikit CSS berikut di edit HTML agar emoji tampil rapih.

Untuk blog non AMP simpan di style:


.post-body img.emojika{width:16px;height:16px;vertical-align:middle}

Untuk blog AMP simpan di style amp-custom:


.post-body amp-img.emojika{vertical-align:middle}

Bagaimana, cukup mudah bukan?

Sumber: https://www.kompiajaib.com/2018/01/cara-mudah-menggunakan-twitter-emoji-di.html

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar