Cara Pasang Widget Twitter Timeline di Blog

Blog yang interaktif biasanya lebih disukai banyak pengunjung. Selain dengan menyediakan fasilitas komunikasi di kolom komentar, bisa ditambahkan widget interaktif lainnya seperti widget twitter, facebook, gplus, dan masih banyak lagi. Kali ini infodari akan berbagi tutorial panduan cara pasang widget twitter timeline di blog yang memungkinkan anda dan visitor blog dapat berkomunikasi  dan membuat blog lebih interaktif.

Dengan memasang widget twitter, anda juga dapat menawarkan pengunjung blog untuk bergabung menjadi follower anda di twitter blog yang anda miliki. Sehingga mereka dapat mendapatkan update blog anda pada akun twitter mereka, termasuk artikel terbaru yang anda twit melalui akun twitter anda. Pastikan anda sudah memiliki akun twitter. Dalam artikel ini, saya asumsikan bahwa anda telah mengetahui bagaimana cara membuat twitter akun khusus milik anda atau blog anda.

Panduan Langkah Langkah Cara Pasang Widget Twitter Timeline

1. Buka link Widget Configurator Twitter berikut ini :  https://twitter.com/about/resources/widgets.

2. Login ke akun twitter anda.

3. Akan terbuka jendela baru seperti di gambar di bawah ini. Klik tombol “Create New“.

membuat twitter widget timeline 1

4. Lakukan penyesuaian yang anda inginkan dalam setting widget yang akan anda buat. Jika anda ingin merubah tinggi atau lebar widget, anda dapat melakukan penyesuaian lebih detail nanti.

a. Pilih sumber isi widget yang anda inginkan, apakah widget baru anda akan berisi timeline, favorite, list atau search dari akun twitter anda.

  • Username : terisi otomatis sesuai dengan login anda
  • Option: Exclude replies -> replies twitter tidak ditampilkan
  • Auto-expand photos -> otomatis memperlihatkan baris foto
  • Height: tinggi widget dengan satuan pixel
  • Theme: Light -> warna terang, Dark -> warna gelap
  • Link color -> warna link, default: warna biru

b.  Lakukan penyesuaian yang ada terlebih dahulu. Jika sudah selesai, klik tombol “Create Widget“.

membuat twitter widget timeline 2

c. Anda dapat melihat hasil settingan di bagian preview, sebelah kanan kolom settingan.

5. Jika sebelumnya anda telah membuat widget (klik create widget), kemudian anda melakukan perubahan setting-an lagi, maka jangan lupa untuk meng-klik tombol  “Save Changes” untuk menyimpannya.

membuat twitter widget timeline 3

6. Jika anda tidak melakukan perubahan lagi, maka segera copy kode hasil widget twitter yang anda buat, di kolom yang ditunjukkan pada gambar di atas.

Pastekan script code tersebut ke posisi yang anda inginkan, misalnya di sidebar atau di footer. Atau jika ingin memasang widget dalam postingan, itu juga dapat anda lakukan.

7. Ada beberapa penyesuaian yang secara basic dilakukan. Jika anda ingin mensetting gaya tampilan widget anda, maka sisipkan kode  pada script kode tadi seperti di bawah ini:

[box title=”Twitter Widget” color=”#f00″]

<a class=”twitter-timeline” width=”300” height=”500data-theme=”dark  data-link-color=#cc0000  data-chrome=”nofooter transparent” databordercolor=“#cc0000 href=”https://twitter.com/twitterapi” data-widget-id=”YOUR-WIDGET-ID-HERE”>Tweets by @twitterapi</a>

[/box]

* sesuaikan ukuran yang pas dengan sidebar atau footer blog anda. Ganti angka atau value yang ditandai dengan huruf hijau pada area text yang ditandai dengan latar kuning pada kode script di atas.

·  Theme:Tambahkan kode data-theme=”dark , ubah value menggunakan dark atau light untuk merubah theme widget twitter anda pada kode script.

 ·  Width:Tambahkan kode width=”300, ubah ukuran lebar widget dengan merubah angka yang berwarna hijau pada kode script di atas (dalam satuan pixel).

 ·  Height:Tambahkan kode height=”500 , ubah ukuran tinggi widget dengan merubah angka yang berwarna hijau pada kode script di atas (dalam satuan pixel).

 ·  Link color:Tambahkan kode data-link-color=#cc0000 untuk merubah warna link pada widget. Ganti kode warna html pada text warna hijau sesuai yang anda inginkan, akan lebih bagus jika senada dengan warna theme blog anda.

 ·  Chrome:Tambahkan kode data-chrome=”nofooter transparent” untuk mengontrol layout widget tanpa footer transparan.

·  Border color: Tambahkan data databordercolor=“#cc0000untuk merubah warna border, Ganti kode warna html pada text warna hijau sesuai yang anda inginkan

[/note]

8. Jangan lupa “SAVE” perubahan kode script pada sidebar atau widget anda.

9. Selamat! Tutorial Cara Pasang Widget Twitter ini telah selesai anda ikuti. Dan kini lihat tampilan widget twitter di blog anda.

Banyak pilihan widget yang dapat anda pasang untuk mempercantik blog anda, termasuk diantaranya memasang widget histats, widget iklan, widget jam, widget translator, widget kalender. Dalam membuat blog, jangan lupakan pula beberapa plugin penting untuk blog wordpress yang dapat anda install di blog, untuk memaksimalkan performa blog anda.

Jika anda melakukan penyesuaian atau kostumisasi lebih jauh, silahkan anda kunjungi link berikut ini : https://dev.twitter.com/docs/embedded-timelines#customization

Cukup mudah bukan mengikuti panduan cara pasang di blog widget twitter timeline yang dijelaskan di atas? Semoga berhasil ya!

Comments

comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Human Captcha Verification : * Time limit is exhausted. Please reload CAPTCHA.

%d bloggers like this: