Metre une image pour le titre article et colonne

 Première des choses il faut faire une image avec ton logiciel.  Pour le titre des articles je mets 600x150 e pour le titre des colonnes, 300x150.

Tu peux jouer avec les %

Ensuite tu dois mettre ce code CSS pour les articles:

h3.post-title.entry-title {

    background-image: url(

https://zupimages.net/up/26/06/02qi.png);    background-repeat: no-repeat;

    background-position: center;

    background-size: 60%;

    padding: 15% 1% 5% 1%;

    margin:0px 0px 0px 0px;

    text-align: center; 

}

pour les titres des colonnes: là aussi tu peux mosidifier les%

.main-inner .sidebar .widget h2 {

    background-image: url(https://zupimages.net/up/26/06/8xa3.png);

    background-repeat: no-repeat;

    background-position: center center;

    background-color: #;

    background-size: 100%;

    padding: 43% 1% 20% 1%;

    margin: 0% 0% 0% 0%;

    text-align: center;

}

j'espère avoir pu vous aider un peu, merci et bonne journée

Boutons sous la bannière revisité

Je crois avoir trouvé la bonne façon pour que le titre du bouton apparaisse

Dans un gadget HTML

HTML

<div class="Bouton"><a href="https://huguette2307.blogspot.com"  style= "color: black;">partage</a></div>

<div class="Bouton"><a href="https://huguette2307.blogspot.com" style= "color: black;">Design de blogs</a></div>

<div class="Bouton"><a href="https://huguette-au-fil-des-saisons.blogspot.com" style= "color: black;">Au fil des Saisons</a></div>

<div class="Bouton"><a href="https://huguette2.blogspot.com" style= "color: black;">Animations HTML5</a></div>

Dans le CSS

.Bouton {

    background-image: url(https://zupimages.net/up/26/09/p8xp.png);

    background-repeat: no-repeat;

    background-position: center top;

display: inline-block; 

    font-size: 12px;

    font-weight: bold;    color: black;

    padding-left:5px; padding-top: 40px;

width: 200px; height: 30px;

    margin: 5px 5px;

line-height: 10px;

    text-align: center;

}

j'espère avoir pu vous aider un peu, bonne soirée, bisous

Modifier la forme des images

 Je te mets les lien, amuses-toi

Chez Sorcière Corbeau

https://les-astuces-blogger.blogspot.com/p/des-formes-arrondies-au-survol-de-vos.html

https://9elements.github.io/fancy-border-radius/#75.51.78.48--.

cadre arrondi s'efface au passage de la souris dans les coins

Css pris chez Sorière Corbeau

====== Style de noyau a rectangle == ====

.post-body img {

background:#FFF; /* Couleur d'arrière-plan autour de l'image * /

padding:15px; /* L'espace entre la bordure et l'image */

border-radius: 50% 0; /* Bordure arrondie */

box-shadow: 0px 0px 15px #000; /* Ombre */

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

}

.post-body img:hover {

border-radius:0; /* Suppr. l'arrondi de la bordure (valeur 0) */

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

cursor:pointer;

}

Image ronde CSS

.post-body img {

box-shadow: 0px 0px 12px #000; /* Ombre */

border-radius: 50%; /* Bordure arrondie */

border:0;

padding:0;

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

}

.post-body img:hover {

box-shadow: 0; /* Suppr. l'ombre (valeur 0) */

border-radius: 0; /* Sppr. l'arrondi de la bordure (valeur 0) */

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

cursor:pointer;

}

Bonne journée

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;

}