Making gray background for code block in Blogger posts

You might want to have gray background for your code block to make it more readable as below.

> echo "Hello World!"

1. Go to your Blogger dashboard and click on Template then Edit HTML.
2. Add the following code above the </head> tag and save.

<style>
pre.codeblock {
   background:#E8E8E8;
}
</style>

3. Create a new post and add the following code.

<pre class="codeblock">
> echo "Hello World!"
</pre>

Searching for specific Blogger posts by label

Searching by a label

In the textbox located on a top navigation bar for the page, you can type label:java to search for posts with label java.

Or you can type one of the following URLs in browser. They are equivalent.

http://myt8chnote.blogspot.com/search?q=label%3Ajava
http://myt8chnote.blogspot.com/search/label/java





Searching by multiple labels

You can search for all posts with label java and all posts with label php by typing in the textbox:

label:java|label:php

Or access the following URL in browser:

http://myt8chnote.blogspot.com/search?q=label:java|label:php








Reference

http://www.mybloggertricks.com/2014/01/17-best-search-techniques-in-blogger.html





Highlighting source code in Blogger post

You might want to hightlight the source code in your post as below:

public void formatCode() {
   System.out.println("Hello World!");
}

We can do it using SyntaxHightlight javascript framework as following:

Note that If your blog is using Dynamic template, it does not work. It works with only Simple template. Blogger also allows you to switch template but make sure you backup the current template first.


1. Open your blog's template page

2. Click the Edit  HTML button to edit the template

3. Copy the following code and paste it above the </head> tag and then save the template

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

Note that you can exclude some JS libs, for example shBrushVb.js, if you're not gonna use it so that you won't hurt the performance of the blog.

I had a problem with blogger that when my page was loading, it tried to download the javascript and css files using https protocol instead of http, in which the site does not support that so i downloaded those files and uploaded them to Dropbox and replace the domain alexgorbatchev.com with the dropbox domain.

4. Create a new post and click on HTML button and copy the code below and paste it there

<pre class="brush:java">
public void formatCode() {
   System.out.println("Hello World!");
}
</pre>

If it's XML code, you can use <pre class="brush:xml"> instead and you need to escape the html characters (for example, < or > ) first. You may use any online tools to do it such as http://www.bloggersentral.com/p/html-escape-tool.html


5. Now it will take effect for all new and existing posts but you can see the syntax hightlight for only the published posts and only when you're viewing them, not editing or previewing. As the owner, you can view the post from the following page:

Reference:
http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html