05-08-2007

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="http://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="http://storage.canalblog.com/38/41/255038/15789486.gif" alt="ligne_musique_rouge" /></p></div>