Ajouter une présentation de l'auteur à la fin de chaque sujet

Publié par BENTALEB Othmane à 17:43

Bismillah. Bienvenue sur Outils Blogger www.outils-blogger.blogspot.com : Outils, Astuces, Widgets, Modèles, Adsense, Seo.

Nous allons ajouter une présentation de l'auteur du blog à la fin de chaque sujet pour les blog avec un seul auteur et aussi avec plusieurs auteurs.

Outils Blogger www.outils-blogger.blogspot.com : Outils, Astuces, Widgets, Modèles, Adsense, Seo.

Pour les blog avec un seul posteur :

Orientez-vous à :Présentation ---> Modifier le code HTML ---> Développer des modèles de gadgets
Ajouter le code css suivant juste avant : ]]></b:skin>

/* Author Bio */
.postauthor {
    background: #F5F5F5; 
    border-top: 1px solid #e1e1e0; 
    border-bottom: 1px solid #e1e1e0; 
    overflow: hidden; 
    padding: 0.7em;
}
.postauthor img {
    border: 5px solid #e2dede; 
    float: right; 
    margin-left: 1em;
}
.postauthor h3 {
    color: #666; 
    font-size: 1.2em; 
    margin-bottom: 5px; 
    margin-top: 0;
}
.postauthor p {
    color: #515151; 
    font-size: 12px; 
    margin-bottom: 10px;
    margin-top: 0;
}
/* Author Bio End */

Coller le code si-dessous juste après : <data:post.body/>

Remarque : s'il y en a deux code <data:post.body/> choisissez le deuxième

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='postauthor'>
 <img alt='' height='80' src='lien d'image personnelle' width='80'/>
 <h3>Posté par <a href='Blog Link'> Nom de l'auteur (le même sur le blog) </a></h3>
 <p> Information sur l'auteur </p>
</div>
</b:if>

changez les codes en rouge et sauvegardez le modèle

Outils Blogger www.outils-blogger.blogspot.com : Outils, Astuces, Widgets, Modèles, Adsense, Seo.

Pour les blogs ayant plusieurs posteurs

Orientez-vous à :Présentation ---> Modifier le code HTML ---> Développer des modèles de gadgets
Ajouter le code css suivant juste avant : ]]></b:skin>

/* Author Bio */
.postauthor {
    background: #F5F5F5; 
    border-top: 1px solid #e1e1e0; 
    border-bottom: 1px solid #e1e1e0; 
    overflow: hidden; 
    padding: 0.7em;
}
.postauthor img {
    border: 5px solid #e2dede; 
    float: right; 
    margin-left: 1em;
}
.postauthor h3 {
    color: #666; 
    font-size: 1.2em; 
    margin-bottom: 5px; 
    margin-top: 0;
}
.postauthor p {
    color: #515151; 
    font-size: 12px; 
    margin-bottom: 10px;
    margin-top: 0;
}
/* Author Bio End */

Coller le code si-dessous juste après : <data:post.body/>

Remarque : s'il y en a deux code <data:post.body/> choisissez le deuxième

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Présentation du premièr auteur -->
<b:if cond='data:post.author == &quot;Nom de l'auteur 1&quot;'>
<div class='postauthor'>
   <img alt='' height='80' src='lien d'image personnelle' width='80'/>
   <h3>Posté par <a href='Blog Link'> Nom de l'auteur (le même sur le blog)</a></h3>
   <p> Information sur l'auteur </p>
 </div>
</b:if>
<!-- Présentation du deuxième auteur -->
<b:if cond='data:post.author == &quot;Nom de l'auteur 2&quot;'>
<div class='postauthor'>
   <img alt='' height='80' src='lien d'image personnelle' width='80'/>
   <h3>Posté par <a href='Blog Link'> Nom de l'auteur (le même sur le blog)</a></h3>
   <p> Information sur l'auteur </p>
 </div>
</b:if>

</b:if>