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