Codepal

Für eine sehr lange Zeit jetzt hat es sich dieser Trend der Anzeige von Tweets auf der Website Sidebar, Footer oder Header. Viele Designer haben geniale Art und Weise der Anzeige der Tweets durch die Schaffung von schönen Blickfang Illustrationen mit ihnen entwickelt. Der Hauptzweck so dass sie optisch ansprechend ist, so dass die Besucher können sich interessiert und lesen Sie die frische Updates, die Eigentümer der Website bietet. Was dieses Tutorial tun wird, wird Ihnen ermöglichen, um Ihren Twitter Feed Display Box Interactive, so dass Ihre Besucher gehen kann "wow! Das ist ziemlich cool ", wenn sie Ihre Website besuchen oder lesen Sie Ihre Feeds. Also hier geht es:

Schritt 1. Wie füge ich den Feed in meine Website?

Einsetzen Ihres Twitter-Account des Feeds in Ihre Website kann kompliziert werden. Es ist eine gute Sache, es gibt so viele Tutorials gibt, die Sie stellen mit dem Wissen um diese Feeds Einsetzen leicht. Hier sind einige Ressourcen, die Ihnen ermöglichen, um die Feeds von Twitter erhalten auf Ihre ganz eigene Website:

1. Entwerfen eines Einzigartige Seite für Twitter Updates
2. gut 10 Ways to Twitter mit Ihrer Website integrieren
3. Tweet!

WordPress-Benutzer können einige awesome Plugins auf ihre Twitter-Feeds auf ihrer Website zu bekommen:

1. gut 35 Twitter Plugins für WordPress
2. Juitter
3. jQuery Plugin für Twitter

Schritt 2. Erstellen der Image-Sprites.

Nachdem Sie nun erfolgreich gelernt, wie man die Twitter-Feeds importieren, ist es Zeit, um die Anzeigefläche zu konfigurieren. Für dieses Tutorial, ich werde das gleiche Design für die Twitter-Box verwenden, wie ich auf dieser Seite der Fußzeile dh eine Twitter-Vogel starrte auf die Tweets verwendet haben.

Was unser primäres Ziel ist, dass, wann immer der Benutzer den Mauszeiger über das Twitter-Feed-Box ist, eine bestimmte Aktion wird stattfinden. In unserem Fall ist die Twitter-Vogel wird in Richtung des Benutzers zu suchen.

Sie können Designs wie dies mit Hilfe verschiedener Twitter Icons von einigen wunderbaren Designer, die ihre Arbeit mit der Web-Community teilen die Liebe gemacht. Hier ist eine ultimative Quelle für diese Symbole.

100 + bemerkenswert schönen Twitter Icons und Buttons (Denken Sie immer daran, dass der Entwerfer zuerst fragen, bevor Sie diese Symbole.)
Free Vector Icon von ProductiveDreams.com gesetzt

Ich habe die Icons von ProductiveDreams gemacht werden. Nach der Erstellung einer einfachen Box in Photoshop. Platzieren Sie die normale Twitter-Vogel-Symbol, dh derjenige mit dem Querschnitt des Vogels, in der unteren rechten Seite der Box, so dass der Vogel in der Box zu suchen scheint. Jetzt fügen Sie den anderen Twitter-Vogel-Symbol, derjenige, der auf den Betrachter zu suchen scheint.

Dann drücken Sie den gekippten Vogel-Symbol über dem älteren Symbol, das Sie in der unteren rechten Ecke der Box, so dass es wie eine zweiköpfige Twitter Vogel erscheint, wie unten gezeigt platziert

Jetzt blenden Sie die gekippte Twitter Bird Icon und ordnungsgemäß zu kennzeichnen ein Quadrat mit der normalen Twitter-Vogel mit Hilfslinien. Stellen Sie sicher, dass sowohl der geneigte und die normale Vogel richtig passen in der gleichen Platz, der von den Richtlinien gemacht.

Schneiden Sie das Bild mit der normalen Twitter-Vogel-Symbol entlang der Leitlinien und öffnen eine neue Datei und fügen Sie ihn dort. Dann überprüfen Sie die Höhe des beschnittenen Bildes und erhöhen Sie die Größe der Leinwand um diesen Betrag vertikal. Dies geschieht so, dass Sie den gekippten Twitter Bird-Version auf der gleichen Leinwand, um letzte Hand an das Bild einzufügen Sprite geben.

Blenden Sie die normale Twitter-Vogel-Symbol und machen die anderen geneigten Vogel sichtbar. Dann beschneiden Sie das Bild erneut entlang der Hilfslinien genau wie Sie für das vorherige Bild tat. Kopieren Sie das Bild und fügen Sie ihn auf das neu erstellte Leinwand, wo Sie das andere Bild eingefügt. Passen Sie die Bilder, so dass sie richtig passen die gesamte Leinwand. Ihr Bild Sprite ist gebrauchsfertig und sollte wie folgt aussehen:

Schritt 3. Coding den Vogel zum Leben!

Der HTML-Gerüst der Twitter-Feed-Box wird ein einfach zu sein. Es wäre eine Haupt-div-Container mit dem Twitter-Feed, den Vogel und eine optionale "Follow Me"-Link sein.

 < div id = " " > Twitter
	 < a href = " http://twitter.com/SumeetChawla"! id = " Twitter-Link " > < Follow Me / a & gt ;
	 < div id = " Twitter-Vogel " > < / div >
	 < - Ihr Twitter-Feed hier kommt - >
 < / div >

Das CSS für das '# twitter "div-Container ist sehr einfach. Das '# Twitter-Vogel' div wird den Vogel enthalten. Es sollte die halbe Höhe des ursprünglichen Sprite haben wir da nur eine der beiden Bilder in dem Sprite angezeigt. Mit CSS Sprites ist eine gute Praxis, weil es Server-Anfragen reduziert, folglich verringert sich die Ladezeit und verhindert, dass die plötzliche Eingebungen des Bildes auf, wenn zum ersten Mal schwebte.

Das Twitter-Vogel div sollte auf der rechten Seite platziert werden soll und eine negative Marge sollte, um es so zuzuordnen, dass der Vogel einige was außerhalb der div-Container zu sein scheint. Um den Hintergrund Position 'top', so dass die normale Twitter-Vogel angezeigt wird. Um den letzten Schliff zu unserem Twitter-Feed-Box geben, nur das Hintergrundbild ändern Position des 'Twitter-Vogel' div 'bottom', wann immer der Benutzer schwebt über dem div-Container.

 # Twitter {
	 color: # 658097;
	 position: relative;
	 width: 332px;
	 height: 122px;
	 background-color: # 1f1f1f;
	 border: 1px solid # 414040;
	 background-position: left bottom;
	 background-repeat: no-repeat;
	 padding-left: 10px;
	 padding-top: 10px;
 }
 # Twitter-Vogel {
	 background-image: url ('images / twitter.jpg');
	 background-position: top;
	 position: relative;
	 float: right;
	 margin-top: 32px;
	 margin-right: 75px-;
	 width: 101px;
	 height: 100px;
	 background-repeat: no-repeat;
 }
 # Twitter: hover # Twitter-Vogel {
	 background-position: bottom;
 }

Um zu sehen, wie das Endergebnis aussehen würde, scrollen Sie einfach in die Fußzeile am unteren Rand dieser Seite.

Beispiele

Gopal Raju aus ProductiveDreams hat aus seinem Twitter-Feed sehen sehr lebhaft und fröhlich. Das Twitter-Vogel ist interaktiv in einer sehr freundlichen und lässigen Art und Weise. Er zwinkert und zeigt die Gesamtzahl der Anhänger, was er hat.

Vor dem Schwebeflug:

Nach Hover:

Dies war die einzige Seite, die ich finden, was machte die Twitter Feed box interaktive könnte. Wenn euch eine andere Website zu finden, die diesem Trend folgt, nur darüber zu schreiben in dem Kommentar und ich werde sicherstellen, um es hier hinzuzufügen.

Tags: CSS , Display-Feeds , Feed , wie man , Sprite , Twitter

Über den Autor

Sumeet ist der Gründer der Kodex-pal. Er arbeitet als Web-Entwickler, ist ein Hardcore-Programmierer, Workaholic, lustiger Kerl und liebt seine Familie. Folgen Sie ihm auf Twitter und Facebook.

Sie können alle Antworten zu diesen Eintrag durch folgen RSS 2.0 Feed. Sie können eine Antwort hinterlassen , oder trackback von deiner eigenen Seite.

Teilen Sie das Wissen

Weitere Beiträge die Ihnen gefallen könnten

• 40 + Atemberaubende WordPress Themes Portfolio
• Quick-Tipp: Sichern Ihrer Blog mit VaultPress
• So erstellen Sie eine FAQ-Seite mit WordPress und benutzerdefinierten Post-Typen
• Business Template