Last posts on personnaliser son blog

Distinguer ses réponses au sein des commentaires

2009-03-30T16:37:00+02:00

En ce lundi, une nouvelle fonctionnalité fait son apparition sur votre plateforme Hautetfort.

Il s'agit de distinguer vos réponses, au sein des commentaires de votre blog, par l'application d'un fond coloré.

Cette fonctionnalité est très utile pour les blogs qui recueillent beaucoup de commentaires, et rend les fils de commentaires plus digestes, et plus lisibles.

La mise en place nécéssite quelques menues manipulations de votre part pour mettre vos template à jour, je vous recommande donc vivement de cliquer sur Lire la suite !

Pour finir, sachez que cette fonctionnalité fonctionne par reconnaissance de l'adresse mail que vous avez renseignée dans votre interface d'administration. Pensez-bien à saisir la même lorsque vous répondez à vos commentaires ;)

Plusieurs cas de figure vont se présenter :

1. Vous n'avez jamais changé votre design, ou vous avez juste personnalisé votre bannière

Il s'agit du cas où vous n'êtes jamais entré dans la configuration avancée de votre blog.

Comment savoir si vous avez déjà touché à votre configuration avancée ?

Eh bien, tout simplement en vous souvenant si vous avez déjà modifié votre code en passant par là :

ONGLET PRESENTATION - Configuration avancée

Nous sommes bien d'accord que pour ce premier cas de figure, nous partons du principe que vous n'avez pas touché au code.

Et donc nous vous demandons de mettre à jour votre template, soit en sélectionnant un nouveau design, soit en resélectionnant votre design actuel.

Vous pouvez en profiter pour personnaliser votre design avec les couleurs de votre choix.

N'oubliez pas de remettre votre bannière en place.

Surtout, faites attention aux éléments suivants :

- Si vous changez de design et que vous aviez mis en place une bannière personnalisée, une retouche en largeur sera peut-être nécessaire.

- L'action UTILISEZ CE MODELE est irréversible, vous ne pourrez plus revenir en arrière

- Si vous avez modifié votre configuration avancée, reportez vous IMPERATIVEMENT aux paragraphes deux et trois, et ne suivez pas la procédure ci-dessous au risque de perdre toutes les modifications apportées au design.

C'est bon, c'est fait ?

Vos commentaires s'affichent désormais automatiquement sur un fond coloré ;)

2. Vous avez modifié votre design AU NIVEAU DE LA FEUILLE DE STYLE

Vous êtes entrés dans la configuration avancée, et vous avez modifié l'élément "feuille de style".

Il va vous falloir copier coller le code suivant en toute fin de feuille de style, et en remplaçant l'élément surligné en jaune avec le code couleur choisi.

Vous ne connaissez pas le code de la couleur de votre choix ? Rendez-vous sur la page suivante : http://www.colorschemer.com/blog/2008/03/21/120-crayons-on-the-web.

.commentparent, .commentchild {
line-height: 150%;
margin: 10px 0px;
padding: 0px;
-moz-border-radius: 1% 1% 1% 1%;
-webkit-border-radius: 1% 1% 1% 1%;
background: none;     border-bottom: none; }
.commentparent.author, .commentchild.author {
background-color: #dddddd;
}
.commentparent .gravatar, .commentchild .gravatar {
float: left;
margin: 0 5px 5px 0;
}
.commentparent p.posted, .commentchild p.posted {
border-bottom: none;     background: none;
margin: 5px 5px 5px 0;
padding: 0;
}
.commentparent p, .commentchild p {
margin-top: 0px;
margin-bottom: 0px;
}
.commentparent {
padding: 3px;
}
.commentchild {
margin: 4px 0px 4px 40px;
padding: 3px;
}

Une fois validé, c'est bon : vos commentaires s'affichent désormais automatiquement sur un fond coloré ;).

3. Vous avez modifié votre design AU NIVEAU DU TEMPLATE HTML

Dans ce cas, je vous invite à me contacter rapidement à l'adresse suivante : contact@hautetfort.com, afin que nous nous chargions de la mise en place.

Vous pouvez également laisser un commentaire ci-dessous, et nous nous en chargeons sous 8 jours.

A très vite sur Hautetfort.com !

A quoi sert un trackback ?

2008-07-02T18:17:00+02:00

Qu'est-ce qu'un trackback, et surtout à quoi cela sert ?

Quelques éléments de réponses dans les lignes qui suivent.

Qu'est-ce qu'un trackback ?

Selon Wikipedia "un trackback, ou rétrolien, est un système de liens inter-blogs semi-automatisé. Il permet aux auteurs de relier des billets de blogs différents et parlant du même sujet, ou se faisant référence. (...) Concrètement, l'auteur d'un blog A peut établir un rétrolien vers un billet d'un blog B en faisant, dans un de ses propres billets sur son blog A, un lien vers l'URL du billet du blog B. Si le blog B gère les rétroliens, il est automatiquement indiqué dans le billet sur le blog B que le blog A y fait référence. Le lecteur du billet sur le blog B peut alors découvrir le blog A et s'y rendre, grâce à ce lien automatique. De même, l'auteur du blog B est mis au courant que l'auteur du blog A s'intéresse à son contenu, le système de rétroliens est parfois qualifié de « social » car il permet des rencontres virtuelles.

Par exemple : Marc a écrit une note très intéressante sur les dernières avancées en terme de génétique. Julie qui a un avis bien précis de la chose (ou pas !) souhaite rebondir sur cette note directement sur son propre blog.

1er réflexe : écrire un commentaire long et détaillé sur le blog de Marc. Julie y laisse éventuellement l'adresse de son blog pour plus d'infos...

Nouveau réflexe : Julie écrit une note sur son blog qui répond directement à Marc en lui envoyant un "trackback". La note de Marc est signalée d'un trackback à la place d'un commentaire qui fait référence directement à la nouvelle note de Julie.

Un trackback est donc l'intermédiaire entre une note et un commentaire.

Comment envoyer un trackback ?

En premier lieu, il convient de vous assurer que le blog vers lequel vous comptez envoyer une alerte accepte bien les trackbacks. Pour le savoir, rien de plus simple, il suffit de recherchez le texte suivant :

1. Envoyer un trackback manuellement ?

NB: Toutes les options de trackbacks d'une note se trouvent dans la partie avancée d'une note (clic sur " Voir les propriétés avancées (commentaires, trackbacks)")

Pour ce faire, il suffit d'entrer l'URL de trackback de la note à laquelle vous voulez réagir puis de publier votre note.

2. Faire un lien dans votre note ?

Il est possible de faire un trackback automatiquement en faisant un lien tout simple à partir de votre note. Mais attention ! Ce lien doit pointer l'adresse de la note visée et non pas l'adresse de trackback.

Comment savoir si mon trackback a été envoyé ?

Environ 5 minutes après l'envoi du trackback, voici ce que la note visée affiche :

Mais il est également possible de voir les trackbacks envoyés dans votre note en mode édition :

Comment faire pour que mon blog accepte les trackbacks d'autres blogueurs ?

C'est au moment d'éditer votre note qu'il faut vérifier que les champs "Accepter les trackbacks" et "Découverte automatique des trackbacks" sont sur "Oui" :

Enfin, les trackbacks sont affichés comme les commentaires côté administration (marqués avec un : ), tandis que côté blog ils s'affichent au-dessus des commentaires.

C'est désormais à vous de jouer ;)

Insérer sa propre bannière

2008-07-02T17:29:00+02:00

Vous êtes très nombreux à nous demander la procédure à suivre pour insérer votre propre bannière sur votre blog.

Ci-dessous un tutorial qui vous expliquera pas à pas comment procéder pour mettre votre bannière à la place de celle qui existait déjà.

A noter : Si vous venez de créer votre blog, ou que vous n'avez apporté aucune modification au design d'origine, ne tenez pas en compte la procédure indiquée ci-dessous, car c'est encore plus simple !

Il vous suffira en effet de vous rendre sur l'onglet Présentation, puis de cliquer sur le lien Présentation correspondant à votre design :

1. Etape préliminaire

Dans un premier temps, il vous faut ajouter votre bannière à vos fichiers.
Récupérez ensuite le lien de votre image en cliquant sur le nom.

Arrive maintenant la partie la plus difficile mais si vous suivez bien les étapes, tout devrait aller.

2. Modification de la feuille de style :

Allez dans les configurations avancées de l'onglet "PRESENTATION" pour accéder à votre feuille de style, puis sauvegarder son contenu dans un éditeur de texte de votre choix avant toute modification (le bloc notes par exemple).

Vous pouvez maintenant de modifier les lignes de code concernant votre bannière. Pour cela, il vous faudra repérer la ligne #banner.

Vous devriez avoir les lignes suivantes:

Les valeurs qui suivent les ":" peuvent différer suivant les modèles.

Dans #banner, ajouter une ligne : display:none;. Si cette ligne existe déjà, modifiez sa valeur par none. Ceci permet de faire disparaître la bannière préexistante sans pour autant les enlever ce qui permet de rester référencé.

A présent, repérez le bloc avec #banner-img et remplacez display:none; par display:block;

Vous pouvez maintenant ajouter votre image en remplaçant la ligne background:#...... par background:#XXXXXX url("url_de_votre_bannière") no-repeat 0% 0%;

(Remplacez XXXXXX par le code hexadecimal de la couleur dominante de votre bannière).
- Ajoutez height: hauteur_de_votre_bannière; dans le bloc précédent et dans le bloc div.img-link a {.

3. Vérification

Votre feuille de style doit maintenant ressemblez à ce qui suit:

Remarques concernant les utilisateurs des design 4 et 5 uniquement :

Pour les modifications portées sur le design 4 (en comptant à partir du haut de la gauche vers la droite):

Au niveau des styles "#container .container-decorator1" : remplacez "90px" dans background: transparent url(http://[...]) no-repeat 0% 90px; par la somme suivante : hauteur de votre image + marge de 9px..

Par exemple, si votre image fait 120px en hauteur, le code à insérer est : "129px"

Enfin, pour les modifications portées sur le design 5 (en comptant à partir du haut de la gauche vers la droite) :

Au niveau des styles "#container .container-decorator1" et ".album-container .container-decorator3" : remplacez "90px" dans background: transparent url(http://[...]) no-repeat 0% 100px; par la somme suivante : hauteur de votre image + marge de 8px..

Par exemple, si votre image fait 120px en hauteur, le code à insérer est : "128px".

Et maintenant, c'est à vous de jouer ;)