Customize blog description display (javascript + css)

How to use a javascript function to display something in the blog
description section on my blogspot blog:

1. Save a backup copy of the original template
   (Download Full Template option from Design->Edit HTML template)
   
   
2. Find the section that deals with the description in the HTML code for the template:
   
   • Go to Design -> Edit HTML, check "Expand Widget Templates"
     
   • Search for the code <data:description/>. This is the one that will print the description.
     
   • Search for something like
     

     descriptionwrapper {
         padding-left: $(header.padding);
         padding-right: $(header.padding);
     }

     .
     This is the CSS part that deals with the style of the description. (Note that it could be the same style for the title (titlewrapper{...}) and for the description. In this case, separate the two into 2 different blocks {..}).
     
   
   
3. Add some code that prints a random quote every time, instead of the description. Replace <data:description/> with:
   

   <p id="description">
      <script language="javascript">
        var quotes = new Array ();
        quotes[0] = "Text string one";
        quotes[1] = "Text string two";
        quotes[2] = "Text string three";
        quotes[3] = "Text string four";
        quotes[4] = "Text string five";
        quotes[5] = "Text string six";
        quotes[6] = "Text string seven";
        var random_i = Math.floor(7*Math.random());
        document.write(quotes[random_i]);
      </script>
   </p> 
   <noscript><data:description/></noscript>
   

4. Explanations:
   
   • any number of strings can be added to the array. The Math.Random() javascript funtion returns an integer between 0 and 1 (exclusive). So you multiply that result with your number of items in the array, and then round the result with Math.Floor() and you get a number between [0, N) that it's used as the index.
     
   • The original description is still kept after the script.
     
     for the crowlers(lke Google bot) that search for the description and also for the browsers that dont support Javascript, or it's disabled by the user (
     HTML noscript tag )
     
5. Customize CSS style for the description:
   
   • Find the section
     .header-inner .Header.descriptionwrapper {...} and add as many styles as you like.
     
   • Here you can choose how to modify the fonts, and look and feel :) of the text.
   • And from here you can add a nice border if you like. There are other nice options there, for margins, padding, background. Very nice. I customized my css style like this:
     

     .header-inner .Header.descriptionwrapper {
       padding-left: $(header.padding);
       padding-right: $(header.padding);
       border-style: outset;
       font-size: 17px;
       font-family: sans-serif; 
       font-weight: bolder;
     }
     

     
     
6. Other great links:
   
   • Adding random quotes in sub header. I got some problems at first with the javascript, but it's easily traceable.
     Experiment and learn!
     
   • Javascript to display random text
     
     

Add source code syntax highlighter to blogger

SyntaxHighlighter (by Alex Gorbatchev) it's a pretty good and customizable option.

It supports a lot of different languages and you can easily create new "brushes" for your language if it is not supported by default.

Now, adding 'Syntax Highlighter' to my blog:

Step1: Save old template

From Design->Edit HTML->Download Full Template

Step2:

In Design->Edit HTML, add the following before ending of the head element, just above </head>:

<!--SYNTAX HIGHLIGHTER BEGINS-->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<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>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER ENDS-->

Other possible variants for "brushes" are:

shBrushCss.js, shBrushJava.js, shBrushJScript.js, shBrushPhp.js, shBrushPython.js, shBrushSql.js, shBrushRuby.js, shBrushVb.js, shBrushXml.js, shBrushPerl.js.

The brush "shBrushXml.js" applies also to html syntax highlighting.

Step3:
You can preview anytime the template.
And while creating a new post, use <pre> tag in the post.
The code of your post needs to go in between the
<pre class="brush: html">
and
</pre>
tags, in order to highlight properly.

Step4
Other possible themes (instead of "shThemeDefault.css":

shThemeDjango.css, shThemeEclipse.css, shThemeEmacs.css, shThemeFadeToGrey.css, shThemeMidnight.css, shThemeRDark.css.