Centrer le titre des articles dans Blogger

Voici comment centrer le titre des articles Blogger proprement et rapidement

Il existe plusieurs méthodes mais celle-ci vous permet de garder une trace de vôtre modification pour vous y retrouver si vous changer d'avis par exemple. Si vous n'êtes pas un pro du CSS, je vous conseille d'agir ainsi pour toutes les modifs que vous ferez, d'ailleurs même les pros laissent des commentaires pour s'y retrouver. Accédez au blog que vous voulez modifiez dans Blogger, puis allez dans "Modèle", puis dans "Modifier le code HTML":

Cliquez n'importe où dans le "code HTML" et appuyer sur les touches "ctrl" et "F" en même temps. Dans le formulaire de recherche qui apparaît tapez "h3.post-title":

Appuyez sur "Entrée" jusqu'à arriver sur cette ligne (n°412 sur l'image ci-dessous) et ajouter simplement la propriété "text-align" avec la valeur "center" soit "text-align: center;" juste avant la dernière accolade comme sur l'image:

Je vous conseille de laisser un commentaire pour retrouver la modification en faisant une recherche. Pour cela, utiliser les balises /* et */ en plaçant vôtre commentaire au milieu comme ci-dessous:

Vous n'avez plus qu'a enregistrer en cliquant sur "Enregistrer le modèle".

Créer une bannière pour son site ou son blog rapidement avec Gimp!

Bonjour, nous allons voir comment créer une bannière de bonne qualité rapidement en utilisant Gimp. Cette méthode est particulièrement très pratique et utile aux utilisateurs de Blogger, mais convient aussi à tous débutant webmaster. De plus, si vous ne connaissez pas encore le fameux éditeur d'image Gimp c'est l'occasion de le découvrir et d'apprendre à s'en servir.

Gimp est libre, gratuit et disponible pour Windows.

Exemple de bannière avec thème "Payasage étoilé"

Télécharger et installer Gimp sous Windows:

Vous pouvez télécharger Gimp pour Windows ici: http://sourceforge.net/projects/gimp-win/

Vous trouverez procédure d'installation, tutos et conseils ici: http://wiki.gimp-attitude.org/Installation

Télécharger et installer Gimp sous Ubuntu:

Ajoutez Gimp à vôtre distribution GNU/Linux en quelques clics comme expliquer sur Ubuntu-fr: http://doc.ubuntu-fr.org/gimp

Méthode pour créer une bannière rapidement avec Gimp:

1. Lancer Gimp, puis allez dans: Fichier-->Créer-->Logos comme ci-dessous:

2. Une fois sur "Logos", une liste de thèmes apparaissent:

3. Choisissez un thème et cliquez dessus, une petite fenêtre s'ouvre avec des paramètres à compléter: (ici j'ai choisi le thème "Paysage étoilé")

4. Choisissez le titre de vôtre site, la taille du texte, la police et la couleur de la lueur puis cliquez sur Valider et vous obtenez une bannière:

5. Voilà, c'est tout, je vous conseille de faire plusieurs essais avec différents thèmes et paramètres, une fois que vous avez fini enregistrer vôtre travail en allant dans: Fichier-->Enregistrer sous.

Voilà comment faire pour réaliser une belle bannière rapidement avec l'éditeur d'image Gimp, vous pouvez regardez la vidéo du tuto ci-dessous:

Supprimer la navbar de Blogger?

Vous avez créer un blog chez Blogger, vous avez publier du contenu, et vous avez personnalisez l'esthétique de vos pages. Seulement voilà, la barre de navigation Blogger fait tâche et vous voulez un blog 100% personnalisé par vos soins. Il vous suffit de supprimer ou de masquer cette fameuse barre en ajoutant quelques lignes de C.S.S au code source de vôtre blog.

Exemple avec la navbar Blogger affichée.

Cette barre fait de la pub pour Blogger qui ne l'oublions pas est totalement gratuit, mais en même temps les utilisateurs veulent un blog qui fasse "pro", avec un nom de domaine et un aspect irréprochable. C'est vous qui décider, et rien ne vous empêche de placer quelque part un lien vers Blogger à vôtre façon.

Mon avis perso est qu'il faut simplement masquer la navbar pour une question d’esthétique.

Vous avez donc le choix de masquer l'élément ou de le supprimer. Nous allons voir les deux méthodes (Il en existe d'autres, mais après divers tests j'ai opter pour celles-ci qui sont pour moi les plus propres).

Méthodes pour supprimer ou masquer la barre de navigation Blogger:

1. Rendez-vous sur vôtre tableau de bord Blogger.
2. Entrez dans la catégorie "Modèle".
3. Cliquez sur "Modifier le code html", cette fenêtre apparaît:

    

Cliquez sur "Traiter", et vous avez accès au code HTML:

  Recherchez la section "Header" avec les touches ctrl+f en tapant /*Header dans le champ de recherche:

 Ajoutez un de ces codes juste après le titre de la catégorie "Header":

  Ce code supprime la barre de navigation:

 .navbar {   display: none !important; }

    Ce code masque la barre de navigation:

 .navbar {   height: 0px !important;   visibility: hidden !important; }

  Pour ajouter un commentaire dans un code C.S.S pour s'y retrouvez  plus tard on utilise les balises /* et */:

 /*Ici le commentaire*/  

Une fois les modifications terminées, cliquez sur "Enregistrer le modèle" et rafraîchissez la page de vôtre blog. Vous obtenez une page sans barre de navigation Blogger:

La navbar Blogger non affichée.

Vous pouvez aussi masquer la navbar, mais l'élément prend encore de la place ce qui donne un espace vide en haut de la page:

La navbar Blogger non affichée avec un espace vide.

 Pour obtenir cet espace vide, il faut utiliser le code pour masquer la barre en retirant la ligne réduisant la hauteur ce qui donne ceci:

 .navbar {visibility:hidden !important;}  

Voilà, c'est pas plus compliquer que ça, je vous conseille de faire régulièrement des sauvegardes et de commenter les modifications que vous faites sur le code du blog. Si vous changer de template (modèle), il faudra refaire les modifs!! Le mieux c'est de choisir un modèle et de l'arranger à vôtre sauce pour ne plus avoir a en changer.

Comment installer un thème sur un site avec Stylish?

Pour redécorer vos page web préférées en installant des thèmes, c'est vraiment très facile. Il faut d'abord installer Stylish, voir les explications ici. Une fois Stylish installer, il vous suffit de:

1. Vous rendre sur la page du thème ("style"):

J'ai choisi le thème pour Google "Hello Kitty" par Tuglife, donc je me rend sur la
page du thème sur le site Userstyles.org: http://userstyles.org/styles/22788/google-hello-kitty-theme-updated

2.Cliquez sur le bouton "Install with Stylish" (Installer avec Stylish):

Vous avez ensuite cette petite fenêtre de confirmation qui apparaît, vous avez juste à confirmer
en cliquant sur "Installer":

(remarquez le bouton "Editer" qui permet de modifier le style avant de l'installer si vous toucher un peu en CSS)

3. Voila! Le thème est installer:

Le bouton "Install with Stylish" devient "Style installed", et vous pouvez vous rendre sur le site pour voir le nouveau "design". Vous pouvez gérer les thèmes facilement en cliquant sur l'îcone Stylish ou en vous rendant dans les modules complémentaires: Firefox/Modules complémentaires/Styles utilisateurs (Firefox 13).
Voilà, c'était vraiment trop simple! Dans le tuto j'ai choisi un thème que j'ai créer, mais que je n'ai pas mis à jour depuis longtemps, donc en attendant la mise à jour, choisissez un autre style, ceux pour Facebook sont vraiment très beaux (voir la vidéo).

Comment installer stylish?

Voici comment installer Stylish sur le navigateur Firefox, et comment installer un thème sur Facebook, Google ou Youtube...

Installer Mozilla Firefox:

Pour installer l'extension Stylish vous devez utilisez le navigateur web Firefox, il vous suffit de vous rendre sur la page d'accueil du site de Mozilla, www.mozilla-europe.org, de le télécharger sur vôtre bureau et de lancer l'installation (si vous avez un doute vous pouvez suivre l'installation pour Windows en détail ici). Le navigateur Firefox qui en est actuellement à ça 12ème version a une très bonne réputation, il est gratuit, rapide, sécurisé et est très personnalisable ce qui en fait le principal concurrent d'Internet Explorer!

Edit: il semblerait que Stylish soit aussi compatible avec: Chrome, Opera, et Explorer 

         mais je préfère largement Firefox. 

Installer Stylish:

Une multitude de modules d'extension existent pour améliorer Firefox, vous pouvez visitez la page modules du site de Mozilla pour vous rendre compte à quel point ce navigateur peut être modulable. Pour installer un module cliquez simplement sur le lien "ajouter à Firefox", il le télécharge, vous demande de confirmer et l'installe.

L'extension qui nous intéressent ici c'est Stylish, le "décorateur de page web" de Jason Barnabe qui permet d'installer des "styles" sur des pages web, ce sont en fait des pages de C.S.S, un langage de programmation web qui gère l'esthétique d'un site. Vous pouvez utilisez plusieurs styles sur différents sites, mais pas deux styles sur un même site. Stylish est très pratique, l'installation ou le changement de style prend quelques secondes, vous pouvez changer de style rapidement avec un clic sur l'icône Stylish, ce qui permet de tester plusieurs styles sur un site avant de choisir.

Thème pour Google "Hello kitty" par Tuglife

Je vous conseille de n'installer que des modules pour Firefox provenant du site officiel de Mozilla et dont l'auteur est connu (exemple:Stylish). Choisissez en fonction des notes et critiques des utilisateurs, les modules les plus populaire sont mis en avant.

Sur ce site, je publie seulement des thèmes pour Stylish vérifiés, c'est à dire ne contenant aucun script suspect, que du C.S.S, et dont l'auteur à déjà produit plusieurs styles fiables.

1. Rendez vous sur la page de Stylish du site de Mozilla:  https://addons.mozilla.org/fr/firefox/addon/stylish/

2. Cliquez sur le bouton "ajouter à Firefox", une petite fenêtre s'ouvre, patientez quelques secondes puis cliquez sur "Installer maintenant":

3. Firefox télécharge et installe le module, patientez pendant l'installation, il vous demande ensuite de redémarrer le navigateur afin de prendre en compte les changements, cliquez sur "Redémarrer Firefox":

Voilà, c'est tout! Vous pouvez maintenant personnaliser toutes vos pages web préférées! Pour installer un style, il suffit de cliquez sur le bouton "installer avec stylish" sur la page du style sur le site userstyles.org, le site du développeur de Stylish regroupant les styles des nombreux contributeurs (site en anglais). Une fois le style installer, vous pouvez le désactivez, le supprimer ou le modifier pour en faire un style personnel. Si vous avez des questions, critiques, demandes d'aides à propos de Stylish merci de laisser un commentaire.