Wednesday, March 10, 2010

Blogger - Creating a random Blog Description

This is how to create a rotating random blog description in a Blogger Blog – I’ve tested it using a new style template and it works fine.

First, Create a description you are happy with for your blog.  This will be the one seen by search engines and people who have JavaScript disabled.  Click Layout > Page Elements > Edit (in the page header element) and enter your description in the box there and press Save.  Check you’re happy with the layout and edit it in Layout > Fonts and Colours if needed.

Click Layout > Edit HTML

Click Expand Widget Templates

Search for <data:description/>

Replace…

<div class='descriptionwrapper'>
  <p class='description'>
    <span><data:description/></span>
  </p>
</div>

With this

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

Obviously, replace the strings with your random descriptions!

References:
http://www.webdevelopersnotes.com/tips/html/random_text_display_using_javascript_1.php3
http://blog.immeria.net/2005/04/blogspot-hack-random-quotes-in-sub.html

1 comment: