Cara Membuat Twitter Box News Feed Tanpa Plugin

    Cara membuat widget twitter box news feed sebenarnya hal yang sudah tidak asing lagi dan mudah untuk dibuat, tentu saja jika kita menggunakan plugin script dan aplikasi API dari situs twitternya secara langsung, lihat contoh pada link berikut ini adalah sebagai referensinya Twitter widget for Web/blog 

atau langsung ke editornya Costumize your profile widget .  

                  Nah pada tutorial ini diriku mau memperkenalkan kepada sobat sekalian sesuatu yang berbeda yaitu "Membuat Customized Twitter Feed  Tanpa Plugin script  dari situs Twitternya secara langsung" artinya kita tidak menggunakan code script yang di customized dan disediakan dari situs twitter tersebut, tapi disini kita lebih di tekankan untuk kreatif dan membuat sebuah tampilan customized yang berbeda dengan membuat script sendiri secara pure menggunakan code HTML, Javascript dan CSS sehingga tampilan bisa bebas sesuai dengan keinginan kita atau mengkostumisasi/customizing sendiri.  Berbeda halnya jika kita menggunakan plugin widget secara langsung dari twitter, kita tidak bisa bebas meng-customizednya dan ada batasan-batasan tertentu yang sudah berlaku atau tampilannya monoton hampir semuanya sama dan membosankan hehe...  *itu sih menurut pendapatku sobat!   Tapi kalo sobat lebih senang apa adanya, ya gpp menggunakan widget yang sudah siap pakai juga dari twitter selama itu masih  gretongan bin gratis!!^^

NB: Tutorial ini aku tujukan untuk para pengguna 'Blogspot'. Atau kemungkinan bisa juga untuk pengguna blog lainnya seperti 'Wordpress' dan 'Joomla', sobat cari tau sendiri ja cara pemasangan!!! hehe, coba cari di mbah google.. ambalayah tu..

Okay Langsung saja pada Intinya, Bagaimana cara memasang widget twitter box news feed tanpa plugin/secara manual. Berikut adalah langkah-langkahnya :

1.Login ke Blog Sobat bukan ke blog aku!  http://www.blogger.com

2.Setelah login, sobat cari tombol Tanda Panah  ke Bawah di sebelah tombol View lalu klik lalu akan muncul pilihan

3.Pilih/klik Template, kemudian klik lagi Edit HTML 

4.Klik Proceed

5. Kemudian copy dan paste code CSS berikut sebelum tag </head> :

untuk mempercepat pencarian tekan Ctrl+F  lalu masukan  </head> pada kotak search, Enter!

<!-- CSS tweet feed --><br /> <style type='text/css'> #twitter_update_list { font-size: 13px; line-height: 21px; list-style: none; } #twitter_update_list li { background: url('images/twitter-divider.gif') bottom left repeat-x; padding-bottom: 7px; margin-bottom: 9px; } #twitter_update_list span, #twitter_update_list span a { color: #eee; text-decoration: none; } #twitter_update_list a { color: #6f7276; } #twitter_update_list a[style="font-size: 85%;"] { font-size: 1em !important; } </style>

Jika sudah, sobat bisa men save-nya!

NB: Tampilan atau warna kotak feed CSS bisa di rubah sesuai keinginan, diatas hanya contoh, jika sobat ingin merubahnya dan meng customize nya silakan jika sudah ngerti HTML dan CSS, jika belum akan sangat beresiko! jangan lupa sebelum editing backup dulu template sobat.

6.Setelah menyimpan CSS diatas, kemudian sobat tinggal menyimpan code HTML dan Javascript secara bersamaan pada widget yang tersedia di blogspot, hal ini juga yang akan menentukan dimana sobat akan menampilkan/menyimpan news profile twitter sobat di blog. Berikut adalah langkahnya :

a) Klik Menu Layout pada Blog sobat

b) Klik add Gadget (bebas mau pilih di posisi mana saja)

c) Muncul layar pop-up, cari dan pilih HTML/Javascript   lalu klik tombol 'Plus'

d) Copy dan paste kan Code berikut ini ke layar HTML/Javascript tadi :

<ul id="twitter_update_list"><li>Twitter feed loading</li> </ul><br /> <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script><br /> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=2"></script><br />

Jika sudah, Ganti atau Replace String "USERNAME" dengan Username twitter sobat contoh username twitter aku  "adhieresthenes", gtu..  lalu klik Save (simpan). 

Selesai deh Hore.., moga berhasil dan bermanfaat! kalo suka di like,koment or di share ya haha.. =D