vendredi 3 octobre 2014

Comment installer Open Graph Facebook dans Blogger



Balises Open Graph peuvent être inclus dans le code HTML de votre page pour permettre à Facebook de générer de meilleurs aperçus lorsque votre contenu est partagé sur Facebook.

Comment installer Open Graph Facebook dans Blogger


Ajouter les balises Open Graph



Trouver la balise <head> balise d'ouverture.
Placez le code suivant immédiatement just apret la balise <head> :


<!-- BEGIN Open Graph tags -->
<meta expr:content='data:blog.metaDescription' name='description' property='og:description'/>
<meta content='YOUR_FACEBOOK_APP_ID' property='fb:app_id'/>
<meta content='FB_ADMIN_ID' property='fb:admins'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='URL-FOR-IMAGE-YOU-WANT-TO-USE-IF-THERE-IS-NOT-A-THUMBNAIL-PHOTO-IN-THE-POST' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.canonicalHomepageUrl' property='og:url'/>
<meta content='blog' property='og:type'/>
<meta content='URL-FOR-IMAGE-YOU-WANT-TO-USE-IF-THERE-IS-NOT-A-THUMBNAIL-PHOTO-IN-THE-POST' property='og:image'/>
</b:if>
<meta expr:content='&quot;fr_FR&quot;' property='og:locale'/>
<!-- END Open Graph tags -->


voir developers.facebook pour plus d'informations

dimanche 20 avril 2014

Personaliser le model de mon blog blogger

Introsuction

Pour personaliser le model de notre blog on peut soit utiliser un model proposer par blogger et on a donc la possibilité de modifier directement le style de notre blog (allez à : Model › personaliser), soit télécharger un model proposer par d'autre site ou utiliser un model d'un autre blog qui nous appartient ... En première partie on va s'intéresser à comment télécharger le fichier xml de model d'un blog pour l'utiliser pour d'autre blog, et en deuxieme partie comment changer notre model avec le fichier xml, Déjà télécharger.

Télécharger le model d'un blog blogger

Notre blog Blogger › Modèle

Personaliser le theme de blog blogger

Notre blog Blogger › Modèle

Comment changer l'adresse de mon blog sans perdre mes lecteurs

Etape 1: Exporter les articles de votre ancien blog

la première étape consiste à exporter tout les articles de l'ancien blog dans un fichier XML pour les importer dans votre nouveau blog

Ancien blog Blogger › Paramètres › Autre

Exporter les articles de blogger

Etape 2: Télécharger le theme de votre ancien blog

Ancien blog Blogger › Modèle

Etape 3: créer un nouveau blog

choisissez une adresse convenable pour le nouveau blog

Etape 4: Inporter les articles vers le nouveau blog

Nouveau blog Blogger › Paramètres › Autre

Inporter articles blogger

Etape 5: personaliser le theme de votre Nouveau blog

Nouveau blog Blogger › Modèle

Etape 6: Gener le code de redirection

pour obtenir votre code visitez ce [ generateur ]

Etape 7: collez le code dans l'ancien blog

Ancien blog Blogger › Modèle › Modifier le code HTML

Test de fonctionnement

visitez n'importe quel article de votre ancien blog et vous serez rediger vers le même article mais dans le nouveau blog

Sauvegarder tout les articles de mon blog

Exporter tout les articles de l'ancien blog dans un fichier XML pour les importer dans notre nouveau blog

Exporter les articles de blogger
telecharger le fichier XML

samedi 19 avril 2014

Caractères spéciaux et entités HTML

Caractères spéciaux et entités HTML

Caractères généraux

Monnaies


Monnaies
caractèrecode textecode numériquecommentairecompatibilité
¤&curren;&#164;symbole monnaitaireNS3
&euro;&#128;euro (monnaie européenne)NS4
$$&#36;dollar (monnaie américaine)
¢&cent;&#162;cent (monnaie américaine)NS3
£&pound;&#163;pound (Livre sterling, monnaie anglaise)NS3
¥&yen;&#165;yen (monnaie japonaise)NS3
ƒ&fnof;&#402;florin (idem fonction)

Caractères alphabétiques accentués et spéciaux

Caractères alphabétiques accentués et spéciaux
caractèrecode textecode numériquecommentairecompatibilité
á&aacute;&#225;NS1
Á&Aacute;&#193;NS1
â&acirc;&#226;NS1
Â&Acirc;&#194;NS1
à&agrave;&#224;NS1
À&Agrave;&#192;NS1
å&aring;&#229;NS1
Å&Aring;&#197;NS1
ã&atilde;&#227;NS1
Ã&Atilde;&#195;NS1
ä&auml;&#228;NS1
Ä&Auml;&#196;NS1
æ&aelig;&#230;NS1
Æ&AElig;&#198;NS1
ç&ccedil;&#231;NS1
Ç&Ccedil;&#199;NS1
é&eacute;&#233;NS1
É&Eacute;&#201;NS1
ê&ecirc;&#234;NS1
Ê&Ecirc;&#202;NS1
è&egrave;&#232;NS1
È&Egrave;&#200;NS1
ë&euml;&#235;NS1
Ë&Euml;&#203;NS1
í&iacute;&#237;NS1
Í&Iacute;&#205;NS1
î&icirc;&#238;NS1
Î&Icirc;&#206;NS1
ì&igrave;&#236;NS1
Ì&Igrave;&#204;NS1
ï&iuml;&#239;NS1
Ï&Iuml;&#207;NS1
ñ&ntilde;&#241;NS1
Ñ&Ntilde;&#209;NS1
ó&oacute;&#243;NS1
Ó&Oacute;&#211;NS1
ô&ocirc;&#244;NS1
Ô&Ocirc;&#212;NS1
ò&ograve;&#242;NS1
Ò&Ograve;&#210;NS1
ø&oslash;&#248;NS1
Ø&Oslash;&#216;NS1
õ&otilde;&#245;NS1
Õ&Otilde;&#213;NS1
ö&ouml;&#246;NS1
Ö&Ouml;&#214;NS1
œ&oelig;&#339;ligature minuscule latine oepas NS4
Œ&OElig;&#338;ligature majuscule latine OEpas NS4
š&scaron;&#353;lettre minuscule latine s avec caronpas NS4
Š&Scaron;&#352;lettre majuscule latine S avec caronpas NS4
ß&szlig;&#223;lettre minuscule allemande s durNS1
ð&eth;&#240;lettre minuscule islandaise edNS1
Ð&ETH;&#208;lettre majuscule islandaise EDNS1
þ&thorn;&#254;lettre minuscule islandaise thornNS1
Þ&THORN;&#222;lettre majuscule islandaise ThornNS1
ú&uacute;&#250;NS1
Ú&Uacute;&#218;NS1
û&ucirc;&#251;NS1
Û&Ucirc;&#219;NS1
ù&ugrave;&#249;NS1
Ù&Ugrave;&#217;NS1
ü&uuml;&#252;NS1
Ü&Uuml;&#220;NS1
ý&yacute;&#253;NS1
Ý&Yacute;&#221;NS1
ÿ&yuml;&#255;NS1
Ÿ&Yuml;&#376;pas NS4

Alphabet Grec

Les polices nécessaires ne sont pas installées par défaut dans Windows 98.
Alphabet Grec
caractèrecode textecode numériquecommentairecompatibilité
α&alpha;&#945;alpha
Α&Alpha;&#913;Alpha
β&beta;&#946;beta
Β&Beta;&#914;Beta
γ&gamma;&#947;gamma
Γ&Gamma;&#915;Gamma
δ&delta;&#948;delta
Δ&Delta;&#916;Delta
ε&epsilon;&#949;epsilon
Ε&Epsilon;&#917;Epsilon
ζ&zeta;&#950;zeta
Ζ&Zeta;&#918;Zeta
η&eta;&#951;eta
Η&Eta;&#919;Eta
θ&theta;&#952;theta
Θ&Theta;&#920;Theta
ι&iota;&#953;iota
Ι&Iota;&#921;Iota
κ&kappa;&#954;kappa
Κ&Kappa;&#922;Kappa
λ&lambda;&#955;lambda
Λ&Lambda;&#923;Lambda
μ&mu;&#956;mu
Μ&Mu;&#924;Mu
ν&nu;&#957;nu
Ν&Nu;&#925;Nu
ξ&xi;&#958;xi
Ξ&Xi;&#926;Xi
ο&omicron;&#959;omicron
Ο&Omicron;&#927;Omicron
π&pi;&#960;pi
Π&Pi;&#928;Pi
ρ&rho;&#961;rho
Ρ&Rho;&#929;Rho
σ&sigma;&#963;sigma
ς&sigmaf;&#962;sigma final
Σ&Sigma;&#931;Sigma
τ&tau;&#964;tau
Τ&Tau;&#932;Tau
υ&upsilon;&#965;upsilon
Υ&Upsilon;&#933;Upsilon
φ&phi;&#966;phi
Φ&Phi;&#934;Phi
χ&chi;&#967;chi
Χ&Chi;&#935;Chi
ψ&psi;&#968;psi
Ψ&Psi;&#936;Psi
ω&omega;&#969;omega
Ω&Omega;&#937;Omega

Sciences

Sciences
caractèrecode textecode numériquecommentairecompatibilité
°&deg;&#176;degréNS3
µ&micro;&#181;mu (lettre grecque)NS3
<&lt;&#60;inférieur (less-than)XML, NS1
>&gt;&#62;supérieur (greater-than)XML, NS1
&le;&#8804;inférieur ou égal (less or equal)pas IE5
&ge;&#8805;supérieur ou égal (greater or equal)pas IE5
==&#61;égal
&asymp;&#8776;presque égal (asymptotic)pas IE5
&ne;&#8800;différent (not equal)pas IE5
&equiv;&#8801;équivalentpas IE5
±&plusmn;&#177;plus-ou-moinsNS3
&minus;&#8722;moinspas IE5
++&#43;plus
×&times;&#215;multiplicationNS3
÷&divide;&#247;divisionNS3
&frasl;&#8260;fractionpas IE5
%%&#37;pour cent
&permil;&#8240;pour millepas Amaya8
¼&frac14;&#188;un quartNS3
½&frac12;&#189;un demiNS3
¾&frac34;&#190;trois quartsNS3
¹&sup1;&#185;exposant 1NS3
²&sup2;&#178;exposant 2NS3
³&sup3;&#179;exposant 3NS3
º&ordm;&#186;indicateur ordinal masculinNS3
ª&ordf;&#170;indicateur ordinal fémininNS3
ƒ&fnof;&#402;fonction (idem florin)
&prime;&#8242;prime, minutes, dérivéepas IE5
&Prime;&#8243;double prime, secondes, dérivée secondepas IE5
&part;&#8706;dérivée partiellepas IE5
&prod;&#8719;produit n-airepas IE5
&sum;&#8721;somme n-airepas IE5
&radic;&#8730;racine carréepas IE5
&infin;&#8734;infinipas IE5
¬&not;&#172;crochet de négationNS3
&cap;&#8745;intersectionpas IE5
&int;&#8747;intégralepas IE5
 
caractèrecode textecode numériquecommentairecompatibilité
&nbsp;&#160;espace insécableNS1

&shy;&#173;tiret de césure optionnelle
(permet au navigateur de couper le mot
au bon endroit si besoin de passer à la ligne)
&lrm;&#8206;marque gauche-à-droitepas Win98
&rlm;&#8207;marque droite-à-gauchepas Win98
"&quot;&#34;guillemet anglais, guillemet droit (quote)XML, NS1
«&laquo;&#171;guillemet français ouvrantNS3
»&raquo;&#187;guillemet français fermantNS3
&lsaquo;&#8249;guillemet français simple ouvrant
&rsaquo;&#8250;guillemet français simple fermant
&ldquo;&#8220;guillemet double ouvrant, guillemet-apostrophe double culbuté
&rdquo;&#8221;guillemet double fermant, guillemet-apostrophe double
&bdquo;&#8222;guillemet double fermant bas, guillemet-virgule double inférieur
'&apos;&#39;guillemet simple droitXML
&lsquo;&#8216;guillemet simple ouvrant, guillemet-apostrophe culbuté
&rsquo;&#8217;guillemet simple fermant, guillemet-apostrophe
&sbquo;&#8218;guillemet simple fermant bas, guillemet-virgule inférieur
&hellip;&#8230;points de suspension
!!&#33;point d’exclamation
¡&iexcl;&#161;point d’exclamation inverséNS3
??&#63;point d’interrogation
¿&iquest;&#191;point d’interrogation inverséNS3
((&#40;parenthése ouvrante
))&#41;parenthése fermante
[[&#91;crochet ouvrant
]]&#93;crochet fermant
{{&#123;accolade ouvrante
}}&#125;accolade fermante
¨&uml;&#168;trémaNS3
´&acute;&#180;accent aiguNS3
``&#96;accent grave
^^&#94;accent circonflexe
ˆ&circ;&#710;accent circonflexe
~~&#126;tilde
˜&tilde;&#732;petit tilde
¸&cedil;&#184;cédilleNS3
##&#35;dièse
**&#42;étoile
,,&#44;virgule
..&#46;point
::&#58;deux-points
;;&#59;point-virgule
·&middot;&#183;point médianNS3, pas Win98
&bull;&#8226;gros point médian
¯&macr;&#175;macronNS3
&oline;&#8254;tiret en chef (overline, spacing overscore)pas IE5, pas Amaya8, pas Win98
--&#45;tiret, tiret quart-cadratin, tiret de mots composés
&ndash;&#8211;tiret demi-cadratin, tiret d’incise
&mdash;&#8212;tiret cadratin, tiret de dialogue
__&#95;tiret bas (underscore)
||&#124;séparateur vertical (pipe)
¦&brvbar;&#166;barre verticale scindéeNS3
&zwnj;&#8204;antiliant sans chassepas Win98
&zwj;&#8205;liant sans chassepas Win98
&dagger;&#8224;obèlepas Amaya8
&Dagger;&#8225;double obèlepas Amaya8
§&sect;&#167;sectionNS3
&para;&#182;paragrapheNS3
©&copy;&#169;copyrightNS1
®&reg;&#174;marque déposéeNS1
&trade;&#8482;marque commerciale (trade mark)
&&amp;&#38;et commercial, esperluette, ampersandXML, NS1
@@&#64;arobase (chez)
//&#47;diviser (slash)
\\&#92;anti-slash
&loz;&#9674;losangepas IE5
&spades;&#9824;pique noirpas IE5
&clubs;&#9827;trèfle noirpas IE5
&hearts;&#9829;cœur noirpas IE5
&diams;&#9830;carreau noirpas IE5
&larr;&#8592;flèche vers la gauchepas IE5
&uarr;&#8593;flèche vers le hautpas IE5
&rarr;&#8594;flèche vers la droitepas IE5
&darr;&#8595;flèche vers le baspas IE5
&harr;&#8596;flèche bilatérale gauche-droitepas IE5

vendredi 18 avril 2014

Blogger – Guide de démarrage

Pour commencer, il vous suffit de vous connecter à Blogger à l'aide de votre compte Google. (Si vous utilisez Gmail, Google Groupes ou orkut, vous disposez déjà d'un compte.) Si vous ne possédez pas encore de compte Google, vous pouvez en créer un.

Table des matières

  1. Création d'un blog
  2. Tableau de bord
  3. Vue d'ensemble
  4. Élaboration d'un article
  5. Ajout d'une image
  6. Ajout d'une vidéo
  7. Personnalisation
  8. Confidentialité et autorisations

Création d'un blog
Pour commencer un blog avec Blogger, visitez la page d'accueil de Blogger, saisissez vos nom d'utilisateur et mot de passe, puis cliquez sur Connexion. Saisissez un nom à afficher et acceptez les conditions d'utilisation. Puis, cliquez sur le lien Créer un blog et commencez !
Choisissez une adresse (URL) et un titre pour votre blog. Sélectionnez votre modèle favori (il détermine l'aspect de votre blog lorsque vous le publiez). Soyez créatif, ajoutez des informations sur votre profil et personnalisez l'aspect de votre blog en suivant votre inspiration. Et maintenant, écrivez votre blog !

Tableau de bord

Le tableau de bord reste votre point d'ancrage, cela n'a pas changé. C'est là que vos blogs sont regroupés, accompagnés d'icônes permettant d'effectuer différentes actions :
Créer un article : un clic sur l'icône orange représentant un crayon permet d'accéder à l'éditeur d'articles.
Afficher les articles : l'icône grise ouvre la liste des articles publiés ou encore à l'état de brouillons pour un blog donné.
Liste de lecture : sous la liste de vos blogs, nous vous présentons les blogs auxquels vous êtes abonné, avec un extrait des derniers articles publiés.


Autres liens : cliquez sur la flèche déroulante qui jouxte l'icône de la liste des articles pour afficher les liens d'accès rapide à ces options :
Vue d'ensemble
Articles
Pages
Commentaires
Statistiques
Gains
Mise en page
Modèle
Paramètres

Notez que l'onglet "Gains" n'apparaît dans la liste que si votre langue est acceptée dans AdSense.

L'onglet Vue d'ensemble présente l'activité de votre blog, les nouveautés et les conseils de l'équipe Blogger. Vous pouvez également cliquer sur "Blogs récents intéressants" pour découvrir de nouveaux blogs.
Une fois que vous êtes connecté à Blogger, la liste de vos blogs s'affiche dans votre tableau de bord. Procédez comme suit :
Cliquez sur l'icône représentant un crayon orange pour créer un nouvel article dans lequel vous écrirez tout ce que vous avez envie de faire partager aux autres.
L'éditeur d'articles s'affiche. Choisissez un titre (facultatif), puis commencez la rédaction :

Lorsque vous avez terminé, cliquez sur le bouton Aperçu en haut de l'éditeur pour vérifier que l'article peut être publié en l'état. Cliquez ensuite sur le bouton Publier.

Ajout d'une image

Vous pouvez ajouter une image de votre ordinateur ou du Web sur votre blog. Cliquez sur l'icône d'image dans la barre d'outils de l'éditeur d'articles. Une fenêtre vous invite à parcourir votre disque dur pour accéder à un fichier image ou à entrer l'URL d'une image provenant du Web.
Sélectionnez l'image, puis choisissez une mise en page afin de définir l'emplacement où elle s'affichera dans votre article :
Les options "Gauche", "Centrer" et "Droite" vous permettent de personnaliser l'affichage du texte autour de l'image.
Les options "Taille de l'image" déterminent sa taille d'affichage dans l'article.
Cliquez sur ENVOYER DES IMAGES pour ajouter votre image, puis sur TERMINÉ lorsque la fenêtre de confirmation vous indique "Votre image a été ajoutée." Blogger vous renvoie ensuite à l'éditeur dans lequel votre image apparaît prête à être publiée sur votre blog.
Vous pouvez également publier des images sur votre blog à l'aide de votre appareil mobile, du logiciel de photos gratuit de Google Picasa ou d'un service tiers tel que flickr.

Ajout d'une vidéo

Pour insérer une vidéo dans votre article, cliquez sur l'icône représentant une pellicule dans la barre d'outils de l'éditeur, au-dessus de la zone de rédaction. Une fenêtre vous invite à ajouter une vidéo à votre article.
Cliquez sur Parcourir pour sélectionner le fichier vidéo à transférer à partir de votre ordinateur. Blogger accepte les fichiers AVI, MPEG, QuickTime, Real et Windows Media à condition que leur taille soit inférieure à 100 Mo.
Avant de transférer la vidéo, ajoutez un titre dans le champ "Titre de la vidéo" et acceptez les conditions d'utilisation (cela vous sera uniquement demandé lors du premier transfert avec Blogger). Cliquez ensuite sur TRANSFÉRER UNE VIDÉO.
Lors du transfert, un espace réservé indique l'emplacement de la vidéo dans l'éditeur. Un message d'état s'affiche également sous l'éditeur afin de vous indiquer que le transfert est en cours. Le temps d'attente varie en fonction de la taille de la vidéo ; il est généralement de cinq minutes environ. Une fois le transfert terminé, votre vidéo apparaît dans l'éditeur.

Personnalisation

Votre modèle vous permet de personnaliser votre blog de manière amusante. À la création d'un blog, vous êtes invité à choisir un modèle par défaut, qui constitue le design de base de votre blog. De nombreux modèles sont disponibles : il vous suffit de choisir celui qui vous convient le mieux.


Dans l'onglet Modèle, vous pouvez cliquer sur le bouton orange Personnaliser pour accéder à l'outil de création de modèles intuitif. Vous pouvez également choisir l'un des nombreux modèles par défaut proposés. Pour modifier le code HTML de votre blog, cliquez sur le bouton gris Modifier le code HTML.
Vous pouvez également personnaliser l'aspect de votre blog à l'aide de l'interface glisser-déposer intuitive, ou encore ajouter des gadgets très utiles, tels que des diaporamas, des sondages d'utilisateurs et même des annonces AdSense. Si vous souhaitez maîtriser davantage l'aspect de votre blog, vous pouvez également utiliser la fonction "Modifier le code HTML". Pour changer la mise en page de votre blog, procédez comme suit :

Cliquez sur Mise en page dans le menu déroulant de votre tableau de bord au-dessous du blog à personnaliser.
De là, cliquez sur Modifier pour modifier les gadgets existants ou sur Ajouter un gadget pour en ajouter de nouveaux.
Après avoir cliqué sur Ajouter un gadget, il vous suffit de cliquer sur le signe plus en regard du gadget à ajouter. Vous pouvez choisir des gadgets par catégorie ou rechercher un gadget spécifique dans la partie supérieure droite de la fenêtre pop-up.

Après avoir donné les informations nécessaires pour le gadget sélectionné, cliquez sur Enregistrer la disposition. Les modifications apportées à la mise en page sont visibles immédiatement.
Par défaut, votre blog est entièrement public et peut être lu par tous les internautes. Vous avez également la possibilité de créer un blog privé. Ces paramètres peuvent être modifiés sur la page Paramètres | Basique.

Pour l'intitulé "Lecteurs du blog", l'option "Tous" est généralement sélectionnée. Lorsque vous activez l'option "Uniquement ces lecteurs", un bouton Ajouter des lecteurs apparaît.
Entrez l'adresse e-mail de la personne à laquelle vous souhaitez autoriser l'accès à votre blog, puis cliquez sur Ajouter des lecteurs. Pour ajouter plusieurs personnes, séparez les adresses par des virgules.
Le compte Google associé à chaque adresse entrée sera autorisé à consulter votre blog. Si une adresse n'est associée à aucun compte, cette personne recevra un e-mail contenant un lien l'invitant à effectuer l'une des trois actions suivantes :
Se connecter à l'aide d'un compte existant.
Créer un compte.
Consulter votre blog en tant qu'invité.

Fourni par Blogger.