Tuto pour débutants - LIBELLÉS

 coucou, j'ai fait ce petit tuto pour aider Jujudi, mais ça pourrait peut-être servir pour quelqu'un d'autre.  Je trouve que Blogspot est très difficile pour un débutant.

Si vous ne voyez pas bien mon écriture, clic sur l'image pour l'agrandir

tu vois tu peux cliquer soit sur ton bouton Mes créations ou dans la colonne Libellés et tu arrive dans ton article "Sous le soleil"

blog de Jujudi 

https://jujudi1951.blogspot.com/

Boutons sous la bannière

 

Disons que j'ai pris des codes un peu partout pour faire le mien

Dans un gadget HTML 

le code que j'ai pris

<div id='barre_nav'> <ul>

<li><a title="Bonjour Paris" href="https://demo-design-1.blogspot.com"><img src="https://zupimages.net/up/25/24/rxbm.png" /></a></li>

chaque lien que vous ajoutez ça doit commencer par <li> et se terminer par </a></li>

Quand vous avez terminé en bas ça devrait être

</ul></div>

*****************************

Ensuite dans le CSS mon code

/*boutons entête*/

#barre_nav ul li a{

list-style-type: none;

display:inline;

margin:-2px;

padding:10px;

border:0px solid;

}

De cette façon vous n'êtes pas obligé de jouer dans le HTML du blog

Je n'ai pas trouvé comment mettre le nom sur le bouton alors

je l'ai mis dans mon PSP pour chaque bouton.

Si vous avez des questions à ce sujet, j'essaierai d'y répondre, mais je débute avec les boutons.

MonCSS Enlever la date de l'artticle

/*Supprimer date article*/

.main-inner .widget h2.date-header span {

    display: none;

   }

 

Mon CSS supprimer le bouton partage

 Pour supprimer ce bouton:

code à copier dans le CSS

/*Supprimer le bouton partage*/

.post-share-buttons { display: none!important;

}

Mon CSS - bordures et coins arrondis

 /*titre colonne*/

div.widget > h2, div.widget h2.title {

         padding:10px;

    border-radius: 25px;

    border: 4px solid #3346ff ;

margin: 0 0 1em 0;

text-align:center;

   }

/*distance contour*/

.main-inner .widget h2 {

    margin: 0 0px;

       border-bottom: 3px solid #3346ff;

}

/*titre article*/

h3.post-title  {border:3px solid #3346ff ;

padding: 6px; border-radius: 25px;

text-align:center;

 }

/*bordure article*/

.post-body { background-color:#000000;  border-radius: 25px; border: 2px solid #3346ff;

}

/*bordure de l'image METRE LE NOMBRE DE PX*/

.post-body img {

    padding: 8px;

     border: 0px solid #3346ff;

    border-radius:25px;

}

/*Widget de la petite colonne*/

.main-inner .widget {

    background-color:  #000000;

    border:  1px solid #3346ff ;

border-radius: 25px;

    padding: 5px 5px 5px 5px;

    margin: 20px -16px;

    margin-top: 20px;

    text-align: center;

   }

ligne simple= solid

pointillé= dotted

double=double

Belle Image