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)

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" />

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 !

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.