Selasa, 25 Desember 2012

Membuat "Icon Burung Twitter"


 membuat icon burung twitter

Berikut ini adalah tutorial membuat icon twitter dengan animasi burung yang bisa terbang mengikuti arah gerakan seperti terbang naik-turun dan bisa bertengger pada setiap kotak yang ada pada blog/situs. Sebenarnya cara ini cukup mudah dan gampang, namun karena ada teman yang bertanya kepada saya maka kali ini saya buatkan tutorialnya secara singkat dan mudah. 

Semoga tutorial berikut dapat membantu teman-teman sesama blogger maupun pengunjung blog saya. Oke, tanpa perlu panjang lebar, berikut adalah langkah-langkahnya:
  1. Masuk (Login) ke Dashboard Blogger anda.
  2. Pilih Tab Design, lalu Page Elelement.
  3. Kemudian Tambahkan Gadged/Widget (Add a Gadged), pilih HTML/JavaScript. (Bebas diletakkan dimana saja)
  4. Dari gadget/widget HTML/JavaScript tersebut, silahkan copy script "JavaScript" dibawah: (tanpa title/judul/tanpa memasukkan nama untuk gadged/widgetnya).
Copy script berikut ini, agar tidak terjadi kesalahan kode jangan langsung di paste ke gadged/widget, tapi paste dulu ke notepad kemudian dari notepad copy lagi dan dimasukkan ke gadged/widget HTML/JavaScript sesuai petunjuk diatas.
<script type="text/javascript" src="http://ncus-ainulyaqin.googlecode.com/files/tripleflap1.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoe9iPuM8_XqIkxyDDM7l4GVv8E3Yvay6oev6kB1OlaUwOsNlyiTf2LopbHZ0Zm38jMSZlyrSqQ7kct3MHtG96EBIP8tAFRIelCdvgnerSACbXrYt27pb18t_fJLJjfpbgeD50IxhIlzY/s1600/Blue+bird.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/User name";var tweetThisText = "Twitter - User name http://UrlSitusAnda/";tripleflapInit();
</script>

  • Ganti tulisan User name dengan nama pengguna (user name) akun Twitter sobat
  • Jika tak punya akun twitter dan tak ingin membuatnya tetapi masih ingin menampilkan "icon burung twitter" terbang di blog,triknya adalah ganti tulisan User name dengan Login.Jadi akan tampak seperti ini http://twitter.com/Login
  • Untuk mengganti warna icon burung twitternya (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoe9iPuM8_XqIkxyDDM7l4GVv8E3Yvay6oev6kB1OlaUwOsNlyiTf2LopbHZ0Zm38jMSZlyrSqQ7kct3MHtG96EBIP8tAFRIelCdvgnerSACbXrYt27pb18t_fJLJjfpbgeD50IxhIlzY/s1600/Blue+bird.png),sobat bisa mengganti kodenya.Berikut adalah kode warn aicon burung twitternya
  1. Warna Kuning https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6NhjpyuLAs1bZpz4NparQO5pPdQo49ICYlS4NvgifOJ5DaQ-CluYE1NkInRIrfGz2ZaWZmikzEayPJ2RX6SDRu7fRmzWjj5OE6zRmGagzojJX1od5SuYz834ollp5bJ8HQ88jUF08Sp8/s1600/yellow+bird.png
  2. Warna Hitam  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2m9Swuf7rlm4NECd5qcRLB0u6Whkjtyv_HQBVr7b726WrWCfVoIzOfU2zjGqxdiTSrg5KdHZ-s633vDmHr_w66G7FmbgfPgrqbINXhYPCIVuUplJZgA_AeqEacaymWzDEpd1ECk-nd4M/s1600/black+bird.png
  3. Warna Biru https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoe9iPuM8_XqIkxyDDM7l4GVv8E3Yvay6oev6kB1OlaUwOsNlyiTf2LopbHZ0Zm38jMSZlyrSqQ7kct3MHtG96EBIP8tAFRIelCdvgnerSACbXrYt27pb18t_fJLJjfpbgeD50IxhIlzY/s1600/Blue+bird.png
  4. Warna Cokelat   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNcPDf7KySzW_R2rlWutIcELl2-6coZd6e6bs4cbf_ZgieH3WgBV1LQQB_XxQejFtRazRFoNL9hyphenhyphenGIcC_sSy8RQvmdvvf7zh-HE2yS3XCmF9id_ueZQt0DwnIYPXeLBerBETpYXp3tgPM/s1600/brown+bird.png
  5. Warna Hijau   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghtFiLNyI7W7s0_7zgr54Mdg6qIBrFOrFyf88oW8sSkCujVWZJIwQfd6h7LrAvVTQpNkzCbWgRZmSqBEJ50rMKJLwhyphenhyphenXCLJcuMgIJOXPVVB-oqdY5YU5YgW35qn0ccG4y1jne9NwIBGgo/s1600/Green+bird.png
  6. Warna Merah   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8cGTaCeNvVzf5rBNoWtBtKOFUG3NkFgi7eHs03oIMRaRZqqx3yxzQT13m75yvFEYeG-ZX9sEWVgeKJM-oypYF0wUJdvqyQABIys8wE9qlxiDKHfa_-uX83QmVfKI9G5e8CbQwHDGdS8w/s1600/red+bird.png
  7. Warna Putih  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjK_GAr4WnoLCH1xkZ6tVP_GhrEbkmMnl6Nt5RCmZMYWhQwowyGnKOb0ygLCTMhOmWOVFV0Ap8t1jVSOUpkh16B79uBrH4RHx1dDXjWzO7DyBOQsFaWHovg0giFhsoFaLVtudINuYF4SE/s1600/white+bird.png
  8. Warna Ungu  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTKrtc-qerT5ncaivX1o69YEqminNNxhAbIWwUuakSHgVuOMRnzCTCiTka5mu5nK0vMCeZezjcJBBqsn-iTpEouDdV_ngerMCVMceuoniquFJYAbI_ithrkobAirRtxP3iuurxIqiE0KI/s1600/purple+bird.png 
  • Simpan dan lihat hasilnya

0 komentar:

Posting Komentar