Cara Mengganti Icon/Logo Twitter ke Logo X Baru pada Blogger

Mengikuti perkembangan teknologi dan tren branding terbaru, Twitter telah bertransformasi menjadi X dengan logo baru yang lebih modern dan dinamis. Perubahan ini membawa tantangan baru bagi para pemilik blog, terutama yang menggunakan platform Blogger. Memastikan tampilan blog kamu tetap up-to-date dan relevan dengan logo terbaru sangat penting untuk menjaga citra profesional di mata pengunjung. 

Namun, saya bribadi mengalami kesulitan dalam mengganti icon/logo twitter dari yang awalnya logo 'burung biru,' menjadi logo 'X'. Kode 'fa' atau Font Awesome Twitter sudah coba saya ubah di HTML blog saya menggunakan kode 'fa' yang baru, namun selalu tidak berfungsi. Saya sudah mencoba mengubah beberapa kode HTML, namun masih nihil.

Pada akhirnya saya menemukan cara yang cukup mudah, kita tidak perlu mengubah kode HTML apapun pada blog kita, bahkan kita tidak perlu mengubah tag 'fa fa-twitter', cukup dengan menambahkan kode CSS di bawah ini pada template blogger kita: 

<p> .fa.fa-twitter::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    content: "";
    background-color: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 -8 26 30" xmlns="http://www.w3.org/2000/svg"><g><path fill="white" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></g></svg>') no-repeat center;
    mask: url('data:image/svg+xml;utf8,<svg viewBox="0 -8 26 30" xmlns="http://www.w3.org/2000/svg"><g><path fill="white" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></g></svg>') no-repeat center;
    background-position: center 3px;
} </p>

Cara memasang kode CSS di template blogger kita bisa dilakukan seperti biasa, bisa dengan dua cara, yaitu: 

1. Melalui 'Edit HTML'

• Masuk ke Dashboard Blogger;
• Pilih tab 'Tema';
• Pada menu 'custom (Diubah)' lalu pilih pada tombol orange-panah kecil menghadap ke bawah;
• Namun kita harus 'Cadangkan' terlebih dahulu untuk mengantisipasi apabila kita mengalami masalah dalam proses edit HTML.
• Pilih 'Edit HTML';
• Letakkan kode CSS/Javascript di atas tag </head>
• Jika tidak ada masalah, pilih SAVE!

 Atau lihat di bawah:

2. Melalui Menu 'Tambahkan CSS' 

• Masuk ke Dashboard Blogger;
• Pilih tab 'Tema';
• Pilih 'SESUAIKAN' pada tombol orange.
• Pilih 'Lanjutan';
• Pada drop down cari tab 'Tambahkan CSS'
• Paste kode CSS pada kolom yang tersedia
• SAVE!

Atau lihat di bawah:

Nah, setelah kode CSS tersebut terpasang di template blog kita, setiap kode 'fa fa-twitter' akan diubah atau di-generate menjadi icon/logo Twitter yang baru atau 'X'. 

Dengan mengikuti langkah-langkah yang telah kita bahas, kamu kini telah berhasil mengganti icon logo Twitter lama dengan logo X terbaru di Blogger. Perubahan ini tidak hanya memperbarui tampilan blog kamu, tetapi juga menunjukkan komitmenkamu untuk selalu mengikuti perkembangan terbaru dalam dunia digital. Teruslah berinovasi dan pastikan semua elemen visual di blog kamu selalu selaras dengan tren terkini untuk menciptakan pengalaman terbaik bagi pengunjung.