YJL

1   Syntax Highlighting

For a blog like this one, it must have a syntax highlighter, or that would be tough to read codes. Unfortunately, there is no prefect option for now, the best I can have is syntaxhighlighter. It only supports few programming languages, but better than nothing. I use version 1.5.1, the installation process is simple. This blog directly grabs the JavaScript code from Google Code except the stylesheet. The stylesheet has to be uploaded to somewhere else, because the content-type being sent by Google Code, that makes Firefox doesn’t see it as stylesheet. You may also want to modify it for your own need as I do. I inserted the code:

<link href='http://livibetter.googlepages.com/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>

</head>

You can use it as well if you want, but I may change the stylesheet and it has a modification of margin to 9 pixel from 18 pixel. Next thing is to install the core and brushes:

</div></div> <!-- end outer-wrapper -->

<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shCore.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushCss.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushJScript.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushPython.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/shBrushXml.js'/>
<script language='javascript'>
dp.SyntaxHighlighter.ClipboardSwf = &#39;http://code.google.com/p/syntaxhighlighter/source/browse/tags/1.5.1/Scripts/clipboard.swf&#39;;
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll(&#39;code&#39;);
</script>

</body>

That’s basically all that you have to do. However the results like:

It has unnoticeable spacing between the code and the first paragraph after that code. This is caused by an additional line break, by default, Blogger will convert one line break into one BR tag. That looks like:

</pre><br>Adjust the main program<div ...>

I turned the feature off:

Which you can find in Setting/Formatting. Now it will look like:

Keep one thing in mind, you don’t have automatically line break conversion. If you need a line break, you can add <br/> manually.

2   Google Analytics

I have to put the code in HTML/Text widget. Directly inserting to template isn’t working.

3   Google Webmaster Tools (Sitemap)

The Sitemap is http://yourblogname.blogspot.com/feeds/posts/default?orderby=updated, according to http://yourblogname.blogspot.com/robots.txt. Remember, if you use Feedburner burned feed as Sitemap, and its tracking feature of Item link clicks, that makes your sitemap invalid, which has links to feedburner.com/... because Feedburner need to track. The solution is giving a original atom feed (from Blogger, you need to turn off Site Feed redirection) or turning off the item link clicks feature.

4   FriendFeed Widgets

I combined Badge and Feed widgets. Removed the logos, stats and subscribing links with one feed item only. The final embedding HTML code is

<script src="http://friendfeed.com/embed/badge/livibetter?hide_logo=1&amp;hide_stats=1&amp;hide_subscribe=1" type="text/javascript"></script>

<script src="http://friendfeed.com/embed/widget/livibetter?v=2&amp;num=1&amp;hide_logo=1&amp;hide_subscribe=1" type="text/javascript"></script>

Also use the CSS:

/* FriendFeed widget
----------------------------------------------- */
.friendfeed {
  border: none !important;
  background-color: transparent !important;
}
.friendfeed *{
  background-color: transparent !important;
}

Which can remove the border, and make background transparent.