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é par <$BlogItemAuthorNickname<div class="itemfooter">Posté par <$BlogItemAuthorNickname$> à <$BlogItemDateTime$> <BlogItemCategories> - <a href="<$BlogItemCategoryLink$>" title="Autres messages dans cette catégorie"><$BlogItemCategoryName$></a> </BlogItemCategories> <BlogItemComments> - <a href="<$BlogItemCommentsURL$>" title="Commentez ce message">Commentaires [<$BlogItemCommentsCount$>]</a> </BlogItemComments> <BlogItemTrackBacks> - <a href="<$BlogItemTrackBacksURL$>" title="Rétroliens">Ré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é 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é par <$BlogItemAuthorNickname$>
à <$BlogItemDateTime$> <BlogItemCategories> -
<a href="<$BlogItemCategoryLink$>" title="Autres messages dans
cette catégorie"><$BlogItemCategoryName$></a>
</BlogItemCategories> <BlogItemComments> - <a
href="<$BlogItemCommentsURL$>" title="Commentez ce
message">Commentaires [<$BlogItemCommentsCount$>]</a>
</BlogItemComments> <BlogItemTrackBacks> - <a
href="<$BlogItemTrackBacksURL$>"
title="Rétroliens">Ré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>
Rien à redire
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.
[Filp] j'ai fait tout ce quil fallait avec la première méthode mais le séparateur n'apparait pas [je cherche]
[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]
et voila ça marche merci beaucoup [Fleur]
URL pour faire un rétrolien vers ce message :
http://www.canalblog.com/cf/fe/tb/?bid=251752&pid=5906101
Liens vers des weblogs qui référencent ce message :
Haut de Page
Des articles
Des commentaires
[Hi]Je savais bien que je trouverai la réponse à ma recherche sur ton blog[Fleur]
Merci beaucoup![Chesse]