Thursday, June 2, 2011

Cara Membuat Widget Burung Twitter Beterbangan di Blogmu

Di semester dua ini, salah satu dosen saya, hampir mewajibkan setiap mahasiswanya untuk nge-follow akun twitternya (mungkin buat jaga-jaga, soalnya ada kabar kalau Facebook bakal ditutup *walaupun beritanya masih simpang siur*). Ya mau gak mau, saya selaku mahasiswa yang patuh dengan dosen :P, ya kudu bikin akun twitter juga. Sebenernya, dari dulu pengen bikin, tapi berhubung kelihatannya sulit, jadi cukup puas dengan akun facebook saya saja,. :)
Tapi pada akhirnya, sekarang saya sudah punya akun twitter "@kurnia_bagus" (follow yaa,. ) :P


Nah!!! Berhubung saya juga punya akun blog dan tengah asyik-asyiknya memelihara blog yang sedang sahabat baca sekarang ini, saya berkeinginan untuk menghias blog saya dengan widget dari Twitter itu sendiri (soalnya widget dari Facebook udah lumayan banyak di blog saya. hehe ). Salah satu dan pertama kalinya widget Twitter yang saya pasang adalah widget burung Twitter yang beterbangan di halaman blog sahabat, seperti yang telah kalian lihat sendiri di blog saya ini. Hehe,. :p
Capture burung Twitt lagi terbang
Asyiknya widget ini, selain tampilan burungnya yang imut, burung ini bisa terbang kesana kemari mengikuti halaman blog yang sahabat scroll, bisa dicoba sendiri. Kalau sahabat meng-scroll halaman blog saya ke bawah, maka burung tersebut akan terbang ke bawah mengikuti tampilan blog dan hinggap di salah satu tempat di blog sahabat,. Asyik bukan???
Sahabat tertarik,..????
Tenang saja, setela saya browsing, akhirnya saya menemukan scriptnya,.
Berikut ini scriptnya,. bisa langsung dipraktekkan dan bersiaplah menemukan burung sahabat!! Nah lhoo,..!!! hehehe,. maksudnya menemukan burung twitternya,.. :P

Langkah:
  1. Login Ke Blogger >> Rancangan >> Tambah Widget >> HTML/Javascript
  2. Lalu masukkan Kode ini :
<script type="text/javascript" src="http://techgyo.com/wp-content/FlyingTwitbird/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/techgyo";var tweetThisText = "Twitter - techGyo http://www.techgyo.com/";tripleflapInit();
</script>
<a id="theBird" href="http://twitter.com/akuntwittersobat" target="_blank" style="display: block; position: absolute; width: 64px; height: 64px; background-image: url(http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; z-index: 947; left: 0px; top: 587px; background-position: 0px 0px; background-repeat: no-repeat no-repeat; "></a>
<a id="theBirdLtweet" href="http://twitter.com/home?status=Twitter%20-%20techgyo%20http%3A//www.techgyo.com/" target="_blank" title="tweet this" style="position: absolute; background-image: url(http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; width: 58px; height: 30px; z-index: 951; left: 49px; top: 583px; display: none; opacity: 0; background-position: -64px 0px; background-repeat: no-repeat no-repeat; "></a>
<a id="theBirdLfollow" href="http://twitter.com/techgyo" target="_blank" title="follow me" style="position: absolute; background-image: url(http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; width: 58px; height: 20px; z-index: 952; left: 54px; top: 613px; display: none; opacity: 0; background-position: -64px -30px; background-repeat: no-repeat no-repeat; "></a>

     3. Ganti tulisan "akuntwittersobat" menjadi ID twitter anda. Simpan,.... dan siap untuk di preview,.!! Semoga Berhasil! :)


Source : http://www.adjiebrotot.co.cc

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.