MENAMPILKAN STATUS TWITTER DENGAN DESIGN YANG UNIK DI BLOGGER 5

Akhirnya bisa juga bikin postingan, setelah sekian lama bergelut dengan kerjaan yang gak bisa ditunda, postingan kali ini aku buat untuk menampilkan Twitter Status di blogger, dengan design yang bisa kita atur sendiri, sebagai contoh coba perhatikan Twitter Status disamping.

Terus terang untuk masalah update status di twitter juga baru-baru ini aku mulai sedikit aktif, sebelumnya... kagak pernah... tapi dipikir pikir apa salahnya kalau twitter bisa nambah temen.... jadi sehubungan temen di twitter gak banyak boleh dung kita saling ber twit ria.....

Kelamaan... langsung saja yach... Caranya cukup sederhana yang pertama buka Blogger --> Edit HTML, kemudian cari kode ]]></b:skin>, setelah itu copy kode css dibawah ini tepat diatasnya, kode dibawah inilah yang bisa kita rehap untuk membuat tampilan menjadi menarik :

#twitter { width: 300px; margin: 8px auto;}
#twitter ul {margin-top:-80px; list-style: none; padding: 0 0 0 80px;}
#twitter ul li {padding: 10px; background: rgba(255,255,255,0.1); border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;}
#twitter ul li a { font: italic 10px/20px Georgia, Times, Serif; color: #555b6e;}
#twitter ul li a:hover { color: #1b2f6f; }
#twitter ul li span { font: 10px/20px Helvetica, Arial, Sans-Serif; color: #fff;}
#twitter ul li span a { font: 10px/20px Helvetica, Arial, Sans-Serif;}
.twitteffect img { opacity:0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5; }
.twitteffect:hover img { opacity:1.0; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity:1; }

Lalu di simpen.....

Selanjutnya beralih ke tab page element dan tambahkan Add Gadget --> HTML/Javascript, dan copy code di bawah ini kedalamnya.

<div id="twitter"><a class='twitteffect' href='http://twitter.com/karsono' target='_blank'><img src="http://img259.imageshack.us/img259/5629/twitter2.gif" border="0" /></a><ul id="twitter_update_list"></ul> </div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script> <script src="http://twitter.com/statuses/user_timeline/karsono.json?callback=twitterCallback2&count=1" type="text/javascript"></script>

Yang perlu diperhatikan adalah kode yang berwarna merah... ganti kode tersebut sesuai dengan id Twitter anda masing-masing.. selesai... dan jangan lupa boleh dung kita bertwiiter ria.