Piercing the Solitude: blogger

Monday, October 6, 2008

Dynamically Changing Text Size in your Blog

Display text size is dependant on the current font and display settings of your browser in the case of most blogs. Also, some people might have difficuilty in reading your blog (especially on modern screens which support very high resolutions). Therefore, you might be interested to give your visitors the option to dynamically increase/decrease the size of text displayed on your blog.

The feature can easily be added with a least amount on effort provided that you can fulfill the basic pre-requisites. In order to get started, you will have to go to Layout -> Edit HTML. After that make sure to keep a copy of your current template in case you want to revert back. Now, identify each font-size entry that use an absolute size (size in px), and replace them with a relative size (size in em, or %). You can make use of the preview to make sure that you got the right font size.

Now, just after the <body> tag add, <div id='resize-wrapper'> and add </div> just before the closing </body> tag. After you have done this step, add this text above the ]]</skin> tag.

  #resize-wrapper {
   font-size: 13px;
 }

Then just after the ]]</skin> tag, add the following text:

  <script>
   var r;
   var current_size = 13;
   if (document.all)
     r = 'rules';
   else if (document.getElementById)
     r = 'cssRules';
   function change_size(s) {
     if (!s)
       current_size = 13;
     else
       current_size = current_size + s;
     if (current_size < 10)
       current_size++;
     else if (current_size > 16)
       current_size--;
     for (var i = 0;
           i < document.styleSheets.length;
           i++)
       for (var j = 0;
             j < document.styleSheets[i][r].length;
             j++)
         if (document.styleSheets[i][r][j].selectorText
              == '#resize-wrapper') {
           document.styleSheets[i][r][j].style.cssText =
             document.styleSheets[i][r][j].style.cssText
              .replace(/\d+/g,current_size);
           return;
         }
   }
 </script>

Once you have done that step, save your template and then tick the Expand Widget Templates check box. Now you can add the following text, anywhere on your blog, which enables the text-resize functionality.

  <div id='size-control'>
   <a href='javascript:change_size(-1)'
     style='font-size:16px' title='Reduce Size'>A</a>
   <a href='javascript:change_size(0)'
     style='font-size:20px' title='Default Size'>A</a>
   <a href='javascript:change_size(1)'
     style='font-size:22px' title='Increase Size'>A</a>
 </div>

Now, save the template once again, and test the functionality, in order to make sure that you got all of it right. Optionally you can make use of CSS to add style attributes to the layout of the #size-control element.

Thursday, October 2, 2008

HTML aware Twitter

Twitter, an online status update tool, can easily be integrated to blogger to enable live updates to your blog in the form of miniature 160 character messages. Twitter does provide a widget that can be added to your blog, which is capable of doing the hard work of fetching and publishing the required information for you. However, the widget provided by Twitter (Twitter Badge for Blogger), as of today is not HTML aware.

However, on your twitter homepage, you will notice that Twitter intelligently replaces URLs and friend names with hyperlinks. To add a friend name in your message, you will simply have to append an @ sign in front of the name (ex:- senaka -> @senaka). Once done, Twitter will create a hyperlink to your friend from your post.

The problem I'm answering here is how to bring in this functionality to your blog. This though you might believe is hard, is apparently very simple. All that needs to be done is to simply add this text under your twitter code.

  <script type='text/javascript'>
    document.getElementById('twitter_update_list').innerHTML
      = document.getElementById('twitter_update_list').innerHTML.replace(
        /([^\"\'])(https?:\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/g,
        '$1<a href="$2">$2</a>');
    document.getElementById('twitter_update_list').innerHTML
      = document.getElementById('twitter_update_list').innerHTML.replace(
        /@([a-zA-Z]+)/g,'@<a href="http://twitter.com/$1">$1</a>');
  </script>

Once, you have done this, your Twitter updates will become HTML aware. The method employed here is the use of regular expressions and javascript to change the way in which the Twitter feed is published.