mercredi 19 juin 2013

Trucs & astuces Blogger

Vous aussi vous avez trouvé les faiblesses de Blogger? Ses options qui manquent à l'appel, ses petits truc qui feraient de ce blog l'outil incontournable?

On râle mais on l'aime bien, c'est pourquoi on ne va pas s’arrêter là mais on va plutôt essayer de l'améliorer.



Ranger des messages dans différentes pages.


J'aurai apprécié une fonctionnalité me permettant de ranger mes messages (posts) par genre dans différentes pages. => !Pas possible...
L'astuce est de créer une page (lien URL) qui va pointer vers la page recherche de labels (tags) de votre blog.

L'idée est de placer le même tag à l’intérieur de chaque message - une sorte de lien relationnel
Pour ma part je vais rajouter un label [tuto] ou [astuce] selon la nature du post dans tout les posts que je souhaite regrouper dans la même page.
Petit hic, lorsque vous arrivez sur la page vous voyez alors : "Messages les plus récents portant le libellé ...."
C'est pas très classe hein? Voilà la ligne css à rajouter pour ne pas afficher cette information :

.status-msg-wrap{display:none}


Snipet, portions, extrait de message, marqueur d’expansion...


Ce n'est pas forcement très parlant mais le bouton ci-dessous :
 ...vous permet d'insérer une "séparation" communément appelée "marqueur d'expansion".
Tout ce qui se trouvera avant ce marqueur servira d'extrait pour les messages en page d'accueil après quoi le liens "plus d'infos" sera affiché.

Modification du lien "plus d'infos" :
Le thème choisit ne met pas forcement ce lien très en valeur une fois qu'il ne reste que les extraits en page d'accueil.
Pour modifier l'apparence de ce lien il suffit d'ajouter le code suivant dans le css :
.jump-link a {...vos paramètres css...}

Référencement :


Ouaw, pour un service Google, on est loin d'avoir une structure de base optimisée pour le référencement naturel. Quelques erreurs non négligeable se sont glissées dans Blogger. Mais on va voir comment les corriger dans les quelques points ci-dessous.

En faisant des recherches sur google je suis tombé sur un de mes post.
Cool je suis sous Google!!! Sauf qu'il référençait une ancienne version de mon post. Comme il a été modifié depuis, son titre et son url on changés. A ma grande stupéfaction, le blog ne m'a pas automatiquement redirigé...Et pire, il ne m'a même pas envoyé vers une page de type erreur 404 ou 410.

On n'est jamais mieux servi que par sois-même...
En attendant que l'URL ne soit plus référencée dans le moteur de recherche il faut faire quelque chose!
On va aller ici :
Paramètres › Préférences de recherche › Redirections personnalisées
Vous ajoutez une redirection en mettant d'abord l'adresse erronée puis l'adresse actuelle.
!info: tapez site:votre-blog.blogspot.com sous Google pour voir quelles sont les pages référencées sous google.  

Patience...
Une fois que vous aurez terminé la création de votre blog, il faudra attendre quelques jours, quelques semaine avant que le référencement naturel s'installe correctement.

Tous aux fronts!
Il serait logique que Google référence automatiquement votre blog vu que Blogger c'est Google. Mais on ne va pas prendre de risque et on va déclarer l’URL du blog tout de suite à Google et aux principaux moteurs afin de ne pas perdre de temps.
Voici une liste de moteurs auxquels vous pouvez déclarer votre nouveau blog (merci commentcamarche :)).

Balises <title></title>
Voici une petite astuce pour optimiser le referencement de vos pages.
Actuellement quand vous ouvrez un message, vous avez comme titre "NomBLOG - TitreMessage".
Bien souvent le nombre de caractères est trop important, mais surtout, il est recommandé de ne garder que le titre du message (en dehors de la page d'accueil).
C'est pourquoi on va remplacer notre balise <title> par une petite condition :
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
...si nous sommes sur la page d'accueil on affiche le titre du blog, sinon on ne garde que le titre du message.

Ne pas référencer les archives :
Il suffit d'ajouter le code ci-dessous dans l'éditeur de template HTML Blogger
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex, follow' name='robots'/>
</b:if>
Si nous demandons une page archive, on prévient les robots en leur disant de suivre la page mais de ne pas l'indexer.

Ne pas référencer les recherches de labels : 
Si vous ne faites pas cela, google va vous référencer autant de page que vous avez de mots clés. => Aucune utilité! Surtout que l'impacte sur le referencement naturel peut conduire votre blog à la décroche totale! 
<b:if cond='data:blog.searchLabel'>
<meta content='noindex, follow' name='robots'/>
</b:if>
Si vous souhaitez retirer plus rapidement les pages en question de l'index Google vous pouvez vous rendre dans votre centre "outils pour les webmaster" de Google et demander la suppression d'URL de l'index Google.
Dans notre cas on demandera la suppression de répertoire /search/label/.
Attention la mise à jours de votre blog dans l'index Google peu prendre plusieurs jours, dans mon cas plus d'une semaine.

Gadget "suivre par mail"


Ce gadget est indispensable! Mais une fois installé c'est english power!!!
On va voir comment traduire l'intitulé "email adress", le bouton "submit', et la page feedburner en français.
Ci dessous, le code HTML du widget :
<b:widget id='FollowByEmail1' locked='false' title='Restez informé!' type='FollowByEmail'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if>
<div class='widget-content'>
<div class='follow-by-email-inner'>
<form action='http://feedburner.google.com/fb/a/mailverify' expr:onsubmit='&quot;window.open(\&quot;http://feedburner.google.com/fb/a/mailverify?uri=&quot; + data:feedPath + &quot;\&quot;, \&quot;popupwindow\&quot;, \&quot;scrollbars=yes,width=550,height=520\&quot;); return true&quot;' method='post' target='popupwindow'>
<table width='100%'>
<tr>
<td>
<input class='follow-by-email-address' name='email' placeholder='Adresse email...' type='text'/>
</td>
<td width='64px'>
<input class='follow-by-email-submit' type='submit' value='Valider'/>
</td>
</tr>
</table>
<input expr:value='data:feedPath' name='uri' type='hidden'/>
<input name='loc' type='hidden' value='fr_FR'/>
</form>
</div>
</div>
<span class='item-control blog-admin'>
<b:include name='quickedit'/>
</span>
</b:includable>
</b:widget> 
Maintenant je vous recommande vivement de vous connecter à votre compte feedburner pour le paramétrer correctement.
Si vous n'avez pas réussi les modifications HTML ci-dessus, vous y arriverez peut-être en vous connectant sur votre espace feedburner puisqu'il vous propose d'automatiser l'insertion du gadget tout en modifiant les paramètres qui nous intéressent. Pourquoi je ne l'ai pas dit plus tôt!? Mouaaaw ah ah

Coloration syntaxique de code source


Les développeurs ont besoin de montrer leurs bouts de codes, et plutôt que de les écrire en brut on va préférer la coloration syntaxique habituelle, bah oui c'est tellement plus parlant!
Merci à Alex Gorbatchev qui travail sur le projet syntaxhighlighter
 
1 - Rendez-vous dans l'éditeur HTML du modèle Blogger et copiez collez les appels des librairies qui vous intéressent avant la balise </head>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushBash.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js'/>
Pour le CSS c'est un poil plus compliqué car il faudrait l'appeler de la même façon mais le résultat est tronqué.
On va donc copier le contenu de ce fichier :
http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css
...et le coller avant la balise </b:skin>

2 - On initialise le script en plaçant le code ci-dessous de préférence en bas de page avant la balise </body>
<script language="javascript">
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
Plus d'infos ici

3 - On place notre code entre les balises suivantes
<pre name="code" class="html">Votre code HTML</pre>
 4 - Options
nogutter Suppression de la numérotation des lignes
nocontrols On supprime le menu supérieur
collapse Ne fonctionne pas pour ma part
firstline[value] démarre à la ligne définie par value.
showcolumns Affiche les colonnes (pas de grand intérêt)

Exemple :
<pre name="code" class="html:nocontrols:nogutter">Votre code HTML</pre>
L'exemple ci-dessus n'affichera pas la numérotation des lignes ni le menu supérieur.

!Attention la coloration syntaxique ne fonctionne pas en mode édition, pensez à demander un aperçu ou à publier votre message pour voir le résultat!