Bouge ton blog !

Voici la première note d'une série d'astuces visant à mieux personnaliser et charter son blog.

Nous allons voir comment "redesigner" ses blocs de colonnes :

Il s'agit d'un exemple simple, qui ne nécessite aucune image de fond, il faut au préalable choisir 3 couleurs qui définiront la charte de son blog. Vous pouvez choisir par défaut les 3 couleurs qui sont assignés à votre modèle de présentation (couleur de la banière, couleur de la colonne, titre, liens etc...) avant de vous lancer dans une vrai création de charte

2 couleurs doivent être dans la même teinte, elles sont utilisées pour les couleurs de fond du titre (#006666 : couleur 1) et du contenu (#009999; : couleur 2). La 3ème couleur doit être choisie comme contraste des 2 premières (#ffffcc : couleur 3)

Voici le code à insérer dans votre feuille de style (Présentation -> configuration avancée) à remplacer par les styles correspondants ou à placer en fin de fichier :


.sidebar h2 {
font-size: 70%;
font-weight: bold;
margin: 0px;
margin-bottom: -2px;
padding: 4px 7px 6px 7px;
background-color: #006666;
color: #ffffcc;
border: 1px solid #006666;
border-bottom: 0px;
}

.sidebar ul {
padding: 5px;
margin: 0px 0px 30px 0px;
background-color: #009999;
color: #FFFFcc;
border: 1px solid #006666;
border-top: 0px;
}

.sidebar li {
margin: 0px 0px 0px 0px;
padding: 2px;
list-style-type: none;
font-size: 65%;
line-height: 150%;
}

.sidebar li.description {
padding: 2px;
text-align: left;
margin: 0px 0px 0px 0px;
font-style: italic;
}

.sidebar li.album {
text-align: center;
}

.sidebar img {
padding: 2px;
border: 1px solid #333;
background: #FFF;
}

.sidebar li.link img {
border: 0px;
padding: 0px;
margin: 0px;
vertical-align: -4px;
}

.sidebar a:link, TABLE.calendar a:link, .sidebar a:visited, TABLE.calendar a:visited {
text-decoration: none;
color: #FFFFcc;
}

.sidebar a:hover, TABLE.calendar a:hover, .sidebar a:active, TABLE.calendar a:active {
text-decoration: underline;
color: #FFFFcc;
}


L'essentiel de la personnalisation se trouve dans les styles .sidebar h2 et .sidebar ul.
Le "padding" vous permet de gérer la marge du texte avec le bord des blocs en pixels.
Le "font-weight" permet de définir des caractères gras avec l'attribut "bold".
Le "border: 1px solid #006666;" permet de définir la largeur des bordure, le style du tracé puis la couleur.

Le calendrier est géré par d'autres styles qu'il faut mettre en conformité avec la charte adoptée :




TABLE.calendar {
background-color: #009999;
color: #FFFFff;
border: 1px solid #006666;
border-top: 0px;
}

TABLE.calendar th {
color: #FFFFcc;
}


A noter qu'il est également possible de réaliser ce type de charte avec 2 couleurs, dans ce cas, il faut privilégier le choix de 2 couleurs contrastes : la première est utilisée pour les bordures et les textes / liens, la seconde pour le fond.

3 bonnes raisons de passer à un mode 1 colonne :

• Pour mettre en avant le contenu de son blog
• Pour disposer de plus de place pour la colonne centrale
• Comme pour chaque astuces de technoblog : personnaliser son blog

Votre choix est fait ? Voici comment faire :

Tout d'abord, cette modification est applicable uniquement avec les designs 1 et 2 pour un rendu visuel conforme :

Prenons l'exemple de la suppression de la colonne de droite :

1. Dans Présentation -> Configuration Avancée, éditez votre Feuille de styles.
Editez le style #right {} en ajoutant display: none; à la fin :

#right {
...
display: none;
}

Editez le style #center { } en modifiant le paramètre 'width:'. Remplacez 'width: 409px;' par 'width: 589px;'

#center {
...
width: 589px;
}

2. Dans la partie 'Présentation' -> Contenus des colonnes, transférez tous vos blocs de la partie droite vers la partie gauche dans l'ordre souhaité.
Il est possible qu'à l'avenir, certains éléments comme les albums photos s'affichent par défaut dans la colonne de droite. Il vous faudra alors transférer ce bloc vers la colonne de gauche pour le voir s'afficher.

Pour afficher seulement la colonne de droite, revenez à une configuration de base à 2 colonnes puis procédez de la même manière mais en appliquant 'display: none;' au style '#left { }' et en transférant tous les éléments de la gauche vers la droite.

Enfin, pour les plus acharnés, pour obtenir un blog sans colonnes : appliquer le 'display: none;' au 2 styles '#left{ }' et '#right{ }' puis applique une largeur de 769px 'width: 769px;' à votre colonne centrale '#center { }'

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)

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 !

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

A chacun ses goûts ! Si vous en avez marre de la suprématie Google (bloc Google) sur le "marché" de la recherche Internet, voici un autre moteur issu de MSN Search de Microsoft. Vous pourrez l'ajouter facilement avec un bloc libre disponible dans la partie "Présentation" -> "Contenu des colonnes" :

<form method="get" action="http://search.msn.fr/results.aspx">
<input type="hidden" name="cp" value="1252" />
<input type="hidden" name="FORM" value="FREESS"/>
<input type="text" name="q" size="30" style="width:95px; background-color: #f3d9c0; color: #cc6600;" value="MSN Search" />
<input type="submit" value="Go" style="width:25px; background-color: #f3d9c0; border: 2px solid #000; color: #000;" />
<input type="hidden" name="q1" value="site:VOTRE_BLOG.blogspirit.com" />
</form>


PS: N'oubliez pas de remplacer VOTRE_BLOG par le nom de domaine de votre blog.

Envie de décorer votre blog ? Aucun problème, ces services s'intègrent complètement aux blocs libres de Blogspirit :

Ad Sense : idéal pour obtenir quelques revenus avec votre blog, les Google AdSense sont en fait des banières inteligentes qui affichent des liens publicitaires en fonction du contenu de la page. Vous serez payé en fonction du nombre clics issus de votre blog...

Bloglet : Ce service vous permet d'abonner vos visiteurs à votre blog via une newsletter générée automatiquement à partir de vos fils RSS.

Bot-a-blog : Même genre de services que Bloglet. Notons que ce service peut également être une alternative aux RSS dont j'ai parlé ici puisqu'il vous est possible de vous faire une liste d'abonnements associée à votre compte pour recevoir les mises à jour de vos blogs préférés.

Geo-Loc : Un bloc très sympa puisqu'il permet de localiser géographiquement vos visiteurs en cours !

Liens Référents : Mon préféré ! Ce service permet d'afficher les sites qui vous ont apporté du traffic via des liens. Idéal pour récompenser les blogs qui vous référencent mais aussi à titre informatif : qui vous référence et vers quelle page ?

Moteur de recherche Google : Un must ! Plus d'informations ici.

Musique ambiante : Une idée très demandée par les blogueurs de Haut et Fort ou Blogspirit, vous trouverez comment insérer votre fichier musical sur votre blog : ici.

Paris 2012 : Un initivative de Philippe, histoire de faire un peu de pubs sur la candidature de Paris aux JO 2012 !

Post-It Express : Un service que j'ai découvert récemment qui permet de faire un post-it sur votre blog ! Plus gadget que fonctionnalité à mon avis mais pourquoi pas ?

Sitemeter : Un petit module de stats sympa qui viendra en complément des stats Blogspirit. A noter que les stats ne seront pas exhaustives puisqu'elles ne prendront pas en compte le traffic issu des fils RSS.

Statcounter : Le grand frère de Sitemeter. Plus complet, il permet de gérer les stats de plusieurs sites sous le même compte : un service gratuit de qualité.

Si vous connaissez d'autres "micro-services", je serais ravi de les tester et de compléter cette liste non-exhaustive de fonctionnalités et gadgets !