Catetan

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.

5 comments:

edo

1 Jan 2011 15.06.00
kalo di ganti facebook bisa ga gan???
Dydy Japanes Desain

5 Mar 2011 00.35.00
klo buat facebook..
edit javascrip nya di save di mna ya gan ?
Fajar Dwi Mawan

29 Mar 2011 16.02.00
kunjungi balik di http://kustommanga.blogspot.com gan
Doni Van Irma

2 Mei 2011 13.44.00
Mas, biar tulisan postingan Twitter di blogger berada di bawah, gimana caranya?
muhammad yogi purnama

7 Mar 2012 09.51.00
Kunjungi juga ya http://selong205.blogspot.com/
ditunggu gan :)

Posting Komentar