Before I thought I could start blogging with Blogger, I had two major concerns:
- I didn't like the default font which the blogger template provides
- There's no easy way to put your code in a formatted way
I had to search a lot to finally make these work. So I thought why shouldn't this be my first blog ?
For both the below mentioned steps you need to edit your blog's template (Your Blog > Template > Edit HTML)
Steps to change the default font
- Search the font which you want, I used Google fonts to do so. I liked the font Karla
- Paste this code before <b:skin> tag
<link href='http://fonts.googleapis.com/css?family=Karla:700italic,700,400italic,400' rel='stylesheet' type='text/css'/>
- Update the font style for all the default variables in template
default="normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>With:
default="normal normal 13px 'Karla', sans-serif;" value="normal normal 13px 'Karla', sans-serif;"/>
Steps to include formatted code
We want to include SyntaxHighlighter in the blog and here are the steps:
- Copy the css in this link before <b:skin>
- Paste following code before </head> tag
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js" type="text/javascript"></script> <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js" type="text/javascript"></script>
- Paste the following code before </body> tag
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
- Save the Blogger template
Links
I have put my entire blogger template on gist here. Use this to replace your template. You would get the same layout as this blog.
