mardi 9 novembre 2010

Petites astuces pour Blogger

Blogger n'est pas parfait, mais quand on ne dispose pas d'un hébergement correct (@home) ou qui ne permet pas d'utiliser un sous domaine sans devoir importer tout le domaine (1&1 ..), qu'on veut utiliser son domaine perso et qu'on veut avoir des articles dédiés a plus d'un élément (Tumblr&co), il peut faire l'affaire.

Les thèmes maintenant proposés par défaut ne sont pas trop moches, on peut se servir d'un template comme base pour arriver a un résultat correct, mais il reste toujours la navbar et dans le cas d'un blog un minimum technique, il faut une coloration syntaxique.

Après quelques recherches, les 2 sont faisable, et même plus, puisque j'obtiens une navbar qui ne s'affiche que pour l'administrateur du site, plutôt utile :)

Bref, voici les bouts de code utilisés :

Navbar seulement pour l'admin & suppression des boutons pour modifier les widgets
  CSS :
.navbar {
  display: none;
}
.quickedit {
  display: none;
}
  HTML (justes après <body..>) :
<script type='text/javascript'>
navbar = document.getElementById('navbar');
navbar.className += ' blog-admin';
</script>

Prettify
  HTML (vers la fin de la page) :
<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/>
<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'/>
<script type='text/javascript'>
addEventListener('load', function (event) { prettyPrint() }, false);
</script>
SyntaxHighlighter
  CSS :
pre {
  margin-left: 10px;
  margin-top: 0.7em;
  margin-bottom: 0.7em;
}
.syntaxhighlighter {
  margin-top: 0.7em;
  margin-bottom: 0.7em;
}
.syntaxhighlighter .gutter .line {
  margin-right: 3px;
}
  HTML (vers la fin de la page) :
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'/>
<script type='text/javascript'>
function path()
{
  var args = arguments,
      result = []
      ;
       
  for(var i = 0; i < args.length; i++)
      result.push(args[i].replace('@', 'http://alexgorbatchev.com/pub/sh/current/scripts/'));
       
  return result
};
 
SyntaxHighlighter.autoloader.apply(null, path(
  'applescript            @shBrushAppleScript.js',
  'actionscript3 as3      @shBrushAS3.js',
  'bash shell             @shBrushBash.js',
  'coldfusion cf          @shBrushColdFusion.js',
  'cpp c                  @shBrushCpp.js',
  'c# c-sharp csharp      @shBrushCSharp.js',
  'css                    @shBrushCss.js',
  'delphi pascal          @shBrushDelphi.js',
  'diff patch pas         @shBrushDiff.js',
  'erl erlang             @shBrushErlang.js',
  'groovy                 @shBrushGroovy.js',
  'java                   @shBrushJava.js',
  'jfx javafx             @shBrushJavaFX.js',
  'js jscript javascript  @shBrushJScript.js',
  'perl pl                @shBrushPerl.js',
  'php                    @shBrushPhp.js',
  'text plain             @shBrushPlain.js',
  'py python              @shBrushPython.js',
  'ruby rails ror rb      @shBrushRuby.js',
  'sass scss              @shBrushSass.js',
  'scala                  @shBrushScala.js',
  'sql                    @shBrushSql.js',
  'vb vbnet               @shBrushVb.js',
  'xml xhtml xslt html    @shBrushXml.js'
));
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.defaults['smart-tabs'] = false;
  SyntaxHighlighter.defaults['tab-size'] = 2;
  SyntaxHighlighter.defaults['toolbar'] = false;
  SyntaxHighlighter.all();
</script>

Autre petites modifications dans le template :
  • suppression des liens pour les flux sous les articles (widget a la place), on retire cet include :
    <b:include name="feedLinks"></b:include>
  • suppression du lien "Accueil" (même emplacement), on retire cette ligne :
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

J'espère que cela pourra vous être utile :)

Aucun commentaire:

Publier un commentaire