Avez-vous jamais demandé comment les blogs comme Smashing Magazine, conception Vandelay, trois styles (C'est moi) affichent leur nombre alimentation de façon personnalisée? Eh bien je suis tombé sur un tutoriel à Blogussion qui fournit le code pour amener le flux au format texte. Aujourd'hui, je suis non seulement va vous montrer comment utiliser le code fourni par Blogussion, mais je vais vous montrer quelques façons dont vous pouvez le personnaliser à l'aide de CSS et d'images.
La première chose que vous devez faire est de créer un fichier appelé feed.php .Copiez le code ci-dessous dans le fichier que vous venez de créer.
Le Code - Affichage de votre compte Flux RSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <? Php/ / Se rafraîchir feedburner compte/ / Initialisation de la session Curl$ Ch = curl_init ();/ / Définit curl pour renvoyer les données au lieu de l'imprimer pour le navigateur.curl_setopt ( $ ch , CURLOPT_RETURNTRANSFER, 1);/ / Définit l'URLcurl_setopt ( $ ch , CURLOPT_URL whaturl $ );/ / Exécute la récupération$ Data = curl_exec ( $ ch );/ / Fermer la connexioncurl_close ( $ ch );$ Xml = nouvelle SimpleXMLElement ( $ data );$ Fb = $ xml -> feed-> entry [ "circulation" ];/ / Fin de compte se rafraîchir feedburnerecho $ fb ;> |
Une fois que vous avez collé cette section de code dans votre nouvelle feed.phpfichier, il ya une autre étape importante que vous DEVEZ prendre pour que cela fonctionne.
Entrez votre ID Feedburner
Sur la ligne 3 du code ci-dessus, vous devez changer un peu de code. Vous devez modifier ce code afin qu'il lit votre ID Feedburner RSS Ici au lieu de ce qui est juste une place de titulaire. Voir l'exemple ci-dessous correcte.
1
|
Votre ID Feedburner est ce qui est à la fin de l'URL de votre Feeds alors n'oubliez pas d'insérer ou qu'il ya le nombre d'alimentation ne fonctionne pas.
Ne pas oublier le Include
La dernière étape pour l'obtention de votre compte pour afficher utilise un PHP include pour inclure le code que nous avons copié ci-dessus dans la page réelle.Sur mon blog, j'ai inclus mon code dans la barre latérale, car ce qui s'est passé pour être là où j'ai eu l'espace. Donc, dans mon sidebar.php j'ai utilisé le code ci-dessous.
1
| <Php? include ( "feed.php" );?> |
Temps pour les styles!
Maintenant, nous avons notre code venir dans la barre latérale, mais il est aussi clair que simple peut-être raison?
Rappelez-vous que je fais ce tutoriel fondée sur le bouton subscribe dans le coin supérieur droit de la barre latérale. Alors d'abord je vais ouvrir mon sidebar.phpfichier ou tout autre fichier que vous avez placé la déclaration Include jeu. Nous allons maintenant ajouter deux divs autour de notre instruction include, comme indiqué ci-dessous.
Rappelez-vous que je fais ce tutoriel fondée sur le bouton subscribe dans le coin supérieur droit de la barre latérale. Alors d'abord je vais ouvrir mon sidebar.phpfichier ou tout autre fichier que vous avez placé la déclaration Include jeu. Nous allons maintenant ajouter deux divs autour de notre instruction include, comme indiqué ci-dessous.
1
2
3
| < p > <? php include ("feed.php");?> </ p ></ div > |
Ok, maintenant que nous avons une div conteneur et une balise de paragraphe autour de notre incluent maintenant nous voulons diriger vers Photoshop pour créer le graphique. Je ne vais pas prendre le temps de vous montrer comment j'ai créé les boutons dans ce tutoriel afin de faire quelques boutons de test ou de prendre mon bouton ci-dessous.
Remarquez comment j'ai laissé un peu d'espace sur le graphique pour un nombre de comptage de flux? Assurez-vous que vous prenez le nombre d'abonnés que vous avez en considération lors de la création de votre graphique. Comme je n'ai que 200 abonnés (me faire 300, cliquez sur abonner un ami et dites) la superficie réelle qui contiendra les numéros ne doit pas être trop large. Ok, maintenant que nous avons notre graphique nous mettrons en ligne dans notre dossier d'images dans notre annuaire thématique.
Sur le CSS
Laissez-moi vous expliquer le raisonnement derrière le code HTML que j'ai utilisé.La raison pour laquelle nous avons mis un div conteneur autour de l'inclusion est de rendre le bouton cliquable ensemble, puis j'ai utilisé une balise de paragraphe afin que nous puissions passer le texte à l'intérieur du récipient avec sans affecter la position du conteneur.
Notre premier morceau de CSS va positionner l'élément conteneur.
1
2
3
| # Feedc ontant { poste : rapport ;} |
Le morceau de code suivant définit l'image d'arrière-plan que nous avons créé dans photoshop pour la balise d'ancrage de la div continer. REMARQUE: Vous devez utiliser le bloc d'affichage dans ce morceau de code ou le code ne fonctionnera pas. J'ai donné la balise d'ancrage de la largeur et de la hauteur de l'image que j'ai créée en PS. Configurez l'image comme arrière-plan et ajouté une bordure autour de lui.
1
2
3
4
5
6
7
| # Feedc ontant un { largeur : 300px ; hauteur : 75px ; arrière-plan : url (images / subscribe.png); affichage : bloc ; frontière : 1px solide # 2996b1 ;} |
Maintenant, nous devons avoir notre bouton qui est cliquable et le FeedCount sera probaby être quelque part ci-dessous notre bouton. Afin d'obtenir ce texte à l'intérieur de notre bouton il faut le positionner absolue pour le sortir de l'écoulement du document, mais parce que notre div conataining est en position relative de l'élément absolu restera positionné à l'intérieur du conteneur. Nous avons également mis la taille de police, couleur, etc ... pour la façon dont nous voulons que le texte à afficher. Voici le CSS que j'ai utilisée.
1
2
3
4
5
6
7
8
| # Feedc ontant p { la position : absolue ; top : 25px ; droit : 42px ; couleur : # 004e5c ; font-size : 1.4em ; font-weight : bold ;} |
Produit final
Si vous avez aimé ce post s'il vous plaît Inscrivez-vous et soutenir les trois styles de toute façon possible. Merci et j'espère que vous avez appris quelque chose.Laisser vos questions dans les commentaires et je vais revenir à vous.
Aucun commentaire:
Enregistrer un commentaire