Blogger, centrer sa bannière.

Plop les loulous,

Comme l’actu est tristounette et assez pauvre, je vais prendre le temps de vous faire partager une petite astuce.

J’ai ajouté une bannière sur mon blog hier et j’ai galéré comme un chameau pour la centrer.
Car en effet quand vous ajoutez une image ou une bannière, allez savoir pourquoi celle-ci se va se loger mordicus à gauche.
J’ai crié, pleuré, imploré, menacé j’ai failli m’auto mutiler avec des orties avant de me reprendre et de vraiment chercher comment faire.

En fait c’est très simple, on va voir vite fait comment procéder.

On range les orties. Et ensuite on va se rendre dans le panneau de gestion de Blogger.
On sélectionne Présentation et on  upload notre image en modifiant le champs qui contient le titre. Mais ça vous savez sans doute le faire.
Vous allez constater ensuite que votre balise n’est pas centrée, c’est la que les ennuis commencent.

Pas de panique, il suffit de se rendre à nouveau dans présentation.

Choisir l’option « modifier le code HTML » et de cocher « Développer des modèles de gadgets ».

Ensuite on va effectuer une petite recherche dans le code, faites « CRTL+F » et entrez ce mot-clé : « .header-inner« 

Cherchez alors la section :

« .header-inner .Header .descriptionwrapper {
  padding: 0 $(header.padding);}
« 

Et entre celle-ci et « /* Tabs« , insérez la section de code suivante :

« #header-inner img {
margin-left: auto;
margin-right: auto;
}
« 

Il peut y avoir une alerte dans la mesure ou il s’agit d’une modification du CSS, si vous utilisez NoScript. Ignorez la bien sûr.

Il ne reste plus qu’à enregistrer les changements et le tour est joué. Votre bannière est centré et vous pouvez ranger les orties.

Important, quand vous effectuez ce genre de manipulations n’oubliez pas avant de sauvegarder votre template.

Moo !!!


14 Responses

  1. Lemon June 11 février 2013 / 10 h 20 min

    Un grand merci! Ca fait plusieurs jours que je bataille avec le code html sans trouver et grpace à toi pif pam poum en deux secondes c’est fait!

  2. Facedechips 25 janvier 2013 / 17 h 43 min

    Merciii ça faisait un moment queje cherchais comment faire :)

  3. Marion 14 décembre 2012 / 15 h 27 min

    MILLE MERCIS!

    M.

  4. Renouf 12 août 2012 / 22 h 23 min

    Je n’ai rien dit : en fait pour mon cas il faut faire comme ca : supprimer les guillemets et le dieze puis ajouter un point devant header.
    .header-inner img {
    margin-left: auto;
    margin-right: auto;
    }

    Merci bcp

  5. Renouf 12 août 2012 / 22 h 18 min

    bonjour, j’ai essayer votre methode cela fonctionne pas !!
    cordialement

  6. Noireaude 10 juillet 2012 / 18 h 11 min

    Ouff !!! je suis arrivé à temps alors ;)

  7. Mélanie LC. 10 juillet 2012 / 18 h 08 min

    HAHA merci ! J’étais justement en train de m’auto-mutiler !

  8. Noireaude 18 février 2012 / 21 h 13 min

    Tu as un bouton orange « enregistrer les changements » dans le tableau de bord.

  9. aoufi 18 février 2012 / 15 h 16 min

    cc super explication j’ arrive jusqu’a l’enregistrement c’est ou? merci

  10. Noireaude 8 janvier 2012 / 11 h 14 min

    De rien, c’est vrai que c’est pratique ;)

  11. Alexandra 8 janvier 2012 / 11 h 02 min

    Trop bien!! Je viens de le faire, ça change tout!! Mercii

Comments are closed.