Centered Embedded Tweets With CSS

Centered Embedded Tweets With CSS

Bola Hero Gawai

Centered Embedded Tweets With CSS

Centered Embedded Tweets
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>&mdash; 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.


iframe.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).

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×