[Topic unique] Entraide technique forum et blogs #2

<div id='divBtn'>
  <button id='ar'>
    <!--Remplacer: "tonLien.fr" par le lien de votre choix, ainsi que le texte du bouton, 
     qui apparaîtra à l'écran-->
    <a href='tonLien.fr' class='lienBtn'>Texte du Bouton</a>
  </button>
</div>

Regardez cette ligne: "  <!--Remplacer: "tonLien.fr" par le lien de votre choix, ainsi que le texte du bouton, qui apparaîtra à l'écran--> ".
C'est un conseil : pour vous en souvenir plus tard, je l'ai inscrit dans le code.

Maintenant, pour que ce bouton soit joli comme tout, il faut installer son style.

Allez dans "Thème" sur votre tableau de bord Blogger, puis cliquez sur : "Modifier le code HTML".
Cliquez dans la boîte de code qui est affichée à l'écran.
Faites le raccourci clavier: Ctrl+F (appuyez sur la touche Ctrl de votre clavier ou ⌘ sur Mac, puis appuyez sur F, en maintenant appuyée l'autre touche.)
Un champ de saisie apparaît en haut à droite de la boîte de code.
Dedans, copiez-collez ceci: [c]<b:skin>[/c], puis appuyez sur Entrée.
En bas à gauche de l'écran, vous voyez écrit [c]<b:skin>[/c], et surligné en jaune.
Un peu à gauche, vous voyez un petit triangle noir. Cliquez dessus.
Si vous descendez un petit peu, vous verrez que en-dessous, tout est écrit en bleu. C'est du CSS. C'est là où on va copier-coller notre prochain code !
Maintenant, recherchez dans le champ de saisie en haut à droite "[c]]]></b:skin>[/c]"
Juste au-dessus, copiez-collez le code suivant (et le dernier) :

#divBtn {
  text-align: center; /* Alignement du bouton: 
  left pour gauche; right pour droite; et center pour centré */
}

.lienBtn {
  color: black; /* Couleur du texte du lien */
  text-decoration: none;
}

#ar {
  background-color: white; /* Couleur de fond du bouton */
  border: 1px solid black; /* Bordure: dans l'ordre: épaisseur en pixels; 
  type de bordure; couleur de la bordure*/
  border-radius: 20px; /* Coins arrondis: mettre la valeur à 0px pour les mettre carrés */
  padding: 5px;
  font-size: 40px; /* Taille de la police */
  -webkit-transition: all 0.5s ease-in-out 0s;
  -moz-transition: all 0.5s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0s;
}

#ar:hover {
  -webkit-transition: all 0.5s ease-in-out 0s;
  -moz-transition: all 0.5s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0s;
  font-size: 30px; /* Taille de la police au survol */
}

Vous pouvez suivre les commentaires : /* Ceci est un commentaire pour vous aider à changer le style du bouton */.
Par exemple, pour modifier la taille du bouton à l'état normal et l'état survolé par la souris, changez ces valeurs: [c]font-size: 40px;[/c] pour l'état normal, et [c]font-size: 30px;[/c] pour le bouton  quand il est survolé par la souris.
ATTENTION ! Changez juste la valeur numérique ! (Par exemple, dans la première valeur, changez juste le [c]40[/c], mais n'enlevez jamais un [c];[/c], un [c]:[/c] ou un [c]{[/c]).
A part, bien sûr, pour les couleurs. Là, vous pouvez mettre différents mots : black pour noir, white pour blanc,  etc... Ou, si vous voulez une couleur très précise, allez sur ce site. Une palette de couleurs est disponible, et vous choisissez la couleur que vous voulez, puis vous copiez le code  écrit à côté qui commence par un #, et qui est suivi de 6 chiffres ou lettres. Collez-le à la place de [c]black[/c] ou [c]white[/c] par exemple.

J’espère que je vous ai aidé, à plus !

1) Alors je vois pas pourquoi il s'affiche comme ça au premier coup d'oeil, mais faire disparaitre quelque chose en css c'est display: none; . Donc dans ton code qui gère le admin, tu as ça :

span.icon.user.blog-author:after {
    background-color: #999;
    color: #eee;
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: normal;
    font-size: 13px;
    content: "Admin";
    display: inline-block;
}

Et il faut que tu changes la dernière ligne par display: none; . Tu peux même faire plus simple en effaçant la ligne "content: "Admin"; =)

2) Ce qui gère la taille de tes images c'est ça :

.blog-content .post .post-media img {
    width: 100%;
}

ça permet de prendre toute la taille du bloc. Si tu le passe à 0, ça déforme totalement ta page d'accueil. Il faut soit trouver des images adaptées (ce qui ne manque pas ;) ), soit trouver un pourcentage qui ne change pas trop la taille sans déformer ta page.