Création de blogs – Rohan Graeffly - 2012-13 1. Généralités Un « blog » (en français blogue, journal web ou carnet web) est un site internet personnel permettant à un internaute de publier facilement et simplement des informations en ligne sous forme de journal. Le terme « blog » est la contraction de « weblog » (au même titre, «blogue» est la contraction de «weblogue»). Le blog est donc une page web, s'appuyant généralement sur un outil dynamique permettant de gérer la mise en page du contenu, dans laquelle son auteur publie des actualités, des liens vers des sites web ou de courts textes de sa création. Sur un blog, les brèves, appelées notes ou billets, sont publiées dans un ordre antéchronologique, c'est-à-dire que les billets les plus récents sont affichés en haut de page, puis suivent les messages les plus anciens. Ce qui fait la particularité d'un blog par rapport à un site web, c'est la possibilité pour les lecteurs de réagir aux informations publiées, ce qui fournit aux blogs une grande réactivité et une grande richesse. 1.1 Les différents types de blog : petit tour d'horizon Il existe de nombreux types de blog qui vont du plus généraliste à des thèmes bien précis. Si vous désirez créer un blog qui touche à un domaine bien particulier, il est alors intéressant de le créer au près d'une communauté qui à les même centre d'intérêts que vous ! Voici une liste non exhaustive des différents types de blogs que l'on peut rencontrer et leur spécificité.

1

Blog Généraliste / Actualité Il s'agit de blog où vous ne parlez pas de thèmes bien particuliers mais plutôt généraliste ou dans lesquels vous parlez de l'actualité. La plupart des hébergeurs de blog sont généralistes. OverBlog: http://www.over-blog.com/ Blogger: http://www.blogger.com/ Vox: http://www.vox.com/ Myspace: http://signup.myspace.com/index.cfm?fuseaction=join WindowsLiveSpaces: http://get.live.com/ SpaceBlogs: http://www.space-blogs.com Blog Jeunes / Ados Ce type de plate-forme de blog à pour vocation de réunir en majorité de jeunes bloggeurs. SkyBlog: http://www.skyrock.com/m/account/subscribe.php Myspace: http://signup.myspace.com/index.cfm?fuseaction=join Bloguez: http://www.bloguez.com Blog privé / Journal Intime Les blogs privés vous permettent de créer un blog dont tout ou une partie peut être restreint à certains utilisateurs ou à tout le monde. On qualifie ce type de blog de journal intime. Blogger: http://www.blogger.com/ Blogorama: http://www.blogorama.fr/ Blogger: http://www.blogger.com/ Vox: http://www.vox.com/ Myspace: http://signup.myspace.com/index.cfm?fuseaction=join Blog Voyage, Blog Cuisine, Blog Art / Création / Déco, Blog Bébé / Naissances, Blog Foot, Blog Sports / Activités, Blog Mariage, Blog Musique, Blog Photo, Blog Sorties / Evènements, ETC...

2

2.Comment créer son blog Il existe deux possibilités de créer un blog, soit en passant par un hébergeur ou en passant par un CMS (Content Management System ou système de gestion de contenu en français) pour blog. 2.2 Les hébergeurs de blog: principes de fonctionnement Les hébergeurs de blog vous permettent d'obtenir un blog sans aucune connaissance en programmation ou autres considérations techniques qui peuvent démotiver les novices. Le principe est simple : vous vous inscrivez à une plate-forme qui vous propose d'héberger votre blog. Ce service peut être gratuit ou payant. Chacun de ces hébergeurs proposent des services qui sont divers et variés, mais la plupart des services gratuits qui vous sont proposés sont suffisants pour avoir un blog avec des fonctionnalités de base. Il existe différents types de plate-forme de blog, certaines hébergent des blogs généralistes et d'autres hébergent uniquement des blogs sur des thèmes bien spécifiques. Par rapport aux CMS pour blog, les hébergeurs de blog permettent d'obtenir un blog beaucoup plus rapidement. En effet, après vous être inscrit, votre blog est créé et est déjà prêt à l'emploi. Mais vous l'imaginez bien, cela ne va pas sans inconvénient, car par rapport aux CMS pour blog les hébergeurs de blogs sont beaucoup moins flexibles et proposent des fonctionnalités limités, alors qu'avec un CMS vous pourrez étendre au grès de vos envies les fonctionnalités de votre blog. Avant de se lancer dans la création d'un blog chez un hébergeur de blog, il faut donc se poser certaines questions afin d'être sûr que vous ne vous trompez pas. 2.3 Les CMS pour blog : principes et fonctionnement Contrairement aux hébergeurs de blog, les CMS (Content Management System ou système de gestion de contenu en français) pour blog nécessitent de bien vouloir se plonger dans des détails techniques (si vous êtes novice cela ne doit pas vous décourager, avec un peu de volonté on y arrive facilement : plusieurs tutoriels sont disponibles sur ce site pour vous guider) afin de pouvoir mettre en ligne son blog. Le grand avantage des CMS par rapport aux hébergeurs de blog est que vous disposez d'une plus grande liberté et que vous pouvez étendre les fonctionnalités de votre blog comme bon vous semble. Avec une telle solution vous aurez aussi votre propre nom de domaine ! Les CMS sont pour la grande majorité gratuits et Open Source c'est-à-dire que vous pouvez accéder au code et le modifier si vous le souhaitez, mais cela n'est pas toujours indispensable, ces solutions sont conçues pour que tout le monde puisse y arriver sans forcément disposer de connaissances techniques pointues. Il s'agit donc de logiciels gratuits que vous devrez installer sur un serveur d'hébergement (qui lui peut être payant ou gratuit) afin que vous puissiez l'utiliser.

3

Même si le mode d'installation diffère d'une solution à une autre, généralement tout est fait pour vous guider: ces solutions proposent généralement des installateurs qui vous guident étape par étape. Les CMS pour blog vous conviendront donc surtout si vous avez une idée bien précise en tête pour votre blog ou que vous savez par avance que votre blog comprendra certaines fonctionnalités avancées dans le futur. Il n'est pas évident de choisir le bon CMS pour blog, il existe en effet certains critères auxquels on ne pense pas forcément surtout lorsque l'on débute et qui sont déterminant pour la survie de votre blog. 2.4 Que choisir : hébergeur de blog ou CMS ? Après avoir compris le fonctionnement des hébergeurs de blog et des CMS pour blog, nous verrons dans cet article quels sont les critères déterminants pour choisir l'une ou l'autre comme solution pour créer votre blog. Etes-vous prêt à y consacrer du temps ? L'un des premiers critères déterminant est bien une question de temps. En effet, si vous souhaitez obtenir une solution qui soit rapidement mis en place alors les hébergeurs de blog sont plutôt conseillés, car une fois inscrit vous aurez un blog prêt à l'emploi. En revanche celui-ci ne sera pas forcément très évolutif en termes de fonctionnalités. En effet, si les CMS pour blog sont un peu plus long à mettre en place, il n'en demeure pas moins qu'ils sont beaucoup plus évolutifs car ceux-ci peuvent intégrer des applications ou extensions (appelés modules ou plugin) qu'il est possible de télécharger et d'installer sans payer. De plus les CMS nécessitent un peu plus de volonté (surtout si vous débutez) pour bien comprendre quelques bases techniques (rien de bien complexe non plus !). Vous souhaitez un blog pro ou plutôt amateur ? Si vous avez pour objectif de concevoir un blog pro, c'est-à-dire qui à pour objectif de rapporter de l'argent ou de présenter une activité ou un thème précis de manière professionnel, alors il est plutôt conseillé d'opter pour les CMS pour blog. En effet même si certains hébergeurs de blog proposent de créer des blogs dits "professionnels" il n'en demeure pas moins que ceux-ci n'offriront jamais la flexibilité que peuvent offrir les CMS. Vous l'aurez donc compris c'est qu'avec les CMS vous maîtrisez tout les aspects de votre blog de l'apparence jusqu'aux différentes fonctionnalités. Si en revanche votre objectif n'est pas du tout d'obtenir un blog professionnel mais plutôt de partager vos passions ou vos histoires au près d'une communauté qui est là pour les mêmes raisons que vous, alors utilisez les hébergeurs de blog !

4

3. Création d'un blog "prêt à l'emploi" La création d'un blog ne demande pas de compétences particulières en informatique. En effet, le principe des blogs est basé sur l'utilisation d'un outil en ligne permettant d'insérer et de mettre en forme ses articles. Ainsi, pour créer un blog, il suffit, dans un premier temps, de trouver un hébergeur de blogs et d'y ouvrir un compte et dans un second temps, de publier le contenu grâce aux outils mis à disposition. Choisir un hébergeur de blog La liste ci-dessous recense les principaux hébergeurs de blog. Le choix d'un hébergeur dépend du coût (certains sont gratuits), des fonctionnalités offertes et du look'n'feel de l'interface : Blogger (gratuit) nécessite une inscription sur Google Over-Blog (gratuit et sans publicité) Typepad (payant) WordPress (gratuit ou formules payantes) Tumblr (gratuit ou formules payantes) 3.1 S'inscrire à un hébergeur de blog La seconde étape consiste généralement à ouvrir un compte sur l'hébergeur de blog en remplissant le formulaire d'inscription. Publier son blog La publication d'un blog se fait tout simplement à l'aide de formulaires. Un simple clic suffit pour poster une note, un commentaire, une image, voire parfois une vidéo. Toutefois, pour permettre au blog d'être lu par le plus grand nombre, il sera généralement nécessaire d'activer l'option "Syndication de contenu" ou "Fil RSS" afin de générer automatiquement un fil RSS, c'est-à-dire un fichier utilisable par les autres blogueurs pour publier vos notes sur leur blog ! .Flux Rss : définition et principes S’il y à une chose qu’il vous faut absolument comprendre c’est l’intérêt des flux Rss (Real Simple Syndication). Pour faire simple, offrir un fil RSS de votre contenu vous permet d’exporter ce contenu de manière simple et automatique vers un autre site. Le contenu affiché sur cet autre site proposera alors un lien vers votre blog. Le fait de rendre ce contenu “exportable” correspond à la syndication. Quel intérêt de syndiquer mon contenu ? Pour vous il s’agit principalement de rendre visible votre contenu autre part que sur votre blog, en d’autres mots offrir plus de points d’accès à votre blog et donc augmenter la visibilité de celui-ci ! Pour vos lecteurs ou toutes autres personnes, il s’agit d’accéder à votre contenu rapidement et simplement sans forcément passer par votre blog. (Ici on peut se poser la question de savoir si c’est bien ou non qu’une personne puisse lire votre contenu sans forcement passer par votre blog … mais c’est une autre question sur laquelle on s’attardera un peu plus tard...)

5

Le fait de syndiquer votre contenu ne signifie pas pour autant que ce dernier sera forcement affiché sur d’autres sites. Deux cas se présentent alors: Soit vous décidez vous même d’afficher votre contenu (fil RSS) sur un autre site en le soumettant à des annuaires et ou moteurs de recherches spécialisés ou autres outils qui prennent en considération ces flux (vous trouverez une liste de ces outils plus bas). Soit une autre personne que vous, trouvant votre blog intéressant décide de s’y abonner en utilisant un lecteur de flux RSS ou agrégateur. Les agrégateurs permettent de réunir sur une même page des flux provenant de différents blogs ou site. L’utilisateur ne va plus chercher l’information, mais c’est l’information qui vient à l’utilisateur. Dans le premiers cas, il s’agit de soumettre votre blog ou votre contenu à un outil. Il va de soi que plus vous soumettrez votre blog à ce genre d’outil, plus les chances d’augmenter votre trafic seront grandes. Dans le second cas, c’est l’utilisateur qui décide d’ajouter votre flux à un aggrégateur. Le but ici va être de lui faciliter la tâche en lui proposant sur votre blog, des boutons lui permettant d’ajouter votre flux Rss dans son lecteur favoris. La plupart de ces aggrégateur vous permettent de générer ces boutons et d’en obtenir le code d’inclusion pour l’afficher sur votre blog. Pour aller plus loin sur les flux Rss voici quelques liens : http://fr.wikipedia.org/wiki/RSS_(format) www.commentcamarche.net/contents/www/rss.php3 www.01net.com/editorial/267676/quest-ce-que-rss-comment-acceder-aux-flux-rss/ 3.2 Création d'un blog "Seul maître à bord" Si l'idée d'avoir un blog identique à tous les autres ne vous plait pas, que vous souhaitez personnaliser ce dernier entièrement et que mettre les mains dans le cambouis ne vous fait pas peur (xhtml, css, php, installation de modules, ...), alors rien de tel que de passer à l'étape supérieure. L' hébergeur : De nombreux hébergeurs vous offrent, gratuitement ou non, d'héberger votre site web. Cela signifie que vous pouvez aussi choisir d'utiliser cet espace pour y installer un blog.

6

Choisir un hébergeur gratuit ou payant le principe : Vous déposez sur votre serveur un ensemble de fichiers, très souvent, vous procédez à une installation en ligne, et c'est parti ! L'avantage, c'est que vous êtes le seul maître à bord. Un nouveau plugin vous intéresse ? Vous l'installez. Vous êtes graphiste et les thèmes proposés par défaut ne vous plaisent pas ? Vous faites le vôtre, unique. Cela signifie aussi que s'il y a un problème de fonctionnement, c'est votre faute... et que les mises à jour (indispensables pour la sécurité de votre blog) vous incombent. Moteurs de blog : Il existe de très nombreux moteurs de blogs sur la toile. Les plus connus sont sans doute Dotclear et WordPress, mais ce ne sont pas les seuls. En voici quelques-uns : BlogCMS : http://blogcms.com/ Dotclear : http://www.dotclear.net/ Serendipity : http://www.s9y.org/ SimplePHPblog : http://www.simplephpblog.com/ WordPress : http://fr.wordpress.org/ La liste n'est pas exhaustive. Par expérience, les communautés de Dotclear et Wordpress sont très actives et vous trouverez de l'aide pour tous vos soucis. De plus, de très nombreux plugins additionnels sont proposés pour ajouter des fonctionnalités à votre blog. Cherchez, vous trouverez sans doute la perle rare qui vous manque. Oui, mais lequel choisir ? Dans toute cette liste, comment je fais pour savoir lequel répond le mieux à mes attentes ? Le plus simple, c'est d'essayer. Il n'est pas question de tous les télécharger et de les installer. Cela serait sans doute une perte de temps. Vous pouvez faire cela en ligne, sur le site http://opensourcecms.com/ Vous pourrez les tester en visiteur ou en administrateur. Les options les plus courantes sont présentées, seules celles qui compromettent la sécurité ont été désactivées. Mais vous aurez une bonne vision du fonctionnement des différents moteurs de blog. Il ne vous restera plus qu'à faire votre choix.

7

4. Ajouter du contenu Cette section vous guidera dans la rédaction de vos articles mais également si vous souhaitez rajouter toute sorte de contenu à votre blog. Vous souhaitez rajouter des images, de la musique ou même des vidéos à votre blog ? Vous trouverez ici des articles qui vous aideront à intégrer toute sorte de contenu à votre blog. 4.1 Comprendre l'éditeur de texte L'éditeur de texte de votre blog diffère légèrement de celui d'un éditeur classique (qui n'est pas en ligne). En effet, ces éditeurs en ligne interprètent du code HTML (le langage utilisé pour faire des pages web) afin de mettre en forme votre texte. En fait, en utilisant l'éditeur de texte de votre blog lorsque vous rédigez un article, votre éditeur le transforme instantanément en code HTML sans même que vous le sachiez ! Mais voilà, ces éditeurs ne sont pas toujours au point, ils ne font pas toujours ce que l'on souhaite ... C'est pour cette raison que sur la plupart des éditeurs de texte vous verrez le bouton suivant: . Ce bouton permet de constater l'équivalent de votre article mis en forme au format HTML. Il s'agit de ce format qui sera au final lu par le navigateur de vos lecteurs. Ainsi par exemple, le texte suivant "Bonjour je suis du texte vu dans votre éditeur" donnera au format HTML "<p>Bonjour je suis du texte vu dans votre éditeur</p>". Vous voyez la différence ? Elle n’est pas bien méchante, le passage au format HTML consiste en effet en l'ajout de certaines balises et de transformations de caractères spéciaux au format HTML ("é" devient "é"). Dans notre cas on constate l'ajout de la balise <p> au début et </p> à la fin pour signaler respectivement au navigateur que l'on débute et termine un paragraphe. Vous aurez donc compris que tout est une histoire de balise ainsi pour désigner des mises en forme et éléments différents le langage HTML propose des balises différentes. Par exemple: La balise <p> désigne le début d'un paragraphe et se termine toujours par </p> La balise <img /> désigne que l'on souhaite intégrer une image dans notre page La balise <b>Mon texte en gras</b> permet de mettre du texte en gras Le but n'est pas de faire un cours sur le code HTML vous trouverez sur internet de très bonnes ressources assez facilement. Le but est que vous compreniez ici le fonctionnement de ces éditeurs afin de ne pas être trop déboussolé.

8

4.2 Ajouter des images dans son blog Une fois votre blog créée vous souhaiterez peut être rajouté des images sur celui-ci afin de montrer des photos de vacances ou tout simplement illustrer vos articles. L'ajout d'images dans un blog constitue en principe une fonctionnalité de base de tout bon outil de blogging qui se respecte. Si votre blog ne vous permet pas d'ajouter des images, il vaut peut-être mieux changer d'hébergeur de blog ou de CMS ! Si vous utilisez un CMS tel que WordPress ou encore DotClear, il existe des fonctionnalités déjà intégrés dans votre éditeur afin de transférer les images depuis votre ordinateurs vers votre blog (ou plutôt l'espace où est hébergé votre blog).Tant que vous disposez d'espace sur votre espace d'hébergement, vous pourrez transférer autant d'images que vous le souhaitez ! En revanche le fonctionnement diffère légèrement si vous passez par une plateforme qui héberge votre blog. En effet, pour ces derniers l'espace que vous utilisez pour vos fichiers correspond à des ressources en moins pour eux. Pour cette raison la plupart des plateformes de blog limitent l'espace alloué à une certaine quantité à votre inscription par exemple 5Mo ou 20 Mo, si vous souhaitez bénéficier d'avantage d'espace il vous faudra par la suite payer des services supplémentaires. Dans les deux cas, il peut arriver que vous arriviez à court d'espace de stockage. Vous pourrez aussi vouloir mettre dans votre blog des diaporamas de manière à donner un côté plus animé à vos photos. Nous verrons d'abord dans cet article le fonctionnement général d'ajout d'image dans un blog : Comment ajouter des images et les placer là où vous le souhaitez dans vos articles. Nous verrons ensuite comment héberger vos images ailleurs que sur votre blog et donc économiser votre espace de stockage. Enfin, nous verrons comment rajouter des diaporamas dans un blog. Fonctionnement général d'ajout d'image dans un blog Tout comme dans votre logiciel d'éditeur de texte favoris, il est possible de rajouter des images dans du texte. Vous pouvez également mettre en forme ces images et les ajuster comme bon vous semble dans votre article. Si vous avez de la chance, votre outil de blog vous propose un bon éditeur de texte qui vous permettra d'ajuster vos images dans votre article comme vous le voulez. Malheureusement çà n'est pas toujours le cas. C'est pour cela qu'il peut paraître utile de comprendre le fonctionnement de ces éditeurs en lignes.

9

Ajouter une image dans son article Si votre éditeur de texte ne comporte pas de bouton vous permettant d'ajouter des images dans un article il vous faut d'abord basculer en mode HTML en cliquant sur le bouton généralement signalé comme tel: Une fois en mode HTML repérez l'endroit où vous souhaitez insérer l'image et utilisez la balise HTML <img /> ; Pour indiquer l'emplacement ou l'url d'une image il faut ensuite mentionner l'attribut src dans la balise <img> de cette façon : <img src="http://www.monblog.com/adresse-de-mon-image/monimage.jpeg" /> . De cette façon nous venons d'insérer l'image portant le nom de "monimage.jpeg" se situant à l'adresse "http://www.monblog.com/adresse-de-mon-image/" dans notre article. Aligner des images dans ses articles Il y à trois cas possible : aligner votre image à gauche, au centre ou à droite. Pour aligner une image, il vous faut utiliser l'attribut "align" dans la balise image. Pour reprendre l'exemple précédent : Si l'on souhaite aligner notre image à gauche il nous faut ajouter l'attribut : <img align="left" src="http://www.monblog.com/adresse-de-mon-image/monimage.jpeg" /> Si l'on souhaite aligner notre image au centre il nous faut ajouter l'attribut : <img align="center" src="http://www.monblog.com/adresse-de-mon-image/monimage.jpeg" /> Si l'on souhaite aligner notre image à droite il nous faut ajouter l'attribut : <img align="right" src="http://www.monblog.com/adresse-de-mon-image/monimage.jpeg" /> Voilà, si votre image est entourée de texte, celui-ci s'ajustera automatiquement en fonction de l'alignement que vous aurez spécifié. Héberger ses images et photos ailleurs que sur son blog Cette technique est utile notamment si vous ne disposez pas de beaucoup d'espace disque pour stocker vos photos sur votre blog ou même si vous souhaitez tout simplement économiser de l'espace. Le principe est simple : il existe sur internet de nombreux hébergeurs qui sont spécialisés dans l'hébergement d'images. Ils vous proposent d'héberger (généralement avec un offre gratuite) vos images et vous mettent ensuite à disposition le code HTML ou simplement l'adresse ou l'url de l'image où est stocké l'image que vous aurez transféré chez eux. Il vous suffit ensuite de récupérer cette adresse ou le code fournit et de le mettre dans l'attribut "src" de la balise "<img>" comme indiqué ci dessus. Voici une liste d'hébergeurs d'image en ligne : Flickr.com: Il s'agit surement du service le plus connus pour héberger vos photos. Héberger les images de votre blog chez FlickR

10

HostingPics.net : Hébergement d'images gratuit jusqu'à 5 mo. HostingPics accepte les fichiers suivants : jpg, jpeg, png, gif, bmp, tif, tiff. Héberger les images de votre blog chez HostingPics Mabul.org : Hébergement d'images à vie JPG, PNG, GIF, BMP, TIF(F), SWF, jusqu'à 1,5 Mo. Héberger les images de votre blog chez Mabul.org Casaimages.com : L'inscription gratuite vous donne le droit de stocker jusqu'à 250 Mo avec la possibilité de créer une galerie photo ainsi que des diaporamas. Héberger mes images chez Casimages.com Imagik.fr : Format d'images acceptés : .jpg, .gif, .png jusqu'à 5 Mo/ image sans aucune inscription. Héberger mes images chez imagik.fr Zimagez.com: Vous pouvez héberger autant d'images que vous le souhaitez. Le poids maximum des images est fixé à 4Mo. Héberger mes images chez Zimagez.com Ajouter un diaporama à son blog Certains sites vous permettent de créer des diaporamas et de les afficher par la suite sur votre blog. Vous trouverez ci-dessous une liste de services vous permettant de créer des diaporamas à partir de vos images et de les intégrer par la suite sur votre blog. Kizoa.fr: Kizoa vous permet de faire vos propres montages photos et de les partager par la suite sur votre blog. Créer des diaporamas pour votre blog sur Kizoa Bloggif.com : Bloggif vous permet de créer des animations GIF en ligne. Une fois votre GIF animé créé, vous pouvez le télécharger pour l'intégrer sur votre blog, un profil ou tout autre service. Créer des diaporamas pour votre blog sur Bloggif Bubbleshare.com: BubbleShare vous permet de transférer vos photos et de créer et organiser vos albums photos en ligne gratuitement et des les intégrer par la suite dans votre blog. Créer des diaporamas pour votre blog sur BubbleShare Slide.com: Slide vous permet créer des diaporamas pour votre blog mais également pour d’autres services et notamment pour les réseaux sociaux les plus connus tels que FaceBook, hi5, Bebo, Orkut, Friendster, MySpace. Slideroll.com: SlideRoll vous permet de créer grâce à un éditeur assez avancé des diaporamas aboutis notamment avec la possibilité d'inclure des transitions, de la musique etc. ... Flickrslideshow.com: Vous connaissez déjà peut être Flickr le service permettant d'héberger ses photos en ligne. Flickr SlideShow vous permet de créer des diaporamas à partir d'images hébergés depuis FlickR.

11

4.3 Ajouter des vidéos dans son blog Il existe plusieurs solutions si vous souhaitez intégrer des vidéos dans votre blog. Tout comme pour l'hébergement des images ou de la musique, il existe des services ou sites vous permettant d'héberger vos vidéos et de les intégrer par la suite dans votre blog. L'insertion d'une vidéo dans un blog se fait généralement grâce à votre éditeur de texte. Certaines plateformes d'hébergement de blogs proposent toutefois des solutions spécifiques (sans utiliser l'éditeur de texte) vous n'avez dans ce cas pas d'autres choix que d'utiliser cette solution proposée. Comme pour l'hébergement de musiques ou d'images, le fait d'héberger vos vidéos ailleurs que sur votre hébergement personnel vous permet d'économiser de l'espace de stockage. Intégrer une vidéo dans son blog à partir de l'éditeur de texte Avant de lire cette section vous devez avoir compris comment fonctionne les éditeurs de texte en ligne. Pour intégrer les vidéos que vous visionnez en ligne sur votre blog, les hébergeurs vous mettent généralement à disposition un code HTML qui est à intégrer dans votre éditeur de texte. Par exemple sur le site Youtube ce code se situe à droite du lecteur vidéo. Pour intégrer la vidéo à votre blog vous devez simplement récupérer ce code et le coller dans votre éditeur. Une fois que vous avez copié le code vous devez basculer en mode HTML en cliquant sur le bouton généralement indiqué comme ceci : avant de coller le code. En principe vous ne pourrez pas voir le résultat avant d'avoir publié l'article. Liste d'hébergeur vidéo en ligne pour trouver où héberger des vidéos pour votre blog Youtube.com : Surement l'hébergeur de vidéo la plus populaire et contenant le plus de vidéo sur le web. Vous pouvez y transférer des vidéos faisant jusqu'à 2 Go pour une durée maximale de 10 min. DailyMotion.com : La taille maximale des vidéos transférable est de 150 Mo pour une durée maximale de 20 minutes. MegaVideo: Vous pouvez y transférer des vidéos faisant jusqu'à 5 Go. GoogleVideo: Taille Maximale des vidéos 100 Mo. Wideo: Taille maximale des vidéos 150 Mo 4.4 Ajouter de la musique dans son blog

12

Il existe plusieurs moyens d'ajouter de la musique dans votre blog. Le moyen le plus simple consiste à inclure la musique dans un article: vous pouvez soit choisir de jouer vos propres fichiers de musique (préférable pour les non débutants) ou alors passer par un service qui vous permettra d'utiliser un lecteur qui jouera les morceaux de musique que vous avez choisi (solution idéale si vous débutez). Jouer vos propres fichiers de musique sur votre blog Vous devez d'abord trouver le ou les fichiers de musique que vous souhaitez jouer sur votre blog. Ces fichiers peuvent se trouver n'importe où sur le web, même s'il est préférable qu'ils soient hébergés sur le même espace que votre blog pour des raisons de performances. Une fois que vous disposez de votre ou vos fichiers de musique : deux solutions se présentent à vous. Soit vous souhaitez jouer un seul morceau de musique ou alors vous souhaitez intégrer un player qui liste plusieurs morceaux et c'est alors à l'utilisateur de choisir le morceau qu'il souhaite jouer dans la playliste. Dans le premiers cas un lecteur simple vous suffira : vous trouverez ce qu'il vous faut sur http://flash-mp3-player.net/players/mini/generator/ qui vous permettra de créer et personnaliser votre lecteur simple notamment en choisissant les couleurs, l'url du morceau de musique que vous souhaitez créer etc., de plus ce site est assez bien documenté en français. Une fois que vous avez terminé de paramétrer votre lecteur vous disposez d'un code HTML qu'il vous suffit d'insérer dans le code HTML de votre article. La démarche à suivre est la même que pour insérer des images ou de la musique dans sont blog. Dans le deuxième cas vous pouvez utiliser toujours sur le même site un lecteur vous permettant de spécifier plusieurs morceaux de musique: http://flash-mp3-player.net/players/multi/generator/. Cette fois l'utilisateur disposera d'une playliste et pourra donc choisir le morceau qu'il souhaite jouer. La procédure à suivre est la même que dans le cas précédent. Intégrer un lecteur depuis un service de musique en ligne Enfin, si vous ne souhaitez pas vous embêter, vous pouvez toujours utiliser des services qui sont mis à disposition par des sites de musique en ligne. Deezer : En plus de vous permettre d'écouter gratuitement de la musique en ligne, Deezer vous permet également de créer vos propres playlist des vos morceaux préférés. Une fois que vous avez créée une playlist vous pouvez obtenir un player que vous pouvez par la suite intégrer sur votre blog. Pour ceci, choisissez la playlist que vous avez créée, puis cliquez sur "Partager". Vous disposez ensuite du menu suivant qui vous permet de paramétrer votre lecteur de musique à intégrer sur votre blog. Une fois terminé vous n'avez qu'à copier et coller le code HTML généré. Jiwa.fr: Jiwa fonctionne également de la même manière que Deezer, après vous êtes inscrit, vous pourrez créer vos propres playlist et paramétrer votre lecteur à intégrer dans votre blog, sur facebook, ou myspace.

13

Finetune: Similaire aux services précédent mais n'est pas disponible en français. 4.5 Ajouter des gadgets widgets et autres outils à son blog Outre les média classiques (images, vidéos, musique) il est possible de rajouter dans votre blog d'autres petits gadgets qui permettent d'ajouter un peu plus de convivialité Nombre de visiteurs en ligne Who's among us est un service permettant d'indiquer en temps réel le nombre de visiteur actuellement sur votre blog ou site. Le service est disponible en français. Il suffit tout simplement de copier et coller un code HTML là où vous souhaitez afficher le compteur sur votre blog. Si vous n'aimez pas la présentation par défaut il est également possible de personnaliser le widget Dans le même esprit Geovisite vous permet des savoir combien d'utilisateurs sont en ligne mais également de quels pays ils sont originaires. Une fois que vous aurez fait votre choix parmi les dizaines de widgets proposées vous n'aurez plus qu'à copier et coller le code HTML adéquat. Ajouter un chat à son blog Meebomee vous permet de communiquer avec vos visiteurs et de gérer votre liste d'amis. CBox vous permet d'ajouter un mini chat à votre blog gratuitement. Après vous êtes inscrit vous pourrez customiser votre outil de chat et au final l'intégrer à votre blog. ShoutMix propose également un service similaire. Permettre à vos visiteurs de vous appeler Le bouton skype permet de montrer à vos visiteurs si vous êtes en ligne sur le service Skype et de vous appeler en toute simplicité si vous êtes connecté. 5. Faire connaître son blog

14

Vous avez déjà créée votre blog et vous souhaitez obtenir des visiteurs ? Vous trouverez ici tous les articles nécessaires et tout ce dont vous avez besoin pour bien référencer votre blog au près des moteurs de recherche et annuaires. 5.1 Principes du référencement Le référencement est une pratique qui consiste à rendre votre site ou blog plus visible dans le but de recevoir plus de visiteurs. Le principe est donc simple: plus il y a de liens qui pointent vers votre site, et plus vous aurez de visiteurs car plus votre site sera visible. C'est d'ailleurs sur ce principe que se base les moteurs de recherche et notamment le moteur de recherche Google pour classer les résultats d'une recherche. Il y à plusieurs techniques pour amener des visiteurs vers votre blog. Ajouter votre site sur des annuaires est un bon moyen de démarrer votre référencement et faire connaître votre blog. Il y à ensuite les moteurs de recherche qui contrairement aux annuaires ne nécessitent pas forcément qu'on leur soumet votre blog pour le proposer dans leurs résultats de recherche. Les bookmarks sociaux sont également un bon moyen de référencement puisqu’ils consistent à proposer des liens sur un site, puis ses liens font l’objet de votes pas les visiteurs permettant ainsi aux liens présentant un contenu intéressant d'êtres mis en valeur. Il existe également des outils permettant d'avertir aux annuaires et moteurs de recherche que votre blog à été mis à jour, et permettent donc une mise à jour quasi instantané de leurs indexe. Il s'agit des outils de ping automatique. 5.2 Les annuaires Les annuaires permettent de donner plus de visibilité à votre blog. Plus vous soumettez votre blog à des annuaires et plus vous aurez de visiteurs sur votre blog. Votre blog sera également mieux positionné dans le classement des moteurs de recherche car ceux-ci se basent (entre autre) sur le nombre de liens pointant vers votre blog afin de classer leurs résultats. Voici une liste d'annuaires de blog auxquels vous pouvez soumettre votre blog afin d'augmenter sa notoriété : DMOZ, CoteBlog.com, Annuaire-blogs.net, Tagbox.fr, Hitoo.com Vous pourrez également trouver une liste d'annuaire classés pas thématique ici : http://www.liste-annuaires.com/ 5.3 Moteurs de recherche

15

A l'inverse des annuaires, les moteurs de recherche sont capables de trouver votre blog sans pour autant que vous leur ayez soumis l'adresse de votre site. Pour parvenir à cela ils disposent de robots qui parcourent en permanence le web à la recherche de nouveaux liens. Il suffit donc que vous ayez soumis votre blog à un annuaire et que celui-ci ait été trouvé par un robot. Vous pouvez tout de même soumettre votre site aux moteurs de recherche si vous êtes impatient ou que vous n'avez pas forcément envie de soumettre votre blog à des annuaires. http://www.google.fr/addurl/ http://fr.docs.yahoo.com/info/ajouter.html http://www.bing.com/docs/submit.aspx Il existe également des moteurs de recherche spécialisés de blog qui mettent leurs indexes à jour de manière quasi instantané notamment si vous les avertissez d'une mise à jour de votre blog par un ping. Vous trouverez ci-dessous une liste de ce type de moteur de recherche. http://blogsearch.google.fr/ http://www.icerocket.com/ http://technorati.com/ http://blog.news.search.yahoo.com/blog/search?p= http://www.blogpulse.com/ http://blogs.feedster.com/ 5.4 Bookmark sociaux Le social bookmarking (en français « marque-page social », « navigation sociale » ou « partage de signets ») est une façon pour les internautes de stocker, de classer, de chercher et de partager leurs liens favoris. Dans un système ou réseau de bookmarking social, les utilisateurs enregistrent des listes de ressources web qu’ils trouvent utiles. Ces listes sont accessibles aux utilisateurs d'un réseau ou site web. D’autres utilisateurs ayant les mêmes centres d’intérêt peuvent consulter les liens par sujet, catégorie, étiquette ou même de façon aléatoire. En dehors des favoris web, on peut trouver d’autres services spécialisés sur un sujet particulier (alimentation et vins, livres, vidéos, commerce en ligne, cartographie...).

16

En proposant des articles de votre blog sur ces bookmarks sociaux, vous donnez plus de visibilité à votre blog à condition bien sûr que le contenu que vous proposez soit jugé suffisamment intéressant par les internautes utilisant ces services. Il existe un certain nombre de bookmark sociaux français tels que : http://www.scoopeo.com/ http://www.wikio.fr/ http://www.mister-wong.fr/ http://diggons.com/ http://www.bluegger.com/ http://tapemoi.com/ http://www.netoo.com/ http://www.paperblog.fr/ http://blogasty.com/home http://www.blogmemes.fr/ http://www.nuouz.com/ 5.5 Ping automatique Les outils de ping automatiques permettent d'avertir aux moteurs de recherches et aux annuaires spécialisés que votre blog à été mis à jour. Le ping constitue en un signal qui est envoyé aux différents moteurs de recherche et annuaires qui viennent à leur tour vérifier sur votre blog les nouvelles mises à jour. L'avantage du ping est donc que vous n'avez plus à attendre que les moteurs de recherche repassent sur votre blog pour mettre à jour leur index concernant votre site. Les outils suivants peuvent vous aider à envoyer un ping automatique à plusieurs moteurs de recherche et annuaires en un clic : http://pingomatic.com/ http://pingoat.com/ http://pingates.com/

17

5.6 Mesurer l'audience Pour savoir combien de visiteurs viennent visiter votre blog et pour connaître d'autres informations sur ces derniers (tels que l'origine de leur visite, la durée de la visite, quels sont les articles les plus consultés) vous pouvez utiliser des services de mesure d'audience. Il existe plusieurs services qui vous propose après avoir insérer un code html et ou JavaScript dans votre blog, de tracker vos visiteurs et de connaître les différentes informations concernant leurs visites sur votre blog. Google Analytics http://www.google.com/intl/fr_ALL/analytics/ : Il s'agit de l'outil de mesure d'audience le plus complet et disponible gratuitement. Google analytics s'avère très pratique si vous souhaitez utiliser d’autres services de Google tels que Adsense ou Adwords car il vous permet de mesurer l'efficacité de vos campagnes publicitaires mais également de constater vos gains pour chaque page de votre site ou blog. Version gratuite de Xiti http://www.atinternet.com/Produits/XiTiFree.aspx: Cette version offre les indicateurs de base vous permettant d’obtenir une vision globale de la fréquentation de votre site. 5.7 Gagner de l'argent avec son blog Vous souhaitez gagner de l'argent avec votre blog ? Vous trouverez ici tous les articles nécessaires qui vous aideront à gagner de l'argent avec votre blog. Vous trouverez également comment optimiser les revenus générés par votre blog. Il existe plusieurs solutions pour tirer des revenues de son blog. La solution la plus simple et la plus répandue est de passer par une régie publicitaire qui vous permettra de diffuser des annonces publicitaires sur votre blog sans avoir à vous soucier des relations avec les annonceurs. En affichant de la publicité il y à plusieurs façon de gagner de l'argent. La régie publicitaire peut vous payer au clic : c'est-à-dire que chaque clic sur une annonce vous rapporte de l'argent, il s'agit de la forme la plus répandue de rémunération. Elle peut également vous payer à l'affichage : pour une certaines quantité d'affichage de l'annonce publicitaire vous touchez des revenues : par exemple vous pouvez gagner 0.5€ pour 1000 affichages d'une annonce. Certaines régie publicitaire vous permettent également de gagner de l'argent à l'action c'est-à-dire que si l'internaute ayant cliqué sur une annonce effectue une action bien spécifique sur le site de l'annonceur par exemple un achat (vous pouvez alors toucher un pourcentage de cet achat). Vous l'aurez compris il existe une multitude de moyen de gagner de l'argent grâce aux régies publicitaires. Pour la plupart des régies publicitaire, il vous faudra atteindre un seuil minimum afin de pouvoir réclamer le paiement de vos gains.

18

Voici une liste de régie publicitaire auxquels vous pouvez vous inscrire afin de tirer des revenus de votre blog : Google Adsense: Le seuil de paiement est de 70 € NetAffiliation: Seuil de paiement à 50 € ClibleClick : Seuil de paiement de 100€ Allosponsor : seuil de paiement 10 € Rentabiliweb : avec un seuil de paiement à 50 € *3 Création d’un blog sous Blogger Tout d’abord il vous faut vous rendre à l’adresse suivante via votre navigateur internet (firefox, internetexplorer, chrome, etc.) www.blogger.com La création d’un blog sous Blogger nécéssite la création d’un compte google. En suivant les étapes ci-après :

Soit vous possédez déjà une adresse mail GMAIL dans ce cas il vous suffit de compléter le premier champ et cliquer sur connexion. Ou vous n’avez pas d’adresse GMAIL, il vous faut vous inscrire bouton rouge du haut à droite.

19

Une fois connecté (soit vous vous êtes connecté directement ou après la création de votre compte google) cette fenêtre s’ouvre :

Il vous suffit de cliquer sur la case « nouveau blog » Ensuite cette fenêtre ci s’ouvre :

20

Remplissez les champs requis. Attetion de créer un titre en rapport avec l’addresse de votre blog pour un meilleur référencement par les moteurs de recherche. Par exemple blog de « mon nom » adresse : monnom.blogspot.com Choisissez un modèle et enfin cliquez sur « créer un blog »

le fenêtre suivante s’est ouverte, il s’agit de votre « tableau de bord » qui permet de gérer vos blogs sous Blogger. En cliquant sur le nom de votre blog un nouvlle fenêtre s’ouvre :

21

Cette fenêtre est la fenêtre de gestion de votre blog, elle permet la mise en page, gérer le contenu, suprimer le blog en somme l’administration de votre blog. Qu'est-ce que le tableau de bord ? Comme celui d'une voiture, le tableau de bord Blogger permet d'organiser et de présenter les informations afin d'en faciliter la lecture. Le tableau de bord Blogger joue en fait le rôle de centre de modification de Blogger. Lorsque vous vous connectez à Blogger, vous obtenez la page Tableau de bord, à partir de laquelle vous pouvez modifier le contenu de vos blogs et votre profil ou encore accéder aux pages Actualités Blogger (actuellement en anglais), Blogs mis à jour récemment et Blogs intéressants. Remarque : Lorsque vous consultez d'autres pages du site Blogger que la page du tableau de bord, vous disposez d'un bouton bleu en haut à droite permettant d'accéder directement à celui-ci. Créer un blog Avant de pouvoir créer votre blog gratuit sur Blogspot, le service d'hébergement de Blogger, vous devez au préalable avoir créé un compte Google. Une fois connecté au site blogger.com, cliquez sur Créer un blog à côté de votre liste de blogs :

Dans la fenêtre pop-up qui s'ouvre, saisissez un titre et une adresse (URL), puis choisissez un modèle pour votre blog. Lorsque vous avez terminé, cliquez sur Créer un blog :

22

La création de votre blog est terminée ! Votre blog devrait désormais être visible sur votre tableau de bord. Pour commencer à poster des messages, cliquez sur l'icône orange représentant un crayon située à côté de votre blog. Pour connaître votre URL si vous l'avez oubliée, ou si vous souhaitez la modifier, accédez à Paramètres | Basique. À propos des URL Sur le Web, les adresses se nomment URL. Elles peuvent se présenter sous la forme www.example.com ou foo.example.com. Le choix de l'URL de votre blog s'effectue pendant la création de celui-ci. Vos lecteurs devront la saisir dans la barre d'adresse de leur navigateur pour accéder à votre blog. Dans la mesure où il existe déjà un grand nombre de blogs BlogSpot, vous allez devoir faire preuve de créativité et faire plusieurs essais avant d'en trouver une disponible. L'URL de votre blog se présentera sous la forme suivante : nomdevotrechoix.blogspot.com. Elle ne peut contenir que des lettres, des chiffres et des tirets. Les caractères spéciaux ($, #, &, etc.) ne sont pas autorisés.

23

Vous pouvez afficher et modifier l'URL de votre blog dans la section Paramètres | Basique

Notez que si vous changez d'URL, votre ancienne URL sera disponible pour les autres bloggers. Vous pouvez également héberger votre blog sur un domaine personnalisé. Création d'un blog Pour commencer à utiliser Blogger, accédez à la page d'accueil Blogger, entrez votre nom d'utilisateur et votre 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 un nom et une adresse (URL) pour votre blog. Sélectionnez votre modèle préféré (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 ! Élaboration d'un message Une fois connecté à Blogger, la liste de vos blogs s'affiche dans votre tableau de bord. Procédez comme suit :

1. Cliquez sur l'icône représentant un crayon orange pour créer un nouveau message dans lequel vous écrirez tout ce que vous avez envie de faire partager aux autres.

2. L'éditeur de messages s'affiche. Choisissez un titre (facultatif), puis commencez la rédaction :

3. Lorsque vous avez terminé, cliquez sur le bouton Aperçu en haut de l'éditeur

pour vérifier que le message 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 de messages. Une

24

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 message :

• 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 le message.

Cliquez sur ENVOYER UNE IMAGE 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 mobile, du logiciel de photos gratuit de Google Picasa ou d'un service tiers tel que flickr. En savoir plus Ajout d'une vidéo Pour insérer une vidéo dans votre message, 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 message. 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. Voulez-vous voir cette opération en pratique ? Cliquez sur le lien pour voir une vidéo sur l'ajout d'une vidéo à votre message : Ajout d'une vidéo à votre message Personnalisation de la mise en page 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 : choisissez simplement celui qui vous convient le mieux. 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. Vous pouvez très facilement modifier les polices et couleurs de votre blog. 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 :

1. Cliquez sur le lien "Mise en page" du tableau de bord, au-dessous du blog à personnaliser.

25

2. Dans le sous-onglet "Éléments de la page", cliquez sur Modifier pour changer

les gadgets existants ou sur Ajouter un gadget pour en ajouter. 3. Après avoir cliqué sur Ajouter un gadget, cliquez simplement 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 contextuelle.

4. 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.

26

Confidentialité et autorisations 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.

1. 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.

2. Entrez les adresses 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.

3. 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é

Abonnement à d'autres blogs Grâce à la fonctionnalité Membres de Blogger, vous pouvez suivre les blogs dont vous êtes membre par l'intermédiaire de votre liste de lecture sur le tableau de bord Blogger. Il existe plusieurs moyens de devenir membre d'un blog. La plus simple consiste à consulter un blog qui a ajouté le widget Membres et procéder comme suit :

1. Cliquez sur le lien Devenir membresous le widget "Membres".

2. Une fenêtre contextuelle apparaît avec des options vous permettant de

décider si vous souhaitez apparaître publiquement en tant que membre ou rester anonyme.

27

3. Sélectionnez une option, puis cliquez sur le bouton Devenir membre orange. Vous êtes désormais membre du blog ! Si vous choisissez d'apparaître publiquement en tant que membre, l'image de votre profil s'affiche sur le blog avec un lien vers votre profil Blogger.

4. Lorsque vous devenez membre d'un blog, ce dernier est également ajouté à votre liste de lecture dans le tableau de bord Blogger. Pour devenir membre d'un blog ou d'une URL si le widget Membres n'est pas disponible, vous pouvez ajouter le blog à votre liste de lecture sur le tableau de bord.

À propos des pages Regarder une vidéo pour savoir comment créer et modifier des pages Les Pages de Blogger servent à publier des informations statiques sur des pages indépendantes liées à votre blog. Par exemple, la fonctionnalité Pages permet de créer une page À propos de ce blog concernant l'évolution de votre blog ou une page Me contacter qui fournit des coordonnées, un numéro de téléphone et un plan de votre position.

28

Pour créer une de ces pages, cliquez sur le menu déroulant à côté de l'icône grise "Liste des messages" et cherchez l'option Pages. Vous pouvez créer jusqu'à 20 pages.

Ajout d'un gadget. Modèles personnalisés compatibles avec les onglets Pages Si vous avez des notions de code HTML et que vous souhaitez afficher les pages sous forme d'onglets, suivez les étapes suivantes (attention : il faut s'accrocher !) :

1. Assurez-vous que le widget Pages n'a pas encore été ajouté. Le cas échéant, supprimez-le.

2. Accédez à l'onglet Présentation | Modifier le code HTML. 3. Téléchargez une sauvegarde de votre modèle en cliquant sur Télécharger le

modèle dans son intégralité. 4. Cochez la case en regard de l'option Développer des modèles de gadgets. 5. Recherchez les trois lignes de code HTML suivantes. Si vous les trouvez,

remplacez showaddelement='no' par showaddelement='yes'. <div id='crosscol-wrapper' style='text-align:center'> <b:section class='crosscol' id='crosscol' showaddelement='no'/> </div>

6. Si vous ne les trouvez pas, collez les lignes de code HTML suivantes à l'endroit où vous souhaitez afficher les onglets (par exemple, après <div id='content-wrapper'>).

<div id='crosscol-wrapper' style='text-align:center'> <b:section class='crosscol' id='crosscol' showaddelement='yes'/> </div>

29

7. Vérifiez que les onglets sont ajoutés correctement, puis cliquez sur Enregistrer le modèle.

8. Accédez à l'onglet Présentation | Éléments de la page, recherchez la nouvelle zone horizontale destinée au gadget, puis ajoutez le gadget Pages à cet endroit.

Outil de création de modèles de Blogger L'outil de création de modèles de Blogger est une nouvelle façon de personnaliser facilement votre blog. Vous avez le choix entre un grand nombre de modèles, d'images, de couleurs et de mises en page en colonnes pour que votre blog reflète votre personnalité. Pour accéder à l'outil de création de modèles, cliquez sur le menu déroulant de l'icône "Liste des messages" grise, puis sélectionnez Modèle. Vous pouvez alors choisir votre modèle et le personnaliser. L'outil de création de modèles vous permet d'afficher un aperçu de l'apparence que prendra votre blog en fonction des choix que vous avez faits. Vous pouvez élargir cet aperçu en cliquant sur le bouton Développer l'aperçu situé entre le tableau de bord de l'outil de création de modèles de Blogger et l'aperçu. Lorsque l'apparence de votre blog vous convient, vous pouvez activer les modifications en cliquant sur Appliquer au blog dans l'angle supérieur droit de l'outil de création de modèles. Pour démarrer avec l'outil de création de modèles de Blogger, sélectionnez, parmi les modèles conçus par des professionnels, celui que vous souhaitez appliquer à votre blog. Chaque modèle se présente sous la forme d'une grande vignette. Lorsque vous cliquez dessus, différentes variantes que vous pouvez sélectionner par un simple clic s'affichent en dessous. Notez qu'en cliquant sur un nouveau modèle, vous effacez toutes les personnalisations réalisées sur un modèle précédent. Après avoir choisi le modèle, vous pouvez continuer à personnaliser l'apparence de votre blog.

Quel que soit le modèle que vous prévisualisez dans l'outil de création de modèles, vous avez toujours la possibilité de voir l'état actuel de votre blog en consultant la vignette Disponible sur le blog dans le panneau de configuration de l'outil de création de modèles. En cliquant sur cette vignette, vous rétablissez le modèle de la version en ligne de votre blog dans l'outil de création de modèles.

30

Arrière-plan Même après avoir choisi un modèle, vous avez toujours la possibilité de modifier son apparence. Avec l'outil de création de modèles de Blogger, vous pouvez choisir la couleur ou l'image d'arrière-plan de votre blog et jouer avec les couleurs. Pour commencer à personnaliser votre arrière-plan, cliquez sur la vignette sous Image d'arrière-plan. Parmi les nouvelles fonctionnalités de l'outil de création de modèles, l'une des plus intéressantes est celle qui permet de modifier la couleur de l'image d'arrière-plan. Cela est possible lorsque l'image d'arrière-plan est transparente. Vous pouvez déduire qu'une image est transparente si un damier est visible dans son angle supérieur droit.

Une fois que vous avez sélectionné votre image, vous pouvez changer la couleur de son arrière-plan en cliquant sur Thème de couleur principal, puis en sélectionnant la couleur de votre choix.

Vous pouvez modifier la couleur de votre arrière-plan uniquement si celui-ci est transparent. En outre, si le modèle que vous avez choisi possède un arrière-plan gris, vous ne pouvez pas modifier sa couleur. En plus de sélectionner et de personnaliser l'image d'arrière-plan de votre blog, vous pouvez choisir un thème de couleur à appliquer à tous les aspects de votre blog, notamment les textes et les liens. Pour ce faire, vous pouvez tester le Thème de

31

couleur principal ou choisir l'un de nos Thèmes suggérés. En changeant le thème de couleur de votre blog, vous changez les couleurs de tous les aspects du modèle du blog pouvant être modifiés. Remarque : Si l'image d'arrière-plan n'est pas transparente, les thèmes modifient les couleurs des textes du blog. Remarque : Pour plus d'informations sur la mise en ligne de votre propre image d'arrière-plan personnalisée, consultez notre article sur l'ajout de fichiers CSS personnalisés à votre blog. Mise en page Vous pouvez attribuer à votre blog une grande variété de mises en page, allant d'une à trois colonnes. Ces mises en page possèdent des fonctionnalités de glisser-déposer des gadgets. Vous disposez également de nombreuses options de format pour les pieds de page du blog.

Vous ne pouvez pas ajouter ou supprimer des gadgets, ni modifier les paramètres des gadgets, dans l'outil de création de modèles de Blogger. Pour cela, vous devez accéder à l'onglet général Mise en page. Ajuster la largeur Vous pouvez modifier la largeur du blog, ainsi que celle des colonnes de droite et de gauche, en faisant glisser le curseur correspondant aux différentes parties de la mise en page du blog. Notez que les options qui s'affichent ici correspondent au type de mise en page que vous avez choisi. Par exemple, si vous avez choisi un blog avec des colonnes à gauche et à droite, un curseur pour la colonne de gauche et un pour la colonne de droite apparaissent. En revanche, si vous avez choisi une mise en page contenant uniquement une colonne à gauche, vous ne voyez ici que cette option.

Qu'est-ce qu'un modèle ? Le modèle est la structure qui détermine l'apparence des messages blog. Il permet d'appliquer une présentation homogène à la page principale de votre blog et aux pages d'archives associées. Les modèles sont écrits en langage HTML. Ils comprennent les balises de modèle Blogger. Vous n'avez pas besoin d'être un expert en langage HTML pour apporter des modifications mineures à votre modèle (ajouts de liens, modification des couleurs, etc.). Voici un très bon didacticiel HTML (en anglais) : Barebones Guide to HTML.

32

Qu'est-ce qu'un encadré ? Dans un article de journal, un encadré est une zone utilisée pour faire ressortir un point ou un aspect particulier. Dans le cas d'un blog, l'encadré vous permet de vous présenter aux internautes... et d'attirer leur attention. Plus précisément, de nombreux créateurs de blogs utilisent un encadré en marge du texte du blog principal pour présenter une courte biographie, leurs liens favoris et d'autres informations qu'ils souhaitent communiquer parallèlement à leur blog (et non à l'intérieur de celui-ci).

Un grand nombre de nos modèles sont déjà configurés pour présenter certaines informations de votre profil, si vous l'avez défini comme public. Pour plus d'informations sur les modèles et les profils, consultez les articles Comment modifier mon modèle ? et Comment partager mon profil ? Comment modifier l'en-tête "Qui êtes-vous ?" du profil affiché dans l'encadré ? Remarque : Cet article suppose l'utilisation d'un modèle classique. Dans un blog prenant en charge la fonctionnalité de mise en page, il vous suffit de modifier l'élément de page du profil pour modifier son titre. Nos modèles comportent par défaut la balise <$BlogMemberProfile$> dans leur encadré. Cette balise permet d'afficher automatiquement vos informations de profil. Si cette présentation ne vous convient pas, vous pouvez supprimer la balise et recréer cette section à l'aide de différentes balises de profil. Toutefois, si vous

33

souhaitez simplement modifier la partie "Qui êtes-vous ?" ou "Collaborateurs", vous disposez d'une solution plus simple. Commencez par ajouter la ligne de code suivante dans la feuille de style de votre modèle. La feuille de style se trouve vers le haut du modèle, entre les balises <style>. #profile-container h2.sidebar-title {display:none;} Cette ligne de code permet de masquer l'en-tête affiché automatiquement par l'intermédiaire de la balise de profil. Vous devez maintenant repérer la balise <$BlogMemberProfile$> et ajouter le titre juste avant, comme ceci : <h2 class="sidebar-title">À propos de l'auteur</h2><$BlogMemberProfile$> Vous pouvez entrer le texte de votre choix. Il vous suffit alors d'enregistrer les modifications apportées. Comment ajouter un bouton « I Power Blogger » à mon modèle ? Notre bouton Blogger standard :

est disponible à l'adresse http://buttons.blogger.com/bloggerbutton1.gif. N'hésitez pas à l'inclure. Bon blog ! Pour l'inclure dans votre blog, copiez et collez le code suivant dans votre modèle : <a href="http://blogger.com/" title="BLOGGER"><img src="http://buttons.blogger.com/bloggerbutton1.gif" /></a> D'autres boutons sont également à votre disposition :

http://buttons.blogger.com/blogger-ipower-blue.gif

http://buttons.blogger.com/blogger-powerby-blue.gif

http://buttons.blogger.com/blogger-simple-blue.gif

http://buttons.blogger.com/blogger-simple-kahki.gif

http://buttons.blogger.com/blogger-simple-white.gif

34

Comment ajouter des balises de titre à mon modèle ? Remarque :Cet article s'applique uniquement aux blogs utilisant un modèle classique. Pour commencer, veillez à activer le paramètre Afficher le champ Titre. Affichez ensuite le modèle principal de votre blog et recherchez les balises <Blogger> et </Blogger>. Vous devrez insérer les balises suivantes entre les balises <Blogger>. <BlogItemTitle> <$BlogItemTitle$> </BlogItemTitle> Ces balises sont généralement placées entre les balises <$BlogDateHeaderDate$> et <$BlogItemBody$>. Comment modifier le nom qui apparaît à la fin de mes messages blog ? Pour modifier le nom à afficher en guise de signature dans les messages, cliquez sur le lien Modifier le profil du tableau de bord :

Accédez à la section Identité et modifiez l'option Nom à afficher :

Une fois la modification effectuée, cliquez sur le bouton Enregistrer le profil au bas de la page.

35

Une fois le profil enregistré, il suffit de republier le blog pour répercuter les modifications sur votre page Web. Comment modifier la ligne "Publié par" de chaque message de blog ? Remarque : Cet article s'applique uniquement aux blogs utilisant un modèle classique. Si vous utilisez des Mises en page, il vous suffit de cliquer sur le lien "Modifier" de votre élément de page Messages de blog. Si vous souhaitez modifier le pied de page de messages de blog dans l'un des modèles par défaut de Blogger, cliquez sur Modèle | Modèle principal et faites défiler la page pour afficher le code suivant : <div class="byline"> situé entre les balises <Blogger> et </Blogger>. Tous les éléments situés entre cette ligne de code et la balise de fin </div> constituent le pied de page. Examinons-le en détail. Voici la ligne byline par défaut, sous sa forme publiée :

La première partie (signe "#") correspond au lien permanent ; il s'agit du code qui permet de générer le pied de page :

Le texte situé à l'intérieur des signes " " (guillemets droits) permet de générer le lien, <$BlogItemPermalinkURL$> étant le lien vers ce message de blog précis dans la page d'archives. Le signe # final, juste avant la balise </a>, correspond au texte du lien (vous pouvez le remplacer par le texte de votre choix ou même par une autre balise de modèle, telle que <$BlogItemDateTime$>). La deuxième partie "publié par, etc." est générée par ce texte et peut être modifiée selon vos besoins :

Remarques :

• Un lien permanent peut également être affiché de la manière suivante : <a href="<$BlogItemArchiveFileName$>#<$BlogItemNumber$>" title="lien permanent">#</a>

36

Ajouter des réactions La fonctionnalité Réactions permet aux lecteurs de votre blog de donner leur avis sans laisser de commentaire. Vous pouvez ajouter une réaction en cliquant sur Mise en page, puis sur Modifier dans le widget Messages du blog.

Différentes options s'affichent dans la fenêtre pop-up Configurer les messages. Faites défiler la fenêtre pour trouver l'option "Réactions".

Pour l'activer, cochez la case. Vous pourrez personnaliser la fonctionnalité en ajoutant certains termes de votre choix. Enfin, il vous est possible de choisir la position exacte des réactions en déplaçant le widget qui se trouve en bas de la page Configurer les

37

messages :

Activer un affichage dynamique Dans Blogger, vous pouvez désormais personnaliser la présentation de votre contenu de différentes manières.

Pour configurer les affichages dynamiques pour votre blog, cliquez sur l'onglet Modèle. Dans l'outil de création de modèles, sélectionnez l'affichage par défaut de votre blog parmi les sept proposés. Notez que, même si vous activez un affichage par défaut, vos lecteurs restent libres d'en choisir un autre correspondant mieux à leurs goûts. Cela permet toutefois que la présentation de votre blog soit cohérente. Si vous souhaitez essayer les affichages dynamiques alors que vous avez personnalisé les paramètres de votre blog et y avez placé certains gadgets, soyez sans crainte : le simple fait de revenir à votre modèle habituel les fera réapparaître. Si vous souhaitez restaurer votre modèle précédent et retrouver votre mise en page personnalisée intacte, cliquez simplement sur Revenir au modèle précédent. En revanche, si vous revenez à l'ancienne interface en choisissant un nouveau modèle, les différentes modifications que vous aviez apportées à la mise en page de votre blog ne seront pas conservées. Nous vous conseillons donc de faire une sauvegarde de votre modèle personnalisé en cliquant successivement sur Modèle et Sauvegarder/Restaurer un modèle. Si vous utilisez l'ancienne interface utilisateur, vous trouverez cette option sous Présentation | Modifier le code HTML.

38

Par exemple, si vous activez l'affichage Pages, les autres sont accessibles par un menu déroulant similaire à celui qui est illustré ci-dessous.

L'affichage dynamique fonctionne sur votre blog si toutes les conditions suivantes sont réunies :

• Votre blog est public. Vos lecteurs peuvent consulter votre blog sans devoir se connecter.

• Vous avez activé les flux sans restriction pour votre blog. Dans l'onglet Paramètres | Autre, vous avez choisi "Complet" dans la liste déroulante Autoriser les flux de blog. Dans l'ancienne interface, cette option se trouve sous Paramètres | Flux de site.

Les affichages dynamiques n'affectent pas la diffusion des annonces AdSense sur votre blog. Nous avons optimisé les sept affichages pour les annonces de style "Leaderboard" (en-tête) et "Skyscraper" (barre latérale). En savoir plus sur Google Analytics et les affichages dynamiques et les affichages dynamiques pour les lecteurs.

39

Utilisation avancée Modifier les CSS dans l'outil de création de modèles

L'outil de création de modèles de Blogger vous permet de personnaliser pratiquement tous les aspects de l'apparence de votre blog grâce aux feuilles de style en cascade (CSS, cascading style sheets). Pour ajouter des extraits CSS personnalisés à votre modèle, accédez à l'onglet Modèle et cliquez sur Personnaliser. Ajoutez ensuite votre code dans le champ situé dans l'onglet Avancé | Ajouter le fichier CSS. Les modifications que vous réalisez apparaissent instantanément dans l'aperçu situé sous l'éditeur. Remarque : En modifiant les fichiers CSS, vous pouvez changer l'apparence et l'atmosphère de votre blog. Pour modifier le contenu proprement dit de votre blog et notamment ajouter des gadgets ou changer la mise en page, cliquez sur Modifier le code HTML situé dans l'onglet Modèle. N'oubliez pas que, tout comme les autres personnalisations, vos fichiers CSS sont supprimés si vous modifiez la conception de votre blog. Pour une liste plus complète des transformations CSS, consultez l'article Que puis-je faire d'autre avec les déclarations CSS ? dans notre centre d'aide. Modifier le code HTML de mise en page de votre blog Le code HTML de votre blog est simple d'accès et aisément modifiable, ce qui vous permet d'en maîtriser encore davantage la mise en forme :

1. Consultez vote tableau de bord Blogger. 2. Cliquez sur le menu déroulant situé à côté de l' icône grise "Liste des

messages", sélectionnez Modèle. 3. Cliquez sur le bouton Modifier le code HTML sous la section "Disponible sur

le blog". Astuce : Nul besoin de vous inquiéter du code pour changer l'apparence de votre blog ! Consultez la page Outil de création de modèles de Blogger pour créer et utiliser votre propre modèle. Vous pouvez également choisir un modèle sympathique créé par un autre utilisateur. Quelques conseils pour modifier le code HTML de votre blog :

40

Tout d'abord, enregistrez-en une copie. Avant que vous ne modifiez le code, nous vous conseillons de télécharger une copie de votre modèle. Si le résultat n'est pas ce à quoi vous vous attendiez, il vous suffira d'importer cette copie pour revenir à la version originale de votre blog. Assurez-vous d'avoir compris le code HTML de Blogger. Blogger utilise de nombreuses balises personnalisées en plus du code HTML et des CSS. Avant de commencer, il est donc judicieux de se familiariser avec lesbalises d'éléments de page et les balises de polices et de couleurs de Blogger. Trouvez le code pour les éléments de page. Par défaut, afin de simplifier le code, chaque élément de page s'affiche dans celui-ci comme un espace réservé d'une ligne, pour lequel vous pouvez définir les options dans l'interface graphique à partir de l'onglet Mise en page. Cliquez sur "Développer des modèles de gadgets" afin d'afficher la totalité du code correspondant à chaque élément, et découvrez les balises des gadgets de ces éléments. Utilisez notre outil pour modifier les CSS. Si vous souhaitez de plus amples changements de styles, vous pouvez utiliser notreOutil de création de modèles. Vous pourrez ainsi ajouter des feuilles de style en cascade, ou CSS (cascading style sheets), à votre blog. Cette introduction aux CSS vous permettra de vous familiariser avec ce système. Balises d'éléments de page pour la fonctionnalité de mise en page La section <body> d'un modèle de mise en page est composée à l'origine de sections et de gadgets. Les sections délimitent les zones de la page, par exemple la barre latérale, le pied de page, etc. Un gadget est un élément distinct de la page, tel qu'une image, un blogroll, ou tout autre élément que vous pouvez ajouter depuis l'onglet "Éléments de la page". Vous pouvez inclure n'importe quel code HTML autour des sections de votre modèle. Chaque section de votre modèle est dotée d'une balise ouvrante et d'une balise fermante et se présente comme suit : <b:section id='header' class='header' maxwidgets="1" showaddelement="no"> </b:section> Une balise <b:section> peut comporter les attributs suivants :

• id - (obligatoire) Nom unique composé uniquement de lettres et de chiffres. • class - (facultatif) Les noms communs de classe sont "navbar", "header",

"main", "sidebar" et "footer". Si vous changez de modèle ultérieurement, ces noms permettront à Blogger de déterminer la meilleure façon de transférer votre contenu. Vous pouvez toutefois utiliser d'autres noms.

• maxwidgets - (facultatif) Nombre maximal de gadgets pouvant être inclus dans cette section. Si cet attribut n'est pas défini, aucune limite n'est fixée.

• showaddelement - (facultatif) Peut prendre les valeurs "yes" ou "no", "yes" étant la valeur par défaut. Cet attribut détermine si l'onglet "Éléments de la page" affiche le lien "Ajouter un élément à la page" dans cette section.

• growth - (facultatif) Peut prendre les valeurs "horizontal" ou "vertical", "vertical" étant la valeur par défaut. Cet attribut détermine si les gadgets de cette section sont présentés côte à côte ou empilés.

Une section ne peut contenir que des gadgets. Elle ne peut pas contenir d'autres sections ou d'autre code. Si vous devez insérer du code supplémentaire entre ou autour de certains gadgets dans une section, vous devez partager celle-ci en deux ou plusieurs nouvelles sections.

41

Dans sa forme la moins élaborée, un gadget est représenté par une simple balise, qui correspond à un espace réservé indiquant la façon dont le gadget doit être traité dans l'onglet "Éléments de la page". Les données réelles d'un gadget donné sont stockées dans la base de données de Blogger et le système y accède uniquement lorsque le gadget doit être affiché. Voici quelques exemples de gadget (l'un pour un en-tête de page et l'autre pour une liste) : <b:widget id="header" type='HeaderView' locked="yes"/> <b:widget id="myList" type='ListView' locked="no" title="My Favorite Things"/> <b:widget id=”BlogArchive1” locked=”false” mobile=”yes” title=”Blog Archive” type=”BlogArchive”/> Un gadget peut avoir les attributs suivants :

• id - (obligatoire) Doit être composé uniquement de lettres et de chiffres, chaque identifiant de gadget de votre modèle devant être unique. Il est impossible de modifier un identifiant de gadget sans supprimer le gadget lui-même et en créer un nouveau.

• type - (obligatoire) Indique le type de gadget. Le gadget doit être l'un des types valides répertoriés ci-dessous.

• locked - (facultatif) Peut prendre la valeur "yes" ou "no", "no" étant la valeur par défaut. Un gadget verrouillé ne peut être ni déplacé, ni supprimé de l'onglet "Éléments de la page".

• title - (facultatif) Titre affiché du gadget. Si aucun titre n'est précisé, un titre par défaut, tel que "List1" est utilisé.

• pageType - (facultatif) Peut prendre la valeur "all", "archive", "main" ou "item", "all" étant la valeur par défaut. Le gadget ne s'affiche que sur les pages désignées de votre blog. (Tous les gadgets s'affichent dans l'onglet "Éléments de la page", quel que soit leur pageType.)

• mobile - (facultatif) Peut prendre la valeur "yes", "no" ou "only", "default" étant la valeur par défaut. Cet attribut détermine si le gadget s'affiche ou non dans la version mobile. Lorsque l'attribut mobile est "default", la version mobile affiche uniquement les gadgets Header, Blog, Profile, PageList, Adsense et Attribution.

Vous pouvez spécifier les types de gadgets suivants : • BlogArchive • Blog • Feed • Header • HTML • SingleImage • LinkList • List • Logo • BlogProfile • Navbar • VideoBar • NewsBar

Il est également possible d'écrire chaque gadget sous une forme plus développée en détaillant sa mise en page et son contenu complets. C'est ce que vous verrez, par exemple, si vous téléchargez votre modèle depuis l'onglet "Modifier le code HTML" pour en faire une sauvegarde Généralement, vous n'aurez pas besoin d'utiliser les gadgets dans ce mode car il est plus simple de les modifier depuis l'onglet "Éléments

42

de la page". Pour en savoir plus, vous pouvez cependant consulter la rubrique sur les détails des balises de gadgets. Remarque : Dans votre blog publié, toutes les balises <b:section> et <b:widget> seront remplacées par des balises <div> qui prendront l'identifiant indiqué. Par conséquent, vous êtes invité à faire référence à div#header ou div#myList dans votre CSS, si vous le souhaitez. Balises de polices et couleurs pour la fonctionnalité de mise en page Si vous connaissez le langage HTML ou CSS, vous pouvez modifier les polices et les couleurs de vos modèles comme bon vous semble. Cependant, si vous souhaitez que ces balises fonctionnent également avec la fonctionnalité Polices et couleurs de Blogger, vous devrez respecter certains principes. En procédant ainsi, vous pourrez modifier les couleurs plus aisément si vous changez d'avis plus tard. Si vous partagez votre modèle avec une autre personne, elle pourra également personnaliser un peu sa version. Une paire de balises <b:skin> </b:skin> doit figurer dans la section <head> de votre code. Les déclarations de style CSS s'insèrent entre ces balises, tout comme les noms de variable qui permettent le fonctionnement de votre modèle avec la page Polices et couleurs. Avant d'entrer dans les détails, voici un bref aperçu du résultat : <head> ... <b:skin> <style type='text/css'> /* * Variable definitions: * <Variable name='bgcolor' description='Page Background Color' type='color' default='#fff'/> */ body { background: $bgcolor; margin: 0; padding: 40px 20px; } </style> </b:skin> </head> La première partie du code CSS est comprise entre les balises de commentaire /* et */ de sorte qu'elle ne s'affiche pas dans votre blog. Cette partie est utilisée uniquement en interne par Blogger. Elle comprend une liste de variables, une par police ou couleur que vous souhaitez pouvoir modifier dans l'onglet Polices et couleurs. Chaque variable doit comporter les informations présentées dans l'exemple ci-dessus et décrites ici :

• name - ce nom ne peut contenir que des lettres ou des chiffres et chaque nom du modèle doit être unique.

• description - il peut s'agir d'un nom plus descriptif qui peut comprendre des espaces. Cette description s'affichera dans l'onglet Polices et couleurs.

• type - les valeurs possibles sont "font" ou "color" ("police" ou "couleur").

43

• default - valeur par défaut. Pour les couleurs, il doit s'agir d'un code couleur hexadécimal, tel que #FF0066. Pour les polices, il s'agira d'une liste au format font-style font-weight font-size font-family.

Une fois les variables définies, le reste du code ressemble à du code CSS normal, à une exception près. Chaque fois que vous voulez utiliser une couleur ou une police pour laquelle vous avez défini une variable, vous devez entrer $variable_name à la place de la couleur ou de la police. Dans l'exemple ci-dessus, nous avons créé une variable appelée bgcolor et nous l'avons définie en blanc (#fff). Plus loin dans le code, au lieu de définir explicitement la propriété d'arrière-plan du corps en blanc, nous avons simplement indiqué background: $bgcolor. Cette méthode nous permet de définir l'arrière-plan en blanc, mais la différence réside dans le fait que nous pouvons modifier la couleur aisément à partir de l'onglet Polices et couleurs, si nous le souhaitons. À mesure que vous travaillez sur le modèle, vous ajouterez de nombreuses variables pour toutes les polices et couleurs que vous souhaitez contrôler. Vous n'avez toutefois pas besoin de créer des variables pour d'autres types d'attributs CSS. Ces attributs peuvent être normalement intégrés dans le code CSS (comme c'est le cas des attributs margin: et padding: dans l'exemple ci-dessus). Remarque : Si vous avez besoin de tester vos connaissances sur le CSS, vous pouvez commencer ici. Balises des gadgets pour la fonctionnalité de mise en page Les balises de base <b:widget> permettant de créer des gadgets sont décrites dans la rubrique Balises d'éléments de page pour la fonctionnalité de mise en page. Si vous souhaitez simplement utiliser l'onglet Éléments de la page pour effectuer toutes vos opérations, ces informations vont suffiront. Si toutefois vous souhaitez avoir un contrôle plus précis de vos pages, cet article décrit ce que vous pouvez insérer dans un gadget lorsque vous travaillez dans le mode "Développer les modèles de gadget" de la page Modifier le code HTML. La première chose à faire est d'ajouter une balise fermante. Ainsi : <b:widget [...attributs...] /> devient : <b:widget [...attributs...]> </b:widget> Maintenant que nous avons réglé cette question, voyons ce que vous pouvez insérer entre ces balises. Inclusions Le contenu des gadgets est compris dans des sections "includable" qui ont le format suivant : <b:includable id='main' var='thiswidget'> [insérez le contenu souhaité ici] </b:includable> Les attributs sont les suivants :

• id : (obligatoire) identifiant unique composé de lettres et de chiffres. • var : (facultatif) identifiant composé de lettres et de chiffres et servant à

référencer les données au sein de cette section. Reportez-vous à la section de données ci-dessous.

44

Chaque gadget doit comporter une section "includable" avec le code id='main'. Cette section "includable" comporte généralement tout ou partie du contenu qui s'affichera pour ce gadget, ce qui sera suffisant dans bon nombre de cas. Si vous créez plusieurs sections "includable" avec différents identifiants, elles ne s'afficheront pas automatiquement. Cependant, si vous créez une section "includable" avec le code id='new', vous pouvez y faire référence dans votre section principale "includable" avec le code <b:include name='new' /> afin qu'elle s'affiche de cette façon. Les attributs de la balise b:include sont les suivants :

• name : (obligatoire) identifiant composé de lettres et de chiffres. Ce nom doit correspondre à l'identifiant d'un b:includable dans le même gadget.

• data : (facultatif) expression ou élément de données à transmettre dans la section "includable". Ces données deviennent la valeur de l'attribut var dans la section "includable".

Voici un exemple simple d'utilisation de b:includable et de b:include. Les boucles et les données sont décrites plus loin dans cet article. Il est important de noter avant tout la façon dont la section "main" inclut la section "post". Elle transmet un message blog qu'elle appelle "i" et la section incluse y fait référence comme étant sa variable "p", puis elle imprime le titre. <b:includable id='main'> <b:loop var='i' values='posts'> <b:include name='post' data='i'/> </b:loop> </b:includable> <b:includable id='post' var='p'> Title: <data:p.title/> </b:includable> Les inclusions sont particulièrement utiles si vous souhaitez répéter plusieurs fois et à différents endroits une section de code. Il vous suffit d'écrire le code une seule fois, de l'insérer dans un b:includable, puis d'utiliser le code b:include là où vous souhaitez le faire apparaître. Si vous n'avez pas besoin de cette fonction, vous pouvez tout à fait vous contenter de la section "includable" principale. Notez que la section "includable" principale est incluse automatiquement. <b:include name='main'/> n'est pas nécessaire. Données La balise data: est sans aucun doute l'une des plus importantes car c'est elle qui ouvre la voie à tout le contenu. Voici quelques exemples de cette balise : <data:title/> or <data:photo.url/> Le premier exemple est le plus simple et fonctionne dans la plupart des gadgets, la majorité d'entre eux ayant un titre. L'action de cette balise est simple : elle imprime le titre du gadget. Le deuxième exemple présente une variable plus complexe à partir de laquelle il est possible de sélectionner un composant donné. Dans le cadre d'un gadget de profil, la balise photo peut avoir plusieurs composants, tels que url, height et width. Le point "." permet d'indiquer que l'URL recherchée est celle de la photo.

45

Vous pouvez ainsi accéder à un gros volume de données avec la balise data: et ce volume dépend du gadget que vous utilisez. Nous disposons d'une liste complète pour vous aider à trouver les données que vous souhaitez. Boucles La balise b:loop vous permet de répéter plusieurs fois une section de contenu. Elle est plus généralement utilisée pour imprimer chaque message blog d'une liste de messages sur une page donnée ou chaque commentaire, chaque libellé, etc. Le format général d'utilisation d'une boucle est le suivant : <b:loop var='identifier' values='set-of-data'> [le contenu répété figure ici] </b:loop> La partie 'identifier' peut être un nom que vous choisissez. Ce nom sera utilisé au début de chaque nouvel élément de la liste, à chaque apparition dans la boucle. Par convention, cet identifiant est simplement appelé "i". Le jeu de données que vous spécifiez pour les valeurs peut être toute partie des données décrites dans l'article sur les balises de données comme une liste d'éléments. Ainsi, dans le gadget des messages blog, posts est une liste. Un code, similaire à celui qui suit, passe en boucle sur chaque message et imprime le titre de chacun d'eux, avec les balises d'en-tête. <b:loop var='i' values='data:posts'> <h2><data:i.title/></h2> </b:loop> Notez la façon dont le "i" prend successivement la valeur de chaque message de sorte que vous pouvez obtenir le titre de chacun d'eux. If / Else Vous pouvez utiliser les balises b:if et b:else pour afficher le contenu à certains endroits seulement. Le format général est celui-ci : <b:if cond='condition'> [contenu à afficher si la condition est vraie] <b:else/> [contenu à afficher si la condition est fausse] </b:if> La balise b:else est facultative. Sans elle, le contenu peut être soit le contenu répertorié dans la section b:if, soit rien. La balise fermante </b:if> est toutefois obligatoire dans chaque cas. La "condition" peut être toute action ou élément qui peut être vrai ou faux. Certaines balises correspondent à des valeurs de type vrai/faux en elles-mêmes, comme c'est le cas pour la balise allowComments d'un message blog. Vous pouvez comparer les autres données à des valeurs spécifiques pour obtenir une valeur vrai ou faux. Voici quelques exemples :

• <b:if cond='data:post.showBacklinks'> vrai si le message courant est défini pour afficher les liens Backlink.

• <b:if cond='data:blog.pageType == "item"'> vrai si la page courante est une page de type Item (page de message blog).

• <b:if cond='data:displayname != "Fred"'> vrai si ce n'est pas le nom de Fred qui s'affiche.

• <b:if cond='data:post.numComments > 1'> vrai si le message blog courant a plusieurs commentaires.

46

Importer et exporter des blogs L'importation et l'exportation sont réservées aux messages et aux commentaires. Pour enregistrer une copie de votre modèle, cliquez sur le bouton Sauvegarde/Restauration dans l'onglet Modèle. Avec les fonctions d'importation et d'exportation de Blogger, votre contenu gagne en portabilité et en souplesse. Vous pouvez ainsi enregistrer des copies de vos blogs sur votre disque dur et les importer vers d'autres blogs.

Exporter le blog Pour exporter votre blog, cliquez simplement sur "Exporter le blog" dans l'onglet Paramètres | Autre. Enfin, cliquez sur le bouton Exporter le blog. Votre blog sera stocké sous forme de fichier d'exportation Blogger (.xml). Vous pouvez le conserver comme sauvegarde sur votre disque dur, ou l'importer vers un autre blog. Remarque : Les blogs exportés ne sont pas supprimés de votre tableau de bord ou de Blogger.com. Importation vers un blog existant Pour importer les messages et les commentaires vers un blog existant, cliquez sur "Importer le blog" dans l'onglet Paramètres | Autre dans la section "Outils du blog". Ne vous inquiétez pas, le contenu importé n'altèrera pas votre modèle. Sélectionnez ensuite le fichier d'exportation Blogger (.xml) sur votre disque dur et entrez les caractères de vérification. Par défaut, les messages importés ne sont pas publiés. Vous devrez les republier ultérieurement, depuis le tableau de bord. Si toutefois vous souhaitez qu'ils soient publiés immédiatement, cochez la case Publier automatiquement tous les messages importés avant de cliquer sur Importer le blog. Si vous n'avez pas coché la case permettant de publier automatiquement les messages, vous devrez les republier ultérieurement à partir de l'onglet Publication d'un message | Messages importés pour les mettre en ligne. Pour publier tous les messages d'un coup vous pouvez cocher la case située en haut pour sélectionner tous les messages avant de cliquer sur Publier. Vous pouvez aussi simplement cocher une par une les cases correspondant aux messages que vous voulez publier. Découvrez en vidéo comment importer et exporter vos blogs

47