Rabu, 09 Maret 2011

Membuat Wiget Burung Twitter Beterbangan di Blog

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE7ccai9rK_354o9azasdpKt_dztpNIzqcAHxGv6tuVwbmCYTMtOYHsqy4lWUVmIzUbJHXaiMRja6vOp6lJABRG_jcRuDzmo-wQox4-lxsn1K4VJ0U1E_lWVBHceoYy9-SJcDWm2yQTRw/s1600/twitter.jpg
Sebelumnya saya berterima kasih dulu sama System of Blog selaku sumber dari tutorial ini. membuat Burung Twitter Berterbangan di Blog contohnya pada halaman ini, terlihat keren bukan? jika burung itu di klik maka akan mengarah pada akun twitter anda.. Jika kalian Mengubah posisi cursor/scrolling maka burung inipun akan terbang berubah posisi.

Keren Kan? Gimana cara membuatnya? Sebenernya gampang...
  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 Biru-Biru (akuntwittersobat) menjadi ID twitter anda
    Simpan deh... Burung mu (eh.. bukan burung yang itu..) Jadi dehh.... 


Artikel Terkait:

Blogger
situs jejaring sosial

Diposting oleh Ichsan Saputra di 17.09
Label: ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

Komentator Blog Ini