Les tuto 2 Demolite

30 novembre 2010

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

Comme ceci :

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 vos pages html.

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

<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://Adresse de l'image" /></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://Adresse de l'image" /></p></div>