Cara Membuat Status Facebook, Twitter, dan Instagram Rata Tengah di Blog

Secara default, konten sosial media yang kita tampilkan dengan kode embed akan diletakan rata kiri. Bila kamu ingin membuatnya tampil rata tengah, ada cara mudahnya lho!

Menggunakan kode embed adalah salah satu cara mudah untuk menampilkan konten sosial media pada artikel blog. Status Facebook, tweet dari Twitter, foto Instagram, hingga video Youtube adalah beberapa contoh konten sosial media yang bisa dimasukan pada postingan kita.

Caranya pun cukup mudah karena kita hanya perlu mengambil kode embed dan menyalinnya pada artikel yang kita buat.

Sadar atau tidak, semua konten sosial media yang kita pasang dengan kode embed ini akan diletakan di sebelah kiri postingan, istilahnya rata kiri. Pada artikel dengan format penulisan dari kanan ke kiri seperti tulisan arab, konten sosial media tersebut juga akan tampil rata kanan.

Lalu bagaimana caranya untuk membuat konten tersebut rata tengah?

Ternyata cukup mudah lho! kita hanya perlu menambahkan tag <center> dan </center> di antara kode embed yang kita pakai, seperti pada format berikut:

<center>KODE EMBED</center>

Sebagai contoh, misalnya saja saya akan menampilkan sebuah tweet dengan kode embed berikut ini.

<blockquote class="twitter-tweet" data-lang="en"><p lang="in" dir="ltr">Atasi Masalah Web Security dengan Memilih Hosting yang Tepat <a href="https://t.co/ctx6GP3EQm">https://t.co/ctx6GP3EQm</a> <a href="https://twitter.com/hashtag/DewawebBlogCompetition?src=hash&amp;ref_src=twsrc%5Etfw">#DewawebBlogCompetition</a></p>&mdash; Syafiq | Bisablog (@bisablog) <a href="https://twitter.com/bisablog/status/1016285412363386880?ref_src=twsrc%5Etfw">July 9, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Dari tampilannya, kamu bisa lihat kalau tweet yang saya posting di sini akan tampil rata kiri. (Btw, kalau kamu membaca ini dari perangkat android atau tablet dengan ukuran tertentu mungkin tidak akan bisa melihatnya)

Atasi Masalah Web Security dengan Memilih Hosting yang Tepat https://t.co/ctx6GP3EQm #DewawebBlogCompetition

— Syafiq | Bisablog (@bisablog) July 9, 2018

Namun bila saya menambahkan <center> dan </center> di antara kode embed di atas, maka tweet di atas bisa tampil persis ditengah-tengah postingan seperti contoh berikut,

<center><blockquote class="twitter-tweet" data-lang="en"><p lang="in" dir="ltr">Atasi Masalah Web Security dengan Memilih Hosting yang Tepat <a href="https://t.co/ctx6GP3EQm">https://t.co/ctx6GP3EQm</a> <a href="https://twitter.com/hashtag/DewawebBlogCompetition?src=hash&amp;ref_src=twsrc%5Etfw">#DewawebBlogCompetition</a></p>&mdash; Syafiq | Bisablog (@bisablog) <a href="https://twitter.com/bisablog/status/1016285412363386880?ref_src=twsrc%5Etfw">July 9, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></center>

Mudah bukan!

Btw cara ini bisa kamu gunakan pada WordPress dan Blogger lho! Jangan lupa untuk menyalink kode embed dan tag <center>< pada mode TEXT (wordpress) atau HTML (Blogger). Dan Selain Twitter, cara ini juga bisa dipakai pada kode embed dari Facebook, Youtube, dan Instagram juga.

Satu catatan penting, saat menambahkan tag <center>< kamu tidak bisa kembali ke mode VISUAL karena tag tersebut akan hilang. Jadi ada baiknya bila kamu melakukan hal ini pada saat terakhir saat artikel kamu selesai dibuat.

Saya akira tidak ada yang sulit pada tutorial kali ini. Namun bila kamu masih punya pertanyaan, jangan segan untuk meninggalkan komentar kamu di bawah ini yah!