Bouge ton blog !

Envie de colorer votre calendrier ?

Voici ce que technoblog vous propose :

- Coloration alternée des cases
- Mise en évidence du jour "Aujourd'hui"

Il vous faudra d'abord restaurer votre modèle de calendrier (le code HTML est désormais différent) dans l'onglet Présentation puis éditer votre feuille de style.

Repérer les lignes concernant la boîte calendrier :
TABLE.calendar
Puis sous la dernière ligne concernant le calendrier :
TD.day

Insérez un code de ce type :
TD.even {
background-color: #e8eeee;
}

TD.odd {
background-color: #fff;
}

TD.today, TD.today a, TD.today a:hover {
background-color: #000;
color: #fff;
}

NB : Le design de ce calendrier convient pour un design sur fond blanc. Pour d'autres types de fonds et jeux de couleurs, il vous faudra éditer les codes couleurs #fff (blanc), #e8eeee (gris) et #000 (noir) et les accorder avec votre charte.

Pour aller plus loin :

TABLE.calendar apermet de charter les liens du calendrier sur les jours

TH.day-of-weekpermet de charter la ligne jour de la semaine

Peut-être la connaissez-vous déjà ? Sinon, cliquez à toute vistesse sur Blogbar et ajoutez ça dans une boîte libre de votre blog.

La Blogbar permetait de rechercher une info sur le web directement sur votre blog, et ce parmi les principaux moteurs de recherche du Web (Google, Yahoo, MSN, Exalead) et les moteurs de recherche de blogs (Technorati, BlogPulse, etc...).

La V3 permet maintenant de chercher sur le web ou sur votre blog ! La Blogbar est donc passée de gadget fournisseur de visibilité pour d'autres à un véritable service pour le bloggueur. C'est donc tout naturellement, LE bloc libre à intégrer dans son blog. On peut remarquer que l'intégration sur blogSpirit se fait sans efforts et c'est bien normal puisque les concepteurs de la Blogbar bloguent sur blogspirit (Voir l'annonce de la V3).

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 { }'

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 !

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.

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.

Cette question ayant été souvent posée à moi-même ainsi qu'à l'ensemble de l'équipe Blogspirit, j'ai décidé d'écrire ce petit récapitulatif des actions que le blogueur peut mener pour se constituer un bon référencement chez les moteurs de recherche.

On dit souvent qu'être référencé, c'est exister sur Internet. C'est en parti vrai même si un blog bénéficie déjà du référencement de sa plateforme ! Voici les quelques paramètres à régler sur votre blog pour remonter dans les résultats de Google, Yahoo, Altavista et autres MSN Search. Notez que les blogs "made in Blogspirit" sont optimisés pour être indexés par les robots de moteurs de recherche, les actions qui suivent contribueront à améliorer ce référencement.

Description du blog : il s'agit de la petite phrase qui remonte très souvent dans les moteurs de recherche. Par exemple sur Yahoo, vous noterez que la description du blog est quasiment la première chose affichée sous le titre du site trouvé par le moteur.

Mot-clés : : ce paramètre est utilisé par certains moteurs pour affiner les résultats trouvés. Il s'agit d'être pertinent et de mettre des mots en rapport avec le contenu de votre blog. Quel est l'utilité d'être référencé sur le mot "Britney Spears" (très recherché sur Google) alors que vous parlez de littérature ? Notez enfin qu'il s'agit d'un des critères utilisé par le moteur de recherche de Blogspirit.

Liens : : il va sans dire (mais autant le dire...) que faire un maximum de liens pertinents contribue à faire connaître son blog. Editez éventuelement le paramètre title="xxxxxx" dans le code HTML de vos liens, les moteurs de recherche peuvent être très friands de ce paramètre et cela ajoutera un petite touche à votre blog !

Titre de vos notes : : Elément indispensable à un bon référencement ! Les titres des notes sont utilisés pour construire l'URL de vos permaliens. Non seulement les robots indexeront le contenu de votre titre de manière privilégiée, mais en plus ils référenceront votre note grâce aux mots présents dans l'URL ! Un conseil, choisissez bien vos mots et ne négligez pas l'importance de ce paramètre.

Images : Certains moteurs indexent le mot ou l'expression placé dans le paramètre alt="", par défaut Blogspirit rempli ce champs avec le nom de votre image, libre à vous de le modifier ! Même chose que pour les liens, le paramètre title="" peut s'avérer utile aussi bien pour votre référencement que pour la personnalisation de votre blog.

Commentaires et Trackbacks : Notez que la plupart des principaux moteurs de recherche ne suivent plus les liens présents dans les commentaires, inutile donc d'innonder de commentaires ou de trackbacks des blogs qui n'ont aucun rapport avec le votre !

Listes de liens : Si les blogs sont aussi bien référencés, c'est aussi parceque les blogueurs s'échangent les liens très facilement par le biais des listes de liens.

Catégories : Les catégories sont souvent des pages qui remontent très bien dans les résultats de recherche, ces pages rassemblent en effet plusieurs notes et sont donc plus à même de contenir une combinaison de mots !

Communautés : Les communautés sont déjà bien référencés et vous amèneront un bon nombre de robots puisqu'elles font constamment des liens vers votre blog. De plus elles constituent une source de visites considérable dès lors qu'elles sont actives. Là encore il s'agit d'être cohérent, poster une note dans la communauté "Recherche d'emploi" lorsque l'on parle de ces vacances en Corse, vous amènera peut-être des visites mais vos visiteurs auront vite fait de zapper votre blog qui ne correspondra pas à leur recherche initiale...

Mon dernier conseil sera ne pas forcément s'attacher à faire du traffic mais plutôt de fiéliser ses visiteurs à travers vos notes. La pertinence du contenu reste (heureusement) la première condition pour se faire connaître !

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 !