Bouge ton blog !

J'ai remarqué que plusieurs blogs affichaient des modules de sondages dans leurs colonnes (ici ou ici). Cette idée de bloc libre semble être très appréciée et le service semble assez bien fait.

Un hic tout de même au niveau de la feuille de style, puisqu'il semble y avoir une surcharge de la part de blogpoll sur des styles des blogs de technologie blogSpirit. Le principal effet est de rendre la colonne centrale du blog bleu, verte ou marron suivant la couleur choisie pour le modèle du sondage.

Voici une solution pour réparer le problème à intégrer dans la feuille de style de son blog :

#center .content {
background: transparent;
}

C'est quand même bien dommage de fournir un service aussi interessant que blogpoll et de le rendre peu compatible au niveau de la feuille de style. Certains noms de styles comme .content, .footer ou .header sont des classiques car utilisés très régulièrement dans les CSS. Le .content est utilisé pour la colonne centrale du blog et blogpoll applique la règle css suivante :

background: #DDEEDD;

D'ou le conflit avec les effets expliqués ci-dessus... La solution est pourtant simple pour blogpoll, il suffirait de mettre un id type "blogpoll-service" et de rendre relatif tous les styles nécessaires à l'affichage du sondage...
Il y a des leçons de CSS qui se perdent...

Voici un récapitulatif de l'état de fonctionnement du nouvel éditeur de blogSpirit :

	Windows XP / 2000	Linux(Debian)	MacOS X 10.3	MacOS 9
MSIE 6	OK
MSIE 5.5 SP2	OK
MSIE 5.2			TextArea
MSIE 5.0				TextArea (2)
Netscape 7.2			OK
Netscape 7.1	OK
Netscape 7.0.2				TextArea
Mozilla 1.8		OK
Mozilla 1.7.3			OK
Mozilla 1.7.2
Mozilla 1.7	OK	OK	OK
Mozilla 1.6	OK	OK
Mozilla 1.5	OK (1)	OK (1)	OK (1)
Mozilla 1.4.1		OK
Mozilla 1.4	OK
Mozilla 1.3.1		OK		OK (1)
Mozilla 1.3	OK
Firefox 1.0.4	OK
Firefox 1.0	OK		OK
Firefox 0.9	OK	OK
Firefox 0.8	OK	OK
Firebird 0.7	OK (1)	OK (1)
Firebird 0.6	NON	NON
Safari 1.2.4			TextArea
Opera 8.01	TextArea	Non testé	Non testé

OK : Marche correctement
NON : Ne marche pas du tout
TextArea : Ancien éditeur disponible avec les boutons.

(1) L'éditeur peut connaître quelques difficultés dans l'édition des tableaux, il semblerait que la gestion du navigateur en soit la cause

(2) Seuls les boutons d'insertion d'image et de fichier sont disponibles.

Cet éditeur comme beaucoup d'autres est un "éditeur riche", il permet d'éditer du HTML en toute transparence. La portabilité de cette technologie se situe tout simplement dans la capacité du navigateur à la supporter. Si IE et Mozilla supportent cette techno depuis quelques temps, des navigateurs comme Opera et Safari connaissent encore un retard... Ce "retard" est malheureusement indépendant de blogSpirit qui souhaite proposer à l'ensemble des blogueurs un éditeur enrichi plus avancé qu'un simple textarea.

De nouvelles fonctionnalités ont été ajoutées au niveau de vos blogs, le nom du template concerné est mis entre crochets :

• Un "Remember Me" qui stocke vos informations nécessaires à l'ajout d'un commentaire dans un cookie : plus besoin de rentrer ses informations à chaque fois, elles sont préremplies. [permalink, commentaires]
• L'abonnement à un fil de commentaires, pour être tenu au courant - par mail - des nouveaux commentaires sur n'importe quelle note d'un blog ou d'un photoblog. [permalink, commentaires]
• Envoi de la note par mail. [index, permalink, archives, categories]

Si vous n'avez jamais modifié vos templates HTML (Présentation -> Configuration avancée), une mise à jour automatique a été faite sur votre blog : vous devriez voir s'afficher ces nouvelles fonctionnalités.

Si au contraire vous avez déjà modifié vos templates, aucune mise à jour n'a été possible, voici la marche à suivre pour bénéficier de ses nouvelles mises à jour :

1. Sauvegardez - un par un - les templates suivants sur votre poste (avec petit éditeur de texte comme notepad) :

• Modèle de la page d'accueil
  
• Modèle de la page archives
• Modèle de la page catégories
• Modèle de page commentaires
• Modèle de page Lien permanent
• Modèle de la page À propos
• Modèle de page d'éléments de listes

2. Restaurez la version originale de chacun de ces templates

Attention ! Ne pas restaurer les templates suivants, vous risqueriez de perde des éléments de votre design :

• Feuille de styles
  
• Modèle de la colonne gauche
• Modèle de la colonne droite

3. Les nouvelles fonctionnalités sont installées sur votre blog. Vous pouvez désormais ajouter vos propres modifications grâce aux fichiers sauvegardés en 1.

Plus d'informations sur les nouvelles mises à jour (nouvel éditeur, photoblog)

Voici une petite mise au point sur les trackbacks :

Qu'est-ce qu'un trackback ?

Selon Wikipedia :

"Le TrackBack ou rétrolien est un système mis en place par beaucoup d'outils de blog, qui permet à un blogueur de savoir qui a vu le message original et qui a écrit une autre entrée à ce sujet. Le système fonctionne en envoyant un 'ping' entre les blogs. Il fournit ainsi l'alerte.
Le TrackBack apparaît typiquement au-dessous d'une entrée de blog et affiche un résumé de ce qui a été écrit sur le blog cible, ainsi qu'une URL et le nom du blog."

Exemple :
Marc a écrit une note très interessante 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éflèxe : écrire un commentaire long et détaillé sur le blog de Marc. Julie y laisse eventuelement l'adresse de son blog pour plus d'infos...
Nouveau réflèxe : 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 sur un blog de techno blogSpirit ?

Il faut d'abord que le blog vers lequel vous envoyez une alerte accepte les trackbacks. Pour le savoir, 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)")

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. 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 :

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

Au moment d'éditer votre note vérifiez bien que les champs "Accepter les trackbacks" et "Découverte automatique des trackbacks" sont sur Oui :


Les trackbacks sont affichés comme les commentaires côté administration (marqués avec un : ), côté blog ils s'affichent au-dessus des commentaires.
Si vous n'arrivez pas à les afficher sur votre blog, une note à ce sujet a été réalisée sur la FAQ.

A Lire :
Tutoriel de Frédéric Crespo à ce sujet.

Bonne chance !

Type de caractères spéciaux : [ à © ª è ] etc...
Cas constatés : affichage dans les colonnes / affichage dans les résultats Google.

Pas de panique ! Cela est du à l'encodage de votre plateforme qui a changé pour passer à l'utf-8. Cet encodage permet d'écrire avec n'importe quel type de caractère et donc en n'importe quelle langue.

Le problème a été résolu pour la plupart des blogs, néanmoins si vous avez modifié vos template HTML il est possible que l'encodage ne soit pas passé par chez vous.

Pour résoudre le problème, rendez vous dans la partie Configuration Avancée de l'onglet Présentation.
- Repérez les différences (vos modifications) entre vos template et les template par défaut
- Restaurez
- Copiez les différences
(méthode recommandée par blogSpirit)


Si vous ne souhaitez pas passer par la restauration, voici la modification à réaliser sur chacun des templates HTML via la configuration avancée (désaprouvé par blogSpirit) :

Repéréz le tag suivant se trouvant entre les balises <head> </head> :

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Remplacez le par le code suivant :

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Suite à la demande de Lionel qui avait des difficultés à insérer le code Javascript de weborama, je vous propose un exemple de script à insérer dans son blog pour y voir plus clair.

Une parenthèse technique :
Les blogs de blogSpirit utilisent la technoblogie Smarty, une solution de template Html associé au langage php. Les balises Smarty utilisent les accolades { } comme séparateur, c'est pourquoi les scripts javascript qui utilisent des accolades ne sont pas valides. Heureusement, les concepteurs de Smarty font bien les choses et la balise {literal} Script {/literal} permet de résoudre ce problème puisqu'elle a été complètement intégrée à blogSpirit.

Exemple avec un script "Ajout aux favoris" :
Je n'aime pas beacoup ce genre de scripts qui ne marchent que sur Internet Explorer, mais certains bloggueurs y trouveront surement leur bonheur :
Créez-vous une nouvelle boîte et insérez-y le code suivant :
<script type="text/javascript">

{literal}

function add_favoris() {
var nom_site = "Bouge ton blog !";
var url_site = "http://technoblog.blogspirit.com";
if ((navigator.appName.indexOf("Microsoft",0)>=0) && (parseInt(navigator.appVersion)>=4))
{
window.external.AddFavorite(url_site,nom_site );
} else {
alert("Cette fonction n'est proposée que par Internet Explorer 4+,
faîtes Ctrl+D pour ajouter"+nom_site+" à vos favoris.");
}
}
{/literal}
</script>
<a href="javascript:add_favoris();">Ajouter aux favoris</a>


NB : ce script ne marche qu'avec IE 4 ou +, si vous souhaitez l'insérer dans votre blog, n'oubliez pas de remplacer les variables nom_site et url_site par les noms et url de votre blog. Vous trouverez un exemple dans la colonne gauche de Bouge ton blog !.

Comme vous pouvez le voir les balises {literal}{/literal} englobent le code JavaScript. Si vous avez un message d'erreur du type "Votre modèle comporte des erreurs", repérez les accolades de votre script et entourez votre script des balises literal.

Une nouvelle version de Blogspirit a vu le jour, elle comporte hormis quelques correctifs, de nouvelles fonctionnalités :
- Les blocs libres qui vous permettront d'intégrer les modules de stats, de liens sponsorisés qu'on peut trouver sur le web.
- Les trackbacks ou le compromis entre la note, le commentaire et le fils RSS. En envoyant un 'ping' à un autre blog vous pouvez répondre à une de ses notes directement sur le votre !
- L'anti-spam. En plus d'avoir un système anti-spam en amont, Blogspirit vous propose une protection supplémentaire à votre niveau puisqu'il est désormais possible de fermer ses commentaires et trackbacks après une note publiée il y a 1 mois, 2 semaines ou 3 jours.
- L'international. En tant que Français, vous n'êtes pas forcément concerné, mais sachez que Blospirit s'ouvre maintenant à la Chine avec une plateforme entièrement traduite et surtout un encodage en UTF-8 alors qu'il était en ISO.

Philippe vous indique comment profiter des nouvelles fonctionnalités de Blogspirit. Sachez que seules vos nouvelles notes bénéficieront des trackbacks, pour qu'une URL de trackback soit associée à une ancienne note, il faut l'éditer puis (re-)sauver la note.

De nouvelles fonctionnalités, donc de nouveaux tutoriels arriveront sur Bouge ton blog !

Vous trouverez en détail les étapes pour monter sa banière sur son blog dans le faq.

Suite à plusieurs problèmes survenus lors de cette délicate étape, j'ai décidé d'afficher un exemple de CSS.

Avant de commencer, j'aimerais signaler que les caractèristiques des styles de votre blog qui sont placés entre '/*' et '*/' ne sont pas actifs, en effet ils sont mis en commentaires pour vous guider lors de cette étape.

Par exemple :

#banner {
height: auto;
color: #fff;
/** code for your own banner :
display : none;
*/
}

Ici le style #banner a une caractèriqtique mise en comentaire (display: none).
Si vous voulez insérer votre banière, il vous faut activer ce style comme suit :

#banner {
height: auto;
color: #fff;
display : none;
}



Notez qu'il est fortement conseillé d'appliquer cette méthode avec les designs 1,2 et 3 :

Pour les autres, c'est un peu plus compliqué, je vous conseille de bien étudier la FAQ sur le sujet...


Maintenant la feuille de style ! Seuls les styles qui ont été modifiés sont reportés, il est donc inutile de s'interesser aux autres pour le moment.

#banner {
height: 90px;
background-color: #d9c0e6;
color: #fff;
display : none;
}
#banner h1 {
padding: 15px;
font-weight: bold;
padding-bottom: 10px;
}
#banner h2 {
font-size: 80%;
padding: 0px 0px 0px 15px;
}
#banner a {
color: #fff;
font-weight: bold;
font-size: 70%;
text-decoration: none;
}
#banner-img {
display: none;
display : block;
background: #fff url("http://[BLOG].blogspirit.com/images/[BANNER].jpg") no-repeat 0% 0%;
height: [HEIGHT]px;
}
div.img-link a {
display: block;
text-decoration: none;
width: 100%;
height: [HEIGHT]px;
}

remplacer [BLOG] par le nom de domaine de votre blog présent dans l'adresse de celui-ci.
remplacer [BANNER] par le nom de votre image, changer éventuelement l'extension si besoin (.gif, .png)
remplacer [HEIGHT] par la hauteur de votre banière en pixels (conseillé : 170px)

Comme vous le voyez le style #banner qui contient le titre de votre blog (#banner h1, #banner a) et la description (#banner h2) n'est plus affiché (display: none) sur votre blog mais toujours présent dans la source HTML. Ceci pour que les robots des moteurs de recherche référencent votre blog à l'aide de ces informations... Il est donc indispensable de remplir les champs "titre" et "description" dans la configuration de son blog !
C'est le style #banner-img qui est affiché à la place (display : block), il contient votre banière en arrière plan et le lien vers la page d'accueil de votre blog.

A vous de jouer !

Vous avez surement remarqué quelques bizareries sur vos stats en ce mois de Janvier !

Pas de panique, toutes les stats sont enregistrés dans des fichiers de log (et non pas blog). Nous les avons remoulinés afin que tout le monde retombe sur ses pattes, ainsi les stats que vous voyez affichées (Onglet Stats) sont bien définitives.

Il y a malheureusement un trou en début février qui correspond non pas à un néant d'internautes sur votre blog mais à un disfonctionnement irréversible. La bonne nouvelle étant le fait que Blogspirit va pouvoir repartir sur des bases saines pour continuer à vous offrir des stats authentiques puisque "prélevées" directement à la source, sur le serveur.

Pour en savoir plus sur les stats de votre blog, c'est par ici :
Glossaire.

On vous demande un identifiant / mot de passe pour voir votre blog ?

Pas de problème, il est possible que vous ayez activé la fonction "blog privé" à l'inscription ou dans l'administration de votre blog.

Qu'est-ce qu'un blog privé ?
Il s'agit d'un blog dont l'accès est résevé à un certain nombre de personnes auxquelles l'auteur du blog a communiqué le ou les mots de passe pour le visiter. Ce type d'usage est fréquement utilisé dans la création d'album photos de famille ou d'amis mais aussi comme espace de gestion de projet et de partage restreint d'informations...

Pour désactiver le fonctionnement "privé" d'un blog, il suffit de :
- aller dans l'onglet "Tableau de bord" puis "Accès au site"
- supprimer tous les accès qui ont été définis.

Cliquez maintenant sur "Voir mon weblog", il n'est plus privé ! Tout le monde peut réaccéder à votre blog !

Plus d'information sur l'aide en ligne. Blogspirit / Haut et Fort