Gadgets pour BloggerChez Google, les gadgets sont de simples applications HTML et
JavaScript qui peuvent être intégrés dans les pages Web et d'autres
applications, y compris Blogger.Quand vous construisez un gadget pour Blogger, il devient accessible à des millions de blogueurs actifs. Juste soumettre votre gadget pour nous, et il fera surface dans
Blogger.com où les utilisateurs peuvent facilement naviguer, configurer,
et d'ajouter votre gadget à la barre latérale de leur blog.Alors, maintenant que vous savez Blogger est une plate-forme de distribution pour votre gadget, qu'attendez-vous pour? Obtenez gadgets de construction ouvertes pour Blogger maintenant!CommencerGuide du développeur Gadget Dans leur forme la plus simple, des gadgets pour Blogger sont "Google Gadgets". Si vous n'êtes pas familier avec Gadgets encore, jetez un oeil au Guide du développeur pour commencer.Accès blog Les données des API JSON du gadget Blogger donnent gadgets
accès aux données de poste et de commentaires d'un blog, leur permettant
de tirer parti du contexte du contenu environnant.Meilleures pratiques de l'interface utilisateur pour Blogger Gadgets
Meilleures pratiques pour rendre votre gadget bien paraître à travers le
grand ensemble de styles de blog et mises en page.Exemple Gadget Un exemple simple gadget mise en œuvre des meilleures pratiques.Test de votre gadget dans Blogger Comment tester votre gadget dans Blogger.Proposez votre gadget à Blogger Maintenant que votre gadget est belle et sans bug, dire au monde à ce sujet!Accès aux données de blog de l'GadgetBlogger fournit accès en lecture seule des données de blog pour gadgets. L'API récupère les données de poste publics et de commentaires pour le blog hébergement le gadget. Les développeurs peuvent choisir de récupérer les données directement
dans le format JSON de Blogger, ou de récupérer l'URL du flux Atom
sous-jacente pour une utilisation future.L'API est disponible en tant que fonctionnalité google.blog; un gadget qui dépend des données peut nécessiter cette fonctionnalité. Si vous souhaitez que votre gadget pour éventuellement accéder aux
données de blog, mais encore être en conformité avec d'autres conteneurs
Google Friend Connect, vous pouvez faire l'option.Messages bloggetPostsJson (rappel)Récupère alimentation des récents messages pour le blog actuel, qui reviennent comme JSON pour le rappel.getPostsFeedUrl ()Retourne l'URL du flux Atom de tous les messages pour le blog actuel.Commentaires du bloggetCommentsJson (rappel)Récupère RSS de commentaires récents (dans tous les messages sur le blog), revenant comme JSON au rappel (format documenté ici).getCommentsFeedUrl ()Retourne l'URL du flux Atom de tous les commentaires récents.L'actuel Blog PostQuand un gadget est affiché sur une page de poste individuel, ces méthodes accéder aux données pour ce poste. Si le gadget est pas sur une page de poste individuel, ceux-ci renvoient la valeur null. Vous pouvez utiliser getCurrentCommentsFeedUrl ()! = Null comme un test pour indiquer l'environnement du gadget.getCurrentPostJson (rappel)Récupère le poste actuel de JSON, ou null si il n'y a personne.getCurrentCommentsFeedUrl ()Retourne l'URL du flux Atom pour les commentaires récents sur le poste actuel, ou null si il n'y a pas de poste actuel.getCurrentCommentsJson (rappel)Retourne l'alimentation des récents commentaires pour le poste actuel, de retour comme JSON au rappel (format documenté ici).Exemple d'extraits Accès Blog donnéesCet extrait calcule le nombre de mots pour les divers auteurs sur un
blog basé sur les quelques derniers messages, à l'aide de chaque auteur
OpenSocial ID comme clé pour la facilité de recherche plus tard.
// Calculate wordiness of blog authors:
function onLoadFeed(data) {
if (data.rc != 200) {
w(["Error loading blog data"]);
return;
}
var feed = data.data.feed;
var word_counts = new Array();
var wordiness = new Array();
for (var i = 0; i < feed.entry.length; i++) {
var entry = feed.entry[i];
var word_count = entry.content.$t.split(/\s/).length;
var osid = getOpenSocialId(entry.author[0]);
var author = entry.author[0].name.$t;
var authorid = getOpenSocialId(entry.author[0]);
var key = [author,authorid];
if (wordiness[key]==undefined)
wordiness[key] = word_count;
else
wordiness[key] += word_count;
}
var disp = new Array();
for (var k in wordiness) {
disp.push(k + " : " + wordiness[k] + " words");
}
w(disp);
}
// Return the OpenSocial ID for an author if available
function getOpenSocialId(person) {
var extendedProperty = person.gd$extendedProperty;
if (extendedProperty && extendedProperty.name == "OpenSocialUserId") {
return extendedProperty.value;
} else {
return null;
}
}
// Write output to a display element on the gadget
function w(arr) {
var str = "<ul>";
for (var e in arr) {
str += "<li>"+arr[e]+"</li>";
}
str += "</ul>";
document.getElementById('display').innerHTML = str;
}
Meilleures pratiques de l'interface utilisateur pour Blogger GadgetsLes blogueurs veulent bien paraître sur le web. Suivez ces meilleures pratiques afin que votre gadget se marie parfaitement avec les nombreux thèmes blogueurs utilisent.Soutenir une gamme de largeursDans Blogger, la largeur disponible pour votre gadget dépend à la fois sur le modèle du blog, et sur l'endroit où le gadget est inséré dans le blog. Les encadrés dans les modèles Blogger.com vont de 150px - 360px de large, bien que certains modèles ont encadrés qui se redimensionnent à être plus étendue lorsque la fenêtre du navigateur est étirée. En outre administrateurs de blog peuvent écraser la largeur de la sidebar de défaut.En outre, les gadgets peuvent être ajoutés à la barre de côté, en-tête, ou des régions de bas de page du blog comme indiqué par le rectangle orange dans les images ci-dessous.
Cela signifie que votre gadget doit être souple pour bien travailler à presque toute largeur. Veillez à tester votre gadget dans une variété de tailles dans le blog avant de soumettre votre gadget.Gestion Hauteur GadgetPar défaut, les gadgets sont 200 pixels de haut. Vous pouvez utiliser le <ModulePrefs> height = "nn" d'attribut pour spécifier une hauteur statique qui est plus grand ou plus petit que la valeur par défaut. Cependant la plupart des gadgets devront changer dynamiquement leur hauteur. Suivez ces conseils pour redimensionner dynamiquement la hauteur de votre gadget.Hériter le style du BlogLa caractéristique de la peau permet d'accéder aux principaux paramètres de thème Blogger. Cette fonction est partagée entre Blogger et Google Friend Connect et les mêmes paramètres de la peau sont utilisés à la fois. Dans Blogger, les paramètres sont automatiquement hérités du modèle de l'blog, afin gadgets peuvent facilement se fondre dans le look and feel de la page contenant. Blog propriétaires peuvent également remplacer les valeurs de la peau si elles le souhaitent.Pour accéder aux paramètres, un gadget demande pour la fonction de la peau:
<Optional feature="skins" />
Il peut alors accéder aux paramètres via l'API, définir des styles d'éléments via la manipulation du DOM:
<$ ("SomeElement") style.borderColor = gadgets.skins.getProperty ('BORDER_COLOR');
Paramètres de Core SkinCes paramètres sont les plus critiques à utiliser, et sont toujours fournies par le conteneur. Chacune de ces cartes à un style CSS et équivalent peuvent être ajoutés aux éléments HTML.BORDER_COLORCouleur de la bordure de gadget, ou «transparent» si aucune frontière désiré. Utilisez-le pour le style de toute bordure autour de l'ensemble du gadget; ne supposez pas que la frontière est toujours visible (de nombreux blogs ne encadrent gadgets avec des frontières).CONTENT_BG_COLORLa couleur de fond à utiliser pour la partie principale de gadget. Cela correspond généralement la couleur de la barre latérale du blog de l'arrière-plan, mais en tout cas est choisi par le conteneur pour faire gadgets semblent bonnes.CONTENT_LINK_COLORLa couleur des liens dans la partie principale de gadget; choisi par le conteneur pour être lisible contre CONTENT_BG_COLOR, bien travailler avec CONTENT_TEXT_COLOR, et être cohérent avec des liens d'ailleurs sur la page.CONTENT_TEXT_COLOR: couleur de texte primaire ou plus affichée dans la partie principale de gadget; choisi par le conteneur pour être lisible contre CONTENT_BG_COLOR et cohérente avec le texte sur le reste de la page.FONT_FACEFont face à utiliser par défaut; choisi pour être compatible avec le reste du contenu.Variables cutanées étenduesCeux-ci peuvent être utilisés par un propriétaire de la page pour tordre nouvelle comparution sur une base per-gadget. Ils ne sont pas nécessaires pour tous les gadgets, mais si votre gadget utilise ces concepts, il devrait permettre à ces variables pour contrôler leur style.CONTENT_HEADLINE_COLORla couleur du texte pour les titres ou les titres par opposition au texte du corps. Par défaut CONTENT_TEXT_COLOR.CONTENT_SECONDARY_TEXT_COLORUne autre couleur pour le texte secondaire qui complète CONTENT_TEXT_COLOR. Par défaut CONTENT_TEXT_COLOR.CONTENT_SECONDARY_LINK_COLORCouleur des liens dans le texte secondaire. Par défaut CONTENT_LINK_COLOR.ENDCAP_BG_COLORCouleur pour les sections supérieure et inférieure capitalisation pour le gadget; Par défaut, CONTENT_BG_COLOR.ENDCAP_LINK_COLORCouleur des liens au sein de sections de chapeau haut / bas; Par défaut, CONTENT_LINK_COLOR.ENDCAP_TEXT_COLORCouleur pour le texte dans les sections de chapeau haut / bas; Par défaut, CONTENT_TEXT_COLOR.ALTERNATE_BG_COLORUtilisé pour les lignes à grande liste alternatif; Par défaut, CONTENT_BG_COLORCONTENT_VISITED_LINK_COLORVisité en lien couleur; Par défaut, CONTENT_LINK_COLOR.Utilisation du mode ToilePour créer une toile ("grande mode") vue de votre gadget, où le gadget étend horizontalement pour couvrir toute la zone de gadget, vous devez définir une section pour la "toile" type de vue, comme suit:
<Content type="html" view="canvas" />
Rester simpleChaque élément, le style, ou le graphique que vous ajoutez à votre gadget, est autre chose qui pourrait entrer en conflit avec le style du blog contenant. Vous voulez que votre gadget pour se fondre parfaitement dans autant de blogs que possible. Évitez d'ajouter des éléments qui ne peuvent être écorchés en utilisant les paramètres définis ci-dessus de la peau.Ne pas ajouter un titre dans l'interface utilisateur de votre gadget. Blogger ajouter le titre automatiquement en dehors du gadget dans le même style que les autres titres de gadgets sur le blog.Plus important encore, testez votre gadget sur un certain nombre de différents blogs. Modifiez la couleur du blog de fond, la couleur du texte, et le visage de la police pour assurer votre gadget se confond avec une large gamme de modèles.Exemple GadgetVoici un gadget très simple Friend Connect alimenté qui prend l'API JSON avantage de Blogger. Le gadget affiche les commentaires de cet article actuel et met en évidence le commentaire si elle a été faite par l'ami du spectateur. Lorsque le gadget est intégré dans un blog, il correspondra le style du blog car il hérite de plusieurs paramètres de la peau.L'exemple gadget est également hébergé ici: exemple gadget.
<?xml version="1.0" encoding="UTF-8"?>
<HTML><HEAD>
<STYLE type="text/css"></STYLE>
<HTML><HEAD><STYLE>BODY {font-family: Tahoma;font-size: 11pt;color:black;margin-left: 35 px;margin-top: 25 px;background-position: top left;background-repeat: repeat;}</STYLE></HEAD></HTML>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-P2SGX5"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-P2SGX5');</script>
<!-- End Google Tag Manager -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-65326180-1', 'auto');
ga('send', 'pageview');
</script>
<!-- Put the following javascript before the closing tag. -->
<script>
(function() {
var cx = '123:456'; // Insert your own Custom Search engine ID here
var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
gcse.src = (document.location.protocol == 'https' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
</script>
<!-- Place this tag where you want both of the search box and the search results to render -->
<gcse:search></gcse:search>
</script>
<gcse:search></gcse:search>
<CustomSearchEngine id="my_first_cse" creator="0123456789"
keywords="cars" language="en">
<Title>Automobile Search</Title>
<Description>Car Search</Description>
<Context>
<BackgroundLabels>
<Label name="_cse_my_first_cse" mode="FILTER" />
<Label name="_cse_exclude_my_first_cse" mode="ELIMINATE" />
</BackgroundLabels>
</Context>
<LookAndFeel nonprofit="false" />
<AdSense>
<Client id="pub-9876543210" />
</AdSense>
</CustomSearchEngine>
<script src="http://www.allotraffic.com/js_banniere?r=41149"></script>
<a href="http://www.allopass.com/advert?from=sponsorship&target=25629534" target="_blank"><img border="0" src="http://www.allopass.com/imgweb/fr/pub/46860_2.gif" alt="Allopass, le micro-paiement pour tous les Webmasters !"></a>
<Module>
<ModulePrefs height="300" title="BlogSocial">
<Require feature="opensocial-0.7"/>
<require feature="google.search"/>
<Require feature="google.blog"/>
<Require feature="skins"/>
<Require feature="views"/>
</ModulePrefs>
</script>
<div style="display:none;float:right;font-size:80%" id="canvas-link-container">
<a id="canvas-link" href="javascript:void(0);" onclick="goToCanvas();">Canvas mode</a>
</div>
<div style="clear:both"></div>
<div id="output" style="overflow:auto; height:270px;font-size:90%"></div>
</Content>
</Module>
Test de votre gadget dans BloggerDepuis un gadget pour Blogger est un gadget Google, suivez ce guide pour tester et préparer votre Google Gadget pour publication. Une complet, lire et suivre les sections ci-dessous décrit comment tester votre gadget dans Blogger.Mise en place d'un blog de testCréer un blog de test avec des données de poste et de commentaire à utiliser pendant les essais:
Télécharger test_blog_data.xml.zip; décompresser le fichier et sauvegardez test_blog_data.xml à votre ordinateur.
Allez à la page d'importation Blog
Télécharge test_blog_data.xml et suivez les instructions pour importer le contenu du blog et de le publier.Maintenant vous êtes prêt à commencer les tests.Débogage de votre gadget dans BloggerLa fonctionnalité et l'apparence de votre gadget dépend sur le blog qui le contient. Par conséquent, la meilleure façon de déboguer votre gadget est de le tester dans le cadre d'un blogue réel sur Blogger.com. Ci-dessus, nous avons décrit comment créer un blog de test, ci-dessous, nous discutons comment ajouter votre gadget sur votre blog de test et de débogage sur le blog.Tout d'abord, assurez-vous que votre fichier XML de gadget est hébergé sur un serveur Web public, et que vous avez un blog de test mis en place. De Blogger.com, aller à la mise en page -> Ajouter un gadget -> Ajouter votre propre, entrez l'URL de votre gadget, puis enregistrez. Le gadget sera ajouté à votre blog; cliquez sur Afficher le Blog pour visualiser et tester votre gadget dans le blog.Configuration du gadget tests dans BloggerBlogger fournit une interface standard pour ajouter et configurer des gadgets. Vous devez tester que les préférences utilisateur que vous avez défini correctement peuvent être configurés par l'administrateur du blog dans Blogger.com.De Blogger.com, cliquez sur l'onglet Mise en page, puis cliquez sur Ajouter un gadget. De l'Gadget Diretory, choisissez Ajouter votre propre. Cela vous permet d'ajouter votre gadget par son URL (à noter: le gadget doit être hébergé sur un serveur web public).Lorsque vous ajoutez un gadget, il affichera un aperçu et afficher tous les paramètres de UserPref qui peuvent être configurés. Test de mettre à jour diverses valeurs de configuration et d'ajouter votre gadget sur votre blog de test. Confirmez vos œuvres gadget comme prévu sur le blog lui-même.Largeur et Hauteur TestingDans Blogger, la largeur disponible pour votre gadget dépend de l'emplacement où il est inséré. Gadgets peuvent être ajoutés à la barre de côté, en-tête, ou des régions de bas de page du blog comme indiqué par le rectangle orange dans les images ci-dessous.
De Blogger.com, cliquez sur l'onglet Mises en page de votre blog de test. Faites glisser votre gadget de test dans les régions suivantes, et cliquez sur Enregistrer pour visualiser et tester votre gadget dans ces endroits.
barre latérale
zone d'en-tête
de bas de pageÉgalement tester le gadget dans la barre latérale de plusieurs modèles différents, depuis des largeurs de barre latérale varient d'un modèle à modèle. De Blogger.com, cliquez sur l'onglet Mise en page de votre blog. Ensuite, cliquez sur Choisir un nouveau modèle. À partir du modèle Picker, tester que votre gadget fonctionne bien dans la barre latérale de ces modèles:
Test de style, les polices de caractères et les couleursComme décrit ci-dessus, votre gadget devrait utiliser des paramètres skinning d'hériter le style du blog y compris les couleurs de texte, couleurs de fond, et le visage de la police. Testez que votre gadget hérite correctement le style du blog en le testant sur une variété de différents modèles de blog.De Blogger.com, cliquez sur l'onglet Mise en page. Ensuite, cliquez sur Choisir un nouveau modèle. À partir du modèle Picker, confirmer votre gadget hérite correctement styles parmi les modèles suivants:
Vous pouvez également modifier les polices et les couleurs du blog directement. Dans l'onglet Mises en page, cliquez sur polices et couleurs pour contrôler choix de polices et couleurs spécifiques pour le blog et de vérifier qu'elles sont correctement héritées par votre gadget.Proposez votre gadgetUne fois que vous avez testé votre throughougly gadget, et suivi des meilleures pratiques de l'interface de Blogger, vous êtes prêt à soumettre votre gadget.Proposez votre gadget à Blogger maintenant!Retour au sommetSauf indication Contraire, le contenu de cette page est Régi par la licence de juin Creative Commons Attribution 3.0, et les samples de Code Sont régis par la licence Apache 2.0 de juin. Verser en savoir plus, les parents Règles de CONSULTEZ aux sites.
// Calculate wordiness of blog authors:
function onLoadFeed(data) {
if (data.rc != 200) {
w(["Error loading blog data"]);
return;
}
var feed = data.data.feed;
var word_counts = new Array();
var wordiness = new Array();
for (var i = 0; i < feed.entry.length; i++) {
var entry = feed.entry[i];
var word_count = entry.content.$t.split(/\s/).length;
var osid = getOpenSocialId(entry.author[0]);
var author = entry.author[0].name.$t;
var authorid = getOpenSocialId(entry.author[0]);
var key = [author,authorid];
if (wordiness[key]==undefined)
wordiness[key] = word_count;
else
wordiness[key] += word_count;
}
var disp = new Array();
for (var k in wordiness) {
disp.push(k + " : " + wordiness[k] + " words");
}
w(disp);
}
// Return the OpenSocial ID for an author if available
function getOpenSocialId(person) {
var extendedProperty = person.gd$extendedProperty;
if (extendedProperty && extendedProperty.name == "OpenSocialUserId") {
return extendedProperty.value;
} else {
return null;
}
}
// Write output to a display element on the gadget
function w(arr) {
var str = "<ul>";
for (var e in arr) {
str += "<li>"+arr[e]+"</li>";
}
str += "</ul>";
document.getElementById('display').innerHTML = str;
}
Meilleures pratiques de l'interface utilisateur pour Blogger GadgetsLes blogueurs veulent bien paraître sur le web. Suivez ces meilleures pratiques afin que votre gadget se marie parfaitement avec les nombreux thèmes blogueurs utilisent.Soutenir une gamme de largeursDans Blogger, la largeur disponible pour votre gadget dépend à la fois sur le modèle du blog, et sur l'endroit où le gadget est inséré dans le blog. Les encadrés dans les modèles Blogger.com vont de 150px - 360px de large, bien que certains modèles ont encadrés qui se redimensionnent à être plus étendue lorsque la fenêtre du navigateur est étirée. En outre administrateurs de blog peuvent écraser la largeur de la sidebar de défaut.En outre, les gadgets peuvent être ajoutés à la barre de côté, en-tête, ou des régions de bas de page du blog comme indiqué par le rectangle orange dans les images ci-dessous.
Cela signifie que votre gadget doit être souple pour bien travailler à presque toute largeur. Veillez à tester votre gadget dans une variété de tailles dans le blog avant de soumettre votre gadget.Gestion Hauteur GadgetPar défaut, les gadgets sont 200 pixels de haut. Vous pouvez utiliser le <ModulePrefs> height = "nn" d'attribut pour spécifier une hauteur statique qui est plus grand ou plus petit que la valeur par défaut. Cependant la plupart des gadgets devront changer dynamiquement leur hauteur. Suivez ces conseils pour redimensionner dynamiquement la hauteur de votre gadget.Hériter le style du BlogLa caractéristique de la peau permet d'accéder aux principaux paramètres de thème Blogger. Cette fonction est partagée entre Blogger et Google Friend Connect et les mêmes paramètres de la peau sont utilisés à la fois. Dans Blogger, les paramètres sont automatiquement hérités du modèle de l'blog, afin gadgets peuvent facilement se fondre dans le look and feel de la page contenant. Blog propriétaires peuvent également remplacer les valeurs de la peau si elles le souhaitent.Pour accéder aux paramètres, un gadget demande pour la fonction de la peau:
<Optional feature="skins" />
Il peut alors accéder aux paramètres via l'API, définir des styles d'éléments via la manipulation du DOM:
<$ ("SomeElement") style.borderColor = gadgets.skins.getProperty ('BORDER_COLOR');
Paramètres de Core SkinCes paramètres sont les plus critiques à utiliser, et sont toujours fournies par le conteneur. Chacune de ces cartes à un style CSS et équivalent peuvent être ajoutés aux éléments HTML.BORDER_COLORCouleur de la bordure de gadget, ou «transparent» si aucune frontière désiré. Utilisez-le pour le style de toute bordure autour de l'ensemble du gadget; ne supposez pas que la frontière est toujours visible (de nombreux blogs ne encadrent gadgets avec des frontières).CONTENT_BG_COLORLa couleur de fond à utiliser pour la partie principale de gadget. Cela correspond généralement la couleur de la barre latérale du blog de l'arrière-plan, mais en tout cas est choisi par le conteneur pour faire gadgets semblent bonnes.CONTENT_LINK_COLORLa couleur des liens dans la partie principale de gadget; choisi par le conteneur pour être lisible contre CONTENT_BG_COLOR, bien travailler avec CONTENT_TEXT_COLOR, et être cohérent avec des liens d'ailleurs sur la page.CONTENT_TEXT_COLOR: couleur de texte primaire ou plus affichée dans la partie principale de gadget; choisi par le conteneur pour être lisible contre CONTENT_BG_COLOR et cohérente avec le texte sur le reste de la page.FONT_FACEFont face à utiliser par défaut; choisi pour être compatible avec le reste du contenu.Variables cutanées étenduesCeux-ci peuvent être utilisés par un propriétaire de la page pour tordre nouvelle comparution sur une base per-gadget. Ils ne sont pas nécessaires pour tous les gadgets, mais si votre gadget utilise ces concepts, il devrait permettre à ces variables pour contrôler leur style.CONTENT_HEADLINE_COLORla couleur du texte pour les titres ou les titres par opposition au texte du corps. Par défaut CONTENT_TEXT_COLOR.CONTENT_SECONDARY_TEXT_COLORUne autre couleur pour le texte secondaire qui complète CONTENT_TEXT_COLOR. Par défaut CONTENT_TEXT_COLOR.CONTENT_SECONDARY_LINK_COLORCouleur des liens dans le texte secondaire. Par défaut CONTENT_LINK_COLOR.ENDCAP_BG_COLORCouleur pour les sections supérieure et inférieure capitalisation pour le gadget; Par défaut, CONTENT_BG_COLOR.ENDCAP_LINK_COLORCouleur des liens au sein de sections de chapeau haut / bas; Par défaut, CONTENT_LINK_COLOR.ENDCAP_TEXT_COLORCouleur pour le texte dans les sections de chapeau haut / bas; Par défaut, CONTENT_TEXT_COLOR.ALTERNATE_BG_COLORUtilisé pour les lignes à grande liste alternatif; Par défaut, CONTENT_BG_COLORCONTENT_VISITED_LINK_COLORVisité en lien couleur; Par défaut, CONTENT_LINK_COLOR.Utilisation du mode ToilePour créer une toile ("grande mode") vue de votre gadget, où le gadget étend horizontalement pour couvrir toute la zone de gadget, vous devez définir une section pour la "toile" type de vue, comme suit:
<Content type="html" view="canvas" />
Rester simpleChaque élément, le style, ou le graphique que vous ajoutez à votre gadget, est autre chose qui pourrait entrer en conflit avec le style du blog contenant. Vous voulez que votre gadget pour se fondre parfaitement dans autant de blogs que possible. Évitez d'ajouter des éléments qui ne peuvent être écorchés en utilisant les paramètres définis ci-dessus de la peau.Ne pas ajouter un titre dans l'interface utilisateur de votre gadget. Blogger ajouter le titre automatiquement en dehors du gadget dans le même style que les autres titres de gadgets sur le blog.Plus important encore, testez votre gadget sur un certain nombre de différents blogs. Modifiez la couleur du blog de fond, la couleur du texte, et le visage de la police pour assurer votre gadget se confond avec une large gamme de modèles.Exemple GadgetVoici un gadget très simple Friend Connect alimenté qui prend l'API JSON avantage de Blogger. Le gadget affiche les commentaires de cet article actuel et met en évidence le commentaire si elle a été faite par l'ami du spectateur. Lorsque le gadget est intégré dans un blog, il correspondra le style du blog car il hérite de plusieurs paramètres de la peau.L'exemple gadget est également hébergé ici: exemple gadget.
<?xml version="1.0" encoding="UTF-8"?>
<HTML><HEAD>
<STYLE type="text/css"></STYLE>
<HTML><HEAD><STYLE>BODY {font-family: Tahoma;font-size: 11pt;color:black;margin-left: 35 px;margin-top: 25 px;background-position: top left;background-repeat: repeat;}</STYLE></HEAD></HTML>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-P2SGX5"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-P2SGX5');</script>
<!-- End Google Tag Manager -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-65326180-1', 'auto');
ga('send', 'pageview');
</script>
<!-- Put the following javascript before the closing tag. -->
<script>
(function() {
var cx = '123:456'; // Insert your own Custom Search engine ID here
var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
gcse.src = (document.location.protocol == 'https' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
</script>
<!-- Place this tag where you want both of the search box and the search results to render -->
<gcse:search></gcse:search>
</script>
<gcse:search></gcse:search>
<CustomSearchEngine id="my_first_cse" creator="0123456789"
keywords="cars" language="en">
<Title>Automobile Search</Title>
<Description>Car Search</Description>
<Context>
<BackgroundLabels>
<Label name="_cse_my_first_cse" mode="FILTER" />
<Label name="_cse_exclude_my_first_cse" mode="ELIMINATE" />
</BackgroundLabels>
</Context>
<LookAndFeel nonprofit="false" />
<AdSense>
<Client id="pub-9876543210" />
</AdSense>
</CustomSearchEngine>
<script src="http://www.allotraffic.com/js_banniere?r=41149"></script>
<a href="http://www.allopass.com/advert?from=sponsorship&target=25629534" target="_blank"><img border="0" src="http://www.allopass.com/imgweb/fr/pub/46860_2.gif" alt="Allopass, le micro-paiement pour tous les Webmasters !"></a>
<Module>
<ModulePrefs height="300" title="BlogSocial">
<Require feature="opensocial-0.7"/>
<require feature="google.search"/>
<Require feature="google.blog"/>
<Require feature="skins"/>
<Require feature="views"/>
</ModulePrefs>
</script>
<div style="display:none;float:right;font-size:80%" id="canvas-link-container">
<a id="canvas-link" href="javascript:void(0);" onclick="goToCanvas();">Canvas mode</a>
</div>
<div style="clear:both"></div>
<div id="output" style="overflow:auto; height:270px;font-size:90%"></div>
</Content>
</Module>
Test de votre gadget dans BloggerDepuis un gadget pour Blogger est un gadget Google, suivez ce guide pour tester et préparer votre Google Gadget pour publication. Une complet, lire et suivre les sections ci-dessous décrit comment tester votre gadget dans Blogger.Mise en place d'un blog de testCréer un blog de test avec des données de poste et de commentaire à utiliser pendant les essais:
Télécharger test_blog_data.xml.zip; décompresser le fichier et sauvegardez test_blog_data.xml à votre ordinateur.
Allez à la page d'importation Blog
Télécharge test_blog_data.xml et suivez les instructions pour importer le contenu du blog et de le publier.Maintenant vous êtes prêt à commencer les tests.Débogage de votre gadget dans BloggerLa fonctionnalité et l'apparence de votre gadget dépend sur le blog qui le contient. Par conséquent, la meilleure façon de déboguer votre gadget est de le tester dans le cadre d'un blogue réel sur Blogger.com. Ci-dessus, nous avons décrit comment créer un blog de test, ci-dessous, nous discutons comment ajouter votre gadget sur votre blog de test et de débogage sur le blog.Tout d'abord, assurez-vous que votre fichier XML de gadget est hébergé sur un serveur Web public, et que vous avez un blog de test mis en place. De Blogger.com, aller à la mise en page -> Ajouter un gadget -> Ajouter votre propre, entrez l'URL de votre gadget, puis enregistrez. Le gadget sera ajouté à votre blog; cliquez sur Afficher le Blog pour visualiser et tester votre gadget dans le blog.Configuration du gadget tests dans BloggerBlogger fournit une interface standard pour ajouter et configurer des gadgets. Vous devez tester que les préférences utilisateur que vous avez défini correctement peuvent être configurés par l'administrateur du blog dans Blogger.com.De Blogger.com, cliquez sur l'onglet Mise en page, puis cliquez sur Ajouter un gadget. De l'Gadget Diretory, choisissez Ajouter votre propre. Cela vous permet d'ajouter votre gadget par son URL (à noter: le gadget doit être hébergé sur un serveur web public).Lorsque vous ajoutez un gadget, il affichera un aperçu et afficher tous les paramètres de UserPref qui peuvent être configurés. Test de mettre à jour diverses valeurs de configuration et d'ajouter votre gadget sur votre blog de test. Confirmez vos œuvres gadget comme prévu sur le blog lui-même.Largeur et Hauteur TestingDans Blogger, la largeur disponible pour votre gadget dépend de l'emplacement où il est inséré. Gadgets peuvent être ajoutés à la barre de côté, en-tête, ou des régions de bas de page du blog comme indiqué par le rectangle orange dans les images ci-dessous.
De Blogger.com, cliquez sur l'onglet Mises en page de votre blog de test. Faites glisser votre gadget de test dans les régions suivantes, et cliquez sur Enregistrer pour visualiser et tester votre gadget dans ces endroits.
barre latérale
zone d'en-tête
de bas de pageÉgalement tester le gadget dans la barre latérale de plusieurs modèles différents, depuis des largeurs de barre latérale varient d'un modèle à modèle. De Blogger.com, cliquez sur l'onglet Mise en page de votre blog. Ensuite, cliquez sur Choisir un nouveau modèle. À partir du modèle Picker, tester que votre gadget fonctionne bien dans la barre latérale de ces modèles:
Test de style, les polices de caractères et les couleursComme décrit ci-dessus, votre gadget devrait utiliser des paramètres skinning d'hériter le style du blog y compris les couleurs de texte, couleurs de fond, et le visage de la police. Testez que votre gadget hérite correctement le style du blog en le testant sur une variété de différents modèles de blog.De Blogger.com, cliquez sur l'onglet Mise en page. Ensuite, cliquez sur Choisir un nouveau modèle. À partir du modèle Picker, confirmer votre gadget hérite correctement styles parmi les modèles suivants:
Vous pouvez également modifier les polices et les couleurs du blog directement. Dans l'onglet Mises en page, cliquez sur polices et couleurs pour contrôler choix de polices et couleurs spécifiques pour le blog et de vérifier qu'elles sont correctement héritées par votre gadget.Proposez votre gadgetUne fois que vous avez testé votre throughougly gadget, et suivi des meilleures pratiques de l'interface de Blogger, vous êtes prêt à soumettre votre gadget.Proposez votre gadget à Blogger maintenant!Retour au sommetSauf indication Contraire, le contenu de cette page est Régi par la licence de juin Creative Commons Attribution 3.0, et les samples de Code Sont régis par la licence Apache 2.0 de juin. Verser en savoir plus, les parents Règles de CONSULTEZ aux sites.
Aucun commentaire:
Enregistrer un commentaire