Translate

Translate to EnglishÜbersetzen Sie zum Deutsch/GermanΜεταφράστε στα ελληνικά/GreekПереведите к русскому/RussianOversetter til Norsk/NorwegianÖversätta till Svensk/Swedishहिन्दी अनुवाद करने के लिए/Hindi
Tradueix al català/CatalanTulkot uz latviešu/LatvianPreložiť do slovenčiny/SlovakVertaal aan het Nederlands/Dutchترجمة الى العربية/ArabicTraduzca al Español/SpanishTraduisez au Français/French
Traduca ad Italiano/ItalianTraduza ao Português/Portuguese日本語に翻訳しなさい /Japanese한국어에게 번역하십시오/Korean中文翻译/Chinese Simplified中文翻译/Chinese TraditionalПереклад на українську/Ukrainian
Image of Android Wireless Application Development
Image of Modern Operating Systems (3rd Edition)
Image of Beginning Google Maps API 3
Image of Linux Kernel Development (3rd Edition)

Favicon Issues

Today I decided to add some color to my blog by adding a picture to my profile and to the title bar.   As soon as I have my profile picture in place, I decided that it would be a good idea to use this same picture to add a favicon to my blog.  Bad mistake!  Turns out that Blogger.com does not allow you to upload a favicon (AKA shortcut icon) file.  Instead you are expected to link to a shortcut icon file residing on another host.

Well, I decided that I did not want to set up another account on another host just to display a favicon so I figured that there must be some way of embedding the shortcut icon in my Blogger template.  After some experimentation I have managed to embed a shortcut icon in my template such that the shortcut icon is displayed correctly with Firefox.

Here is the code I inserted into my template just after the <title> line. <link rel=”shortcut icon” type=”image/x-icon” href=”data:image/x-icon;base64, AAABAAEAEBAAAAEACABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAEAABILAAASCwAAAAEA AAABAAAHCgwACAoMAAoLDAAGDRIACA0RAAgOFAANEBIADxITABQREQAUFBIAEBUYABIXHQAYFRMA DhgjABEcLAAbHyUAFyIsABwmLgAbIjUAGSs5ACMeGAAoIx8AJiUjACEgKQAlJigAJycoACUlLwAp JikALSotACAuNgAhLjkAKikyAC4tMgAiMTsAJjQ9AC8xMQAqMTsAKzM9AC0yPAA5MSwAMjcwADAw OwA0Pj4AODM2ADo1NgA7NTcAPDc4AB42bAAbNncAISxRACY4SQAqNkUALTZCACs7WwA4OUcAOj9I ADE+XwAjO2QALTtvAC49agAiOnoAJjh8ACg1cgA7QjcAPENBADdHVQA7RlMAO05cADZSaQA/VWgA QTMxAEQ5OABARjgAREg9AFdMPQBeST0Ack03AH5MMAB8UjcAT0xKAEBOWwBBUVoAS1tTAFdISQBc UVAAQFhpAEVYaQBGXG8ASV5pAEhdbwBCXXUAUGVcAFJkXQBUZl8ARmV/AEhjdwBLZ34AT2d8AFdi ZQBdbWQAWmdwAFlrdgBea3cAXXJqAF1yawBhTUYAa1NEAGNRXwBoVlMAa1hRAHRSQABwWksAcVpL AHJZSQB1WEsAelhEAH1ZQgB4WksAfl5NAGRcZgBmXWsAb2VXAHJqXQB+YFAAYGluAGN0bgBjem8A b3J5AG5+eABufX0AcGNgAH5uZwB9bnoAfHN+AHp4eAAeM4oAIjuHACo7kwAlQoAALkqFACpBlAAv RpwALE6rADNXpwA3WKwAMlWyADNWtgA0U7oAOVaxADhetAA5W7kAOmKvADpitwA9ZL0ANEzAADdQ wAA+Y8gAQFWQAEhngABJaIAASmuDAEdikQBNc44AT3ubAE98nwBSboQAWHaLAFl4jQBTepcAU32d AF9/lgBOb6sAZF6CAGB1ggBgdoUAZnmHAEFzzQBSfOMAcoR8AFqIqAB5jYYAeY+IAHqOkAB9jJ4A fpKGAH+TjAB/mJQAZoqkAGqTrgBikrUAYpO0AGKUtgBmmLwAaZOwAGqdvwB7i6EAVYfIAFGL2ABW jt0ATpHnAFmN5wBWleQAXJ/vAGqdwQBro8oAbaPIAIBTOgCHY04Ai2BDAIhjTQCCZFAAjGdSAIpy ZwCLd20Aj356AJN4YACPjIoAhYiSAIaNlwCBkYkAgZSMAIGVjACAlo0AgZeOAIKXkACDmZEAg5mS AICZlACFmpIAhpiSAIaakwCGnJUAiZySAJKfjwCMopkAkaWcAJSonwCZqJgAiae2AJ+jpgCer6YA layzAJe1rACZsKcAtpiKAKCnrACnqacAqqakAKerswChs6kAsLCwAKrBtAC0xbQAtMa0AAAAAAAA AAAAw7V+Z2ddfvK4uuLl87Ln+X+GY1tdUj/t6rrk4ObmufDY1HyAKD8/YvrquOK0tODl1FNk+CxJ L6Hp/PO54IF6avTWZe83Ty/FxPH823nSTkzV2q3vcVOPycrJ7tdN0dPShben98+Lk7HGx6t7cm1s VITZr/p3MD2MkLCdR0YsLS1KeWb2eIeJm7CZkWtObnN0QBgQIDY8jZSQlY6s0HVxcQMTDQQOiJqW mJKKEhQWJ0ujpEQyDzE+Ojg7NQYFAwIMqbO9vSIIGBsbHCALCgYBAFq9wsuoMxcaHyklHSEeEQhD VWBeVUE0JCZCV1ZZpaanoqCgX1FYqru8vGFQYMDNzAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=” />

How did I come up with this base64 image string?  First of all, I created a favicon.ico file from my profile picture using the free favicon generator at iconj.com.  Then I used another free tool Base64 Online Encoder to convert the contents of the favicon.ico file into a base64 string which I then embedded into the HTML <link> element as shown above.

Here is what it looks like when this blog is viewed using Firebox.

As you can see the favicon displays correctly on both a tabbed window and the toolbar.  However this hack does not work for any version of Internet Explorer or Safari that I know of.

Incidently, the image used to create the blog title bar came from recent photograph taken at dawn on Panglao Island, PH by Ms P. Correia.

December 10th, 2008 | Tags: | Category: Favicon | One comment - (Comments are closed)

Displaying Source Code in a Post

I generally include source code of one kind or another in my postings.  Being used to the <code>, &lt/code&gt tags commonly available in user forums such as www.unix.com, I was surprised to find that no such facility was available for use on Blogger.  I searched around the Internet and came across similar complaints from other users and various suggestions and means of formating code so that it is attractively and usefully displayed in a post.  After trying a number of methods and formats developed by others and generally being unhappy with the results, I decided that my best approach was to develop and incorporate a custom CSS element for displaying source code into my Blogger layout template.

Here is the CSS element which I am using to display the source code in this post: /* Custom styling —————————– */ .displaybox, .displaybox pre { font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; font-size: 12px; color: black; background-color: RGB(245,218,199); border: 1px dashed #999999; line-height: 14px; padding: 5px; overflow: auto; width: 100% }

I added this code to my blog template in the <b:skin&gt section of the template just about the Comments section.

Here is a sample of the output for a simple C function.  No changes had to be made to the source code except to change the include header angle brackets to &lt; and &gt; respectively. #include <shell.h> int b_hello(int argc, char *argv[], void *extra { if (argc != 2) { printf(“Usage: hello arg\n”); return(2); } printf(“Hello %s\n”, argv[1]); return(0); }

This custom CSS element in my blog template will not eliminate the need to make any changes to source code before including the code in a post but it does simplify things.   With this CSS element in place, the only parts of the source code that I should have to manually edit in order to display correctly are angle brackets, ampersands and quotation marks.

UPDATE 07/01/2009 This post was written when I was using Blogspot. I am now using WordPress on my own web site.

December 9th, 2008 | Tags: | Category: blogspot, display source code | Comments are closed