Widget Burung Twitter Terbang dg Effek CSS3 » Spesial Tutorial Blogdetik

13 Apr 2012

c11f450d113f6eab63a954438b5727dd_granimated-flying-twitter-birdWidget animasi si burung twitter terbang atau animated flying Twitter bird memang telah terpostingkan oleh banyak blogger, namun yang satu ini secara khusus aku persiapkan untuk tutorial di blogdetik yang selama beberapa waktu sedikit terabaikan. Bukan karena aku sudah bosan atau jenuh ngeblog di blogdetik. Yah … bagaimana mungkin aku bisa meninggalkannya?! Bagiku blogdetik adalah yang terbaik dan terhebat karena “blogdetiklah yang membangkitkan gairah ngeblogku yang hampir padam setelah selama berbulan-bulan ngeblog di tempat lain tak pernah dapat kemajuan berarti”. Ya … dan hal seperti ini masih berlangsung hingga kini. Mau bukti? Lihat pagerank gubhugreyot blogdetik dan gubhugreyot yang di blogger. He… padahal umur blognya berselisih lebih dari 1 tahun!

Widget animasi burung twitter terbang yang akan kita buat ini sudah mengalami beberapa perubahan dari widget yang sama yang ada di berbagai tutorial. Perubahan dilakukan dengan menambah beberapa effek seperti transparency effect, zoom effect serta rollover effect. Opacity effect berfungsi menciptakan burung twitter dengan transparency effect sehingga burung ini terlihat seperti terbang dibalik teks posting. CSS3 transform-scale berfungsi membuat si burung twitter terlihat lebih kecil dari ukuran sebenarnya agar tidak justru menjadi ganggunan bagi pengunjung ketika menikmati posting, sementara rollover effect dan zoom effect (juga menggunakan css3 transform-scale) akan membuat si burung twitter berubah menjadi “burung twitter animasi yang sesungguhnya disertai effek zoom” dengan menampilkan gambar berbeda berbentuk animasi gif. Burung twitter animasi gif akan terlihat saat cursor di arahkan di atas “burung twitter”.

DEMO Animasi burung twitter terbang di blogdetik:


Silahkan buka demonya dan bandingkan dengan widget yang sementara ini tersedia melalui berbagai blog dan berbagai tutorial lainnya!

D E M O

Javascript animasi burung twitter terbang
<script src="http://gubhugreyot-blogdetik.googlecode.com/svn/widget/GRanimaflytwittbird.js" type="text/javascript"></script>
<script type="text/javascript">
var twitterAccount = "http://twitter.com/gubhugreyot";
var tweetThisText = "Tips, tricks dan tutorial blogdetik - blogger";
tripleflapInit();
</script>
Keterangan :
  • Widget Animasi burung twitter terbang dapat digunakan sebagai widget di blogdetik.
  • Ganti http://twitter.com/gubhugreyot dengan alamat twitter anda.
  • Ganti Tips, tricks dan tutorial blogdetik - blogger ganti dengan teks lain yang sesuai.
  • Simpan javascript melalui widgetize Any HTML. Panduan menggunakan widgetize Any HTML dapat sampeyan klik di sini
  • Jika anda blom punya akun twitter, anda dapat mengganti alamat twitter dengan alamat blog, alamat blog anda yang lain atau alamat posting.
  • Widget ini juga bisa anda gunakan di blogger dan berbagai blog lainnya!

Tutorial Lain

Berbagai tutorial dan panduan blogger dan blogDETIK dapat sampeyan buka dengan :

Happy Blogging


TAGS Tutorial BlogDETIK Panduan BlogDETIK pasang widget Javascript


-

Author

Follow Me