Codepal

Pour un temps très long maintenant, il a été cette tendance d'afficher les tweets sur la barre latérale du site, pied de page ou l'en-tête. Beaucoup de designers ont conçu des moyens ingénieux de l'affichage des tweets en créant de belles illustrations accrocheuses qui les contiennent. Le but principal de les rendre visuellement attrayant est de telle sorte que les visiteurs peuvent s'y intéresser et de lire les nouvelles mises à jour que le propriétaire du site est de fournir. Qu'est-ce ce tutoriel va faire est de permettre à vous de faire votre boîte twitter affichage interactif d'alimentation afin que vos visiteurs peuvent aller «wow! C'est plutôt cool »quand ils visitent votre site ou lire vos flux. Donc ici, il va:

Étape 1. Comment puis-je insérer le flux dans mon site?

Insertion d'alimentation de votre compte twitter dans votre site web peut devenir difficile. C'est une bonne chose il ya des tutoriels tant là-bas qui vous fournira les connaissances de l'insertion de ces flux facilement. Voici quelques ressources qui vous permettront d'obtenir les flux de Twitter sur votre propre site:

1. Conception d'une page unique pour Mises à jour Twitter
2. 10 façons d'intégrer Twitter impressionnant avec votre site web
3. Tweet!

Les utilisateurs de WordPress pouvez utiliser certains plugins impressionnant pour obtenir leur compte Twitter sur leur site:

1. 35 Superbes Plugins Twitter pour WordPress
2. Juitter
3. plugin jQuery pour Twitter

Étape 2. Création du sprite image.

Maintenant que vous avez avec succès appris comment importer le flux twitter, il est temps de configurer la zone d'affichage. Pour ce tutoriel, je vais utiliser la même conception de la boîte de twitter comme je l'ai utilisé dans c.-à-pied de ce site un oiseau Twitter, à regarder les tweets.

Ce que notre objectif principal, c'est que chaque fois que le vol stationnaire de l'utilisateur sur la boîte d'alimentation twitter, une action va avoir lieu. Dans notre cas l'oiseau Twitter se tourneront vers l'utilisateur.

Vous pouvez créer des modèles comme celui-ci en utilisant des icônes twitter diverses faites par certains concepteurs de merveilleux qui aiment partager leur travail avec la communauté web. Voici une source ultime de ces icônes.

100 + icônes Twitter remarquablement beau et Boutons (N'oubliez pas de demander au concepteur d'abord avant l'utilisation de ces icônes.)
Icône vecteur libre fixé par ProductiveDreams.com

J'ai utilisé les icônes faites par ProductiveDreams. Après avoir créé une simple boîte dans photoshop. Placez la normale twitter oiseau icône c.-à-la avec la vue en coupe transversale de l'oiseau, sur le côté en bas à droite de la boîte de telle sorte que l'oiseau semble être regarder à l'intérieur de la boîte. Maintenant collez l'autre twitter oiseau icône, celle qui semble être tourné vers le spectateur.

Ensuite, poussez l'icône oiseau inclinée au-dessus du plus icône qui vous avez placé dans le coin inférieur droit de la boîte de telle sorte qu'il apparaît comme deux twitter oiseau à tête, comme indiqué ci-dessous

Maintenant masquer l'icône oiseau inclinée twitter et bien marquer un carré contenant l'oiseau normale twitter en utilisant des lignes de guidage. Assurez-vous que l'inclinaison et l'oiseau normal bien ajusté sur la même place faite par les lignes directrices.

Recadrer l'image avec l'icône twitter oiseau normal le long des lignes directrices et d'ouvrir un nouveau fichier et collez-il. Ensuite, vérifiez la hauteur de l'image recadrée et d'augmenter la taille de la toile de ce montant à la verticale. Ceci est fait de sorte que vous pouvez coller la version oiseau inclinée twitter sur la même toile pour donner la touche finale au sprite image.

Masquer l'icône oiseau normal twitter et de faire l'autre oiseau inclinée visible. Puis recadrer l'image à nouveau le long des lignes de guidage comme vous le faisiez pour l'image précédente. Copiez l'image et la coller sur la toile nouvellement créé où vous avez collé l'image d'autres. Ajustez les images afin qu'elles s'adapter correctement à toute la toile. Votre sprite image est prête à l'emploi et devrait ressembler à ceci:

Étape 3. Codage de l'oiseau à la vie!

Le squelette HTML de la boîte d'alimentation twitter va être simple. Il y aurait un div conteneur principal contenant le flux Twitter, l'oiseau et une option "Follow Me" lien.

 < div id = " " > twitter
	 < a href = " http://twitter.com/SumeetChawla"! id = " " twitter-lien > < Follow Me / a & gt ;
	 < div id = " " twitter-oiseau > < / div >
	 < - Votre RSS Twitter Here Comes - >
 < / div >

Le CSS pour la div conteneur "# twitter 'est très simple. Le div «# twitter-oiseau va contenir l'oiseau. Il doit avoir la moitié de la hauteur du sprite d'origine nous avons fait car une seule des deux images dans le sprite sera affichée. Utilisation de sprites CSS est une bonne pratique car elle réduit le serveur demande, par conséquent, diminue le temps de chargement et empêche les éclairs soudains de l'image lorsque planait sur pour la première fois.

Le div oiseaux twitter devrait être flotté vers la droite et une marge négative doit être assigné, de sorte que l'oiseau semble être quelque peu en dehors de la div conteneur. Faire «top» de la position de fond afin que l'oiseau twitter normal est affiché. Pour donner la touche finale à notre boîte de twitter, il suffit de changer la position de l'image de fond de la div 'twitter-oiseau »à« bas »chaque fois que l'utilisateur survole au cours de la div conteneur.

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

Pour voir comment le résultat final devrait ressembler, suffit de faire défiler vers le bas pour le pied de page au bas de cette page.

Exemples

Gopal Raju de ProductiveDreams a fait son fil Twitter l'air très vif et brillant. L'oiseau Twitter est interactif d'une manière très amicale et décontractée. Il cligne de l'œil et affiche le nombre total de partisans qu'il a.

Avant de se situer:

Après Hover:

Ce fut le seul site que j'ai pu trouver qui a fait la boîte d'alimentation twitter interactive. Si vous les gars trouver un autre site qui suit cette tendance vient de poster à ce sujet dans le commentaire et je ferai en sorte de l'ajouter ici.

Tags: CSS , RSS d'affichage , d'alimentation , comment , sprite , Twitter

Propos de l'auteur

Sumeet est le fondateur du Code-pal. Il travaille en tant que développeur web, est un programmeur hardcore, bourreau de travail, type d'amusement et aime sa famille. Suivez-le sur Twitter et Facebook.

Vous pouvez suivre les réponses à cette entrée via RSS 2.0 feed. Vous pouvez laisser une réponse , ou trackback depuis votre propre site.

Partager les connaissances

D'autres postes qui pourraient vous intéresser

• Astuce: Sauvegarde de votre blog avec VaultPress
• Summer of Love
• Listify, Convertir le texte brut à des éléments HTML
• Création d'un effet Blink Neon pour vos formulaires en utilisant CSS3 et jQuery