Ditulis oleh: Ditulis pada: 11/07/2014
Centered Embedded Tweets With CSS - Seperti kita ketahui, jika kita membubuhkan embedded tweets pada postingan blog kita, maka posisinya akan selalu berada di sisi kiri.
Tentunya hal ini membuat sebagian orang merasa kurang nyaman ketika melihat embedded tweets ini berada di sisi kiri postingan, mereka lebih senang jika embedded tweets ini berada di tengah atau center.
Nah jika Anda adalah salah satu dari orang yang merasa kurang nyaman ketika melihat embedded tweets ini selalu berada di sisi kiri, maka silahkan simak caranya untuk membuat embedded tweets ini berada di tengah-tengah halaman postingan.
Sebenarnya di Google sudah ada beberapa tutorial yang membahas masalah ini. Dan trik membuat embed tweets ini berada di tengah pun cukup mudah. Namun hal ini hanya berlaku untuk satu embed tweets saja.
Sebagai contoh, misalnya kode embedded tweets seperti berikut:
<blockquote class="twitter-tweet" lang="en"><p>Merubah Blockquote Tag Menjadi Pre Code Tag Dengan Jquery <a href="http://t.co/ukwrWlwiRg">http://t.co/ukwrWlwiRg</a></p>— Adhy Suryadi (@KompiAjaib) <a href="https://twitter.com/KompiAjaib/status/530258734765723648">November 6, 2014</a></blockquote>
Untuk membuat embedded tweets ini berada di tengah-tengah, maka kita hanya perlu menambahkan kode
tw-align-center pada class="twitter-tweet" sehingga menjadi class="twitter-tweet tw-align-center".
Source: http://blog.hubspot.com/blog/tabid/6307/bid/34273/How-to-Center-Align-Your-Embedded-Tweets-Quick-Tip.aspx
Namun bagaimana untuk embedded tweets lainnya yang sudah kita bubuhkan ke dalam postingan-postingan sebelumnya? Bisa saja kita mengedit postingannya kemudian menambahkan kode tadi. Tapi bagaimana jika postingan yang menyertakan embedded tweets sudah banyak?
Nah jika halnya demikian, kita bisa membuat semua embedded tweets ini berada di tengah-tengah tanpa harus mengeditnya satu per satu.
Silahkan tambahkan kode CSS di bawah ini ke edit HTML blog.
.twitter-tweet{margin:10px auto!important;}
Save template dan sekarang silahkan cek semua postingan yang menyertakan embed tweets.
Dan perlu diketahui bahwa embedded tweets ini sudah responsive sehingga cocok untuk ditambahkan ke postingan blog yang responsive.
Sebagai contoh, di bawah ini adalah embedded tweets dari kode embed di atas dengan menggunakan kode CSS agar berada di tengah postingan (tidak menggunakan kode
tw-align-center).