21.01.2012

// // Leave a Comment

Fliegender Twitter-Vogel für Blogs

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7ALp24aB7KTI_PWPOwqIcxWnYlx8TMUgBznu3V063Vm8wn4H1A0gyxqdyYLmqh_3uEJjiCcDFZSOAXCuahRnXSCutwIqqUtOVVhz03TJo76G5-XHvImIJ1GbCQrFk1i5XH-WRsSB_bZ0/s400/Twitter_bird_flying-shinemark-by-saimoom.jpgTwitter hat weltweit an großer Popularität gewonnen und mit über 200 Millionen Usern eine große Community, welche ca. 65 Millionen Tweetes täglich erstellen. So ist es heute bereits Pflicht für jeden Blogger und Webmaster Twitter Buttons zu nutzen. Aber warum einen alten verstaubten Button nutzen wenn es auch schöner geht? "Twitter-Bird" nistet sich in deinem Blog ein, fliegt solltest du scrollen von Ecke zu Ecke und bleibt so immer im Blickfeld des Besuchers. "Twitty" verfügt über deinen Twitter Link aber auch einen normalen Tweet Link, sprich wenn man mit dem Cursor über den Vogel fährt, werden ein "tweet-this"- und "Follow-me"-Link angezeigt.

Beim Aufruf der Webseite fliegt der Vogel von oben in die Seite hinein und sucht sich einen zufälligen Ort im sichtbaren Bereich aus, bei dem er sich niederlassen kann. Wobei der Ort nicht ganz zufällig ausgewählt wird: Es handelt sich stets um ein existierendes HTML-Element wie ein Bild, eine Tabelle oder ein Div-Container. Schliesslich setzt sich ein realer Vogel auch auf ein Element des Baumes (Ast) ab und nicht irgendwo mitten in der Luft.Auch wenn sich der Vogel tendenziell neben den Inhalt setzt, kann es vorkommen, dass er den Text oder eine Grafik verdeckt. In diesem Falle kann man mit dem Cursor vor ihm "herumfuchteln" um ihn zu "verscheuchen", worauf er sich an einem anderen Ort ein neues Plätzchen sucht.


Hier gehts zur Demo


So bekommst auch du einen eigenen animierten Vogel:
  1. Blogger einloggen > Design >Post bearbeiten
  2. Vorher ein Backup des aktuellen Templates machen
  3. Such nach </body> (Strg+F)
  4. Setzte genau darüber diesen Code:
<script src='http://file1.npage.de/004690/48/html/blogratgeber-twitter-vogel.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var twitterAccount = &quot;blogratgeber&quot;;
var tweetThisText = &quot; <data:blog.pageTitle/> : <data:blog.url/> &quot;;
tripleflapInit();
</script>
   5.  Ändere blogratgeber zu deinem Twitter-Namen
    6.  Speichere das Template und Fertig!

Viel Spaß mit dem animierten Twitter Vogel. Solltest du Probleme haben zögere nicht uns zu schreiben.

0 Kommentare:

Kommentar veröffentlichen