SEPARATEUR POUR "LE POSTE PAR"

A la demande de Crispy ...

Voici comment faire pour encadrer ou mettre un séparateur au dessus du "posté par", ce qui permet de bien séparer vos messages les uns des autres...



Voici 2 méthodes, la première en passant par la "feuille de style", ce qui aura pour effet d'installer le séparateur sur toutes les pages de votre blog.

Repérez le bloc suivant dans la feuille de style et ajoutez les "2 dernières lignes" en collant l'adresse de votre image.

.blogbody .itemfooter {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #404040;
    font-size: x-small;
    font-weight: normal;
    font-style: normal;
    text-transform: none;
    text-align: left;
    margin-bottom: 25px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-width: 2px;
    border-color: #000000;
    padding: 3px;
    clear: both;
    background: url("Adresse de votre image") no-repeat 0% 0%;
    padding-top: 20px;
}

Modifier la valeur de padding-top pour placer l'image soit sous les écritures du "posté par" soit au dessus.

La deuxième méthode, permet de mettre le séparateur au dessus et en dessous du "posté par" et vous pouvez également rajouter les balises <center> </center> pour centrer votre image.
Mais vous devez répéter cette opération sur toutes les pages.

Ouvrez la "page d'accueil" et repérez dans le "content" le bloc suivant, qui correspond à la ligne du "posté par" en bas de vos messages :

<div class="itemfooter">Post&eacute; par <$BlogItemAuthorNickname<div class="itemfooter">Post&eacute; par <$BlogItemAuthorNickname$> &agrave; <$BlogItemDateTime$> <BlogItemCategories> - <a href="<$BlogItemCategoryLink$>" title="Autres messages dans cette cat&eacute;gorie"><$BlogItemCategoryName$></a> </BlogItemCategories> <BlogItemComments> - <a href="<$BlogItemCommentsURL$>" title="Commentez ce message">Commentaires [<$BlogItemCommentsCount$>]</a> </BlogItemComments> <BlogItemTrackBacks> - <a href="<$BlogItemTrackBacksURL$>" title="R&eacute;troliens">R&eacute;troliens [<$BlogItemTrackBacksCount$>]</a> </BlogItemTrackBacks> - Permalien [<a href="<$BlogItemURL$>" title="Lien permanent vers ce message">#</a>]</div>

Pour mettre un séparateur au dessus du "posté par", collez "l'adresse de votre image entière" juste avant : Post&eacute; par
et pour le mettre en dessous collez "l'adresse de votre image entière" juste avant : </div>

Comme ceci :

<div class="itemfooter"><p><center><img width="457" height="27" border="0" src="https://storage.canalblog.com/38/41/255038/15789486.gif" alt="ligne_musique_rouge" /></center></p>Post&eacute; par <$BlogItemAuthorNickname$> &agrave; <$BlogItemDateTime$> <BlogItemCategories> - <a href="<$BlogItemCategoryLink$>" title="Autres messages dans cette cat&eacute;gorie"><$BlogItemCategoryName$></a> </BlogItemCategories> <BlogItemComments> - <a href="<$BlogItemCommentsURL$>" title="Commentez ce message">Commentaires [<$BlogItemCommentsCount$>]</a> </BlogItemComments> <BlogItemTrackBacks> - <a href="<$BlogItemTrackBacksURL$>" title="R&eacute;troliens">R&eacute;troliens [<$BlogItemTrackBacksCount$>]</a> </BlogItemTrackBacks> - Permalien [<a href="<$BlogItemURL$>" title="Lien permanent vers ce message">#</a>]<p><img width="457" height="27" border="0" src="https://storage.canalblog.com/38/41/255038/15789486.gif" alt="ligne_musique_rouge" /></p></div>

Comments

[♥Sofie So Cosy♥]

youpiiiiiiiiiiiiiiii.. ça marche encore !! tiè la plus forte !! [Super]
Bravo et biz [Salut][Fleur]

[Mlle audrey]

et voila ça marche merci beaucoup [Fleur]

[Demolite !]

[Salut]
Non jeune fille, tu n'as pas fait comme sur le tuto ! [Nul]
Colle ce bloc à la place du tien et ton séparateur apparaitra ! [Chesse]

.blogbody .itemfooter {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #404040;
font-size: x-small;
font-weight: normal;
font-style: normal;
text-transform: none;
text-align: left;
margin-bottom: 25px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 2px;
border-color: #;
padding: 3px;
clear: both;
background: url("http://img176.imageshack.us/img176/567/20382735pzn1.jpg") no-repeat 0% 0%;
padding-top: 50px;
}

[Salut]

[Mlle audrey]

[Filp] j'ai fait tout ce quil fallait avec la première méthode mais le séparateur n'apparait pas [je cherche]

[mookie]

Je te remercie, une fois de plus, pour ce talent (inné?! lol) envers le CSS/HTML...

Pour moi, avant de matter ton blog, c'était du russe, depuis quelque temps, je suis ravi de voir du HTML ...

Encore, félicitations.