Bouge ton blog !

Encore du nouveau sur blogSpirit !

Philippe a annoncé de futurs développements pour le logiciel blogSpirit (et donc pour les plateformes éditées par blogSpirit). Un module de personnalisation de design (ouf ! Les Technoblogs regorgent de commentaires à ce sujet) et les photoblogs. En ce qui concerne les photoblogs, ils seront d'abord en phase de tests, pour s'inscrire, c'est par ici que cela se passe.

J'en profite pour demander aux blogueurs de blogSpirit ou HautetFort qui écrivent régulièrement des notes à propos de la personnalisation des blogs blogSpirit (boîtes libres, astuces, design, référencement, etc...) de laisser un commentaire sur cette note. Je pourrais ainsi les référencer sur "Bouge ton blog" et ce sera peut-être l'occasion de créer une nouvelle communauté dédiée 100% à la technologie blogSpirit.

Laissez l'adresse de votre blog ou - mieux - l'adresse de la catégorie de votre blog qui parle des astuces blogSpirit.

Merci !

Envie de formulaires plus sympa pour votre blog ?

Voici ce que "Bouge ton blog" vous propose :

C'est en tout cas comme cela que s'affichera vos formulaires de commentaires sous Firefox ou Opera. Sous Internet Explorer, les bordures arrondies deviendront carrées mais le reste du formulaire tient la route. Qui sait ? Peut-être Microsoft décidera un jour d'accorder un peu plus ses navigateurs avec les capacités du CSS...

Repérez la ligne /* Comentaires */ dans votre feuille de styles (Présentation -> Configuration Avancée -> Feuille de styles). C'est à ce niveau que sont définis les styles des formulaires.
Puis remplacez les styles input { } et textarea {} par le code suivant :

input {
font-size: 100%;
font-family: Verdana, Arial, sans-serif;
color: #01717f;
background-color: #addfe8;
border: 2px solid #addfe8;
-moz-border-radius: 4px;
}

textarea {
clear: both;
width: 99%;
font-size: 100%;
font-family: Verdana, Arial, sans-serif;
color: #000;
background-color: #addfe8;
border: 2px solid #addfe8;
-moz-border-radius: 4px;
}


Notez que le code couleur affiché ici pour la couleur de fond et les bordures est #addfe8, essayez de remplacer ce code par le code couleur d'un de vos éléments (bannière, liens, colonnes etc...) : les différents codes couleurs de votre blog sont tous présents dans votre feuille de style (exemple : #99cc33 ou #4E8ABE). Un petit conseil : préférez une couleur clair pour plus de lisibilité...

Un autre exemple utilisé sur "Bouge ton blog !" :



Le code CSS :

input {
font-size: 100%;
font-family: Verdana, Arial, sans-serif;
background-color: #ffffff;
border: 1px solid #cc6600;
-moz-border-radius: 4px;
}

textarea {
clear: both;
width: 99%;
font-size: 100%;
font-family: Verdana, Arial, sans-serif;
background-color: #ffffff;
border: 1px solid #cc6600;
-moz-border-radius: 4px;
}


Même chose, je vous conseille de remplacer le code couleur #cc6600 par une couleur de votre choix s'accordant avec la charte de votre blog !

Suite à une discussion avec un blogueur de blogSpirit, j'ai décidé de refaire une version de mon script de traduction. Le précédent produisait une erreur javascript sous IE, cette version corrige le bug et reste dans le même esprit.


<form action="http://translate.google.com/translate" name="translate" id="translate">
<input type=hidden name=u value="" />
<input type=hidden name=langpair value="" />
<input type=hidden name=hl value="fr"><input type=hidden name=c2coff value=1><input type=hidden name=ie value=UTF-8><input type=hidden name=oe value=UTF-8><input type=hidden name=prev value="/language_tools"></form>
<a href="javascript:document.translate.elements['langpair'].value = 'fr|en'; document.translate.elements['u'].value = document.URL; document.translate.submit();"><img style="margin-bottom: 5px;" src="http://monblog.blogspirit.com/images/drapeau_anglais.gif" alt="English" /></a>
<a href="javascript:document.translate.elements['langpair'].value = 'fr|de'; document.translate.elements['u'].value = document.URL; document.translate.submit();"><img style="margin-bottom: 5px;" src="http://monblog.blogspirit.com/images/drapeau_allemand.gif" alt="Deutsch" /></a>


Rappel : Les liens sont des images, pour les activer chargez les images correspondantes dans votre espace disque puis corrigez les liens ci-dessus ('http://monblog.' etc...). Sinon retirez la balise image et insérez le texte souhaité.

Merci au bloggueur de sa remarque plus que pertinente (et oui IE malgré ses nombreux défaut assure bien 80% du traffic). Je n'ai pas son adresse mais il peut la laisser ici !

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 Luc, voici une fonctionnalité "Traduction" à ajouter dans vos blocs libres (Présentation -> Contenu des colonnes), notez qu'elle permet de traduire toutes les pages de votre blog puisqu'elle envoie automatiquement l'URL de la page courante au traducteur...

<form action="http://translate.google.com/translate" name="translate" id="translate">
<input type=hidden name=u value="" /><input type=hidden name=langpair value="" /><input type=hidden name=hl value="fr"><input type=hidden name=c2coff value=1><input type=hidden name=ie value=UTF-8><input type=hidden name=oe value=UTF-8><input type=hidden name=prev value="/language_tools"></form>
<a href="javascript:void(0);" onclick="javascript:document.translate.elements['langpair'].value = 'fr|en'; document.translate.elements['u'].value = document.URL; document.translate.submit();">English</a>


Preview :

English

Google assure également des traductions Fançais -> Allemand, pour cela, changez le paramètre "en" en "de" ainsi que l'intitulé de votre lien (English -> Deutsch).

Il vous est également possible d'insérer une image comme sur le blog de Gwenaëlle pour cela chargez votre image "drapeau" sur votre espace disque virtuel puis récupérez l'adresse de cette image. Le code à insérer devrait être comme cela :

<form action="http://translate.google.com/translate" name="translate" id="translate">
<input type=hidden name=u value="" />
<input type=hidden name=langpair value="" />
<input type=hidden name=hl value="fr"><input type=hidden name=c2coff value=1><input type=hidden name=ie value=UTF-8><input type=hidden name=oe value=UTF-8><input type=hidden name=prev value="/language_tools"></form>
<a href="javascript:void(0);" onclick="javascript:document.translate.elements['langpair'].value = 'fr|en'; document.translate.elements['u'].value = document.URL; document.translate.submit();"><img style="margin-bottom: 5px;" src="http://monblog.blogspirit.com/images/drapeau_anglais.gif" alt="English" /></a>
<a href="javascript:void(0);" onclick="javascript:document.translate.elements['langpair'].value = 'fr|de'; document.translate.elements['u'].value = document.URL; document.translate.submit();"><img style="margin-bottom: 5px;" src="http://monblog.blogspirit.com/images/drapeau_allemand.gif" alt="Deutsch" /></a>

NB :
Les traductions Google sont limités dans le nombre caractères à traduire, ainsi il est possible que certaines pages lourdes come la page d'accueil de votre blog ne soit pas entièrement traduite.