A new theme ??? and some old Blogger tweaks

I re-skinned my Blogger sites (yes this site is one of them!) using a template I found on the internet.  Installation was simple although I had to edit some of the HTML as part of the process, but full details were given with the template.However I had to add some tweaks to the code, and re-install some tweaks which might be useful for other Blogger users.   I have created this blog post to list all these tweaks in one place.Most of these tweaks require you to edit the HTML code of your template.  It is wise to save a backup before you edit.I couldn’t use triangular brackets in my post so I’ve used these instead [ ].  Swap them for triangular brackets before you add any code.

Media_http1bpblogspot_hhras

Customising your favicon.It amazes me how many people don’t bother to add one of these to their site.  It is the small icon that appears on your browser tab next to the page title.  It is relatively easy to add one to a self-hosted blog but adding one to blogger takes a little more work.  First step is to create a favicon – search Google for a Favicon generator.Second step is to upload it to a page where you can address it by a single URL.  I uploaded mine to a page in Google sites and then right clicked on it to find out its URL.Add the following code to your blogger HTML just before the [/HEAD] section making sure the URL matches that of your favicon.

[link href=’http://sites.google.com/site/xxxxxxx/icons/favicon.ico’ rel=’shortcut icon’ type=’image/x-icon’/]
[link href=’http://sites.google.com/site/xxxxxxx/icons/favicon.ico’ rel=’icon’ type=’image/x-icon’/]

Hiding the blogger navbarSome people like it, some people don’t.  I choose to hide the blogger bar, although I display a blogger badge instead to show that I am using their service.  Hiding the bar is simple – add this code to the HTML of your blog.#navbar-iframe {              height:0px;visibility:hidden;              display:none;        }Centring your widgets.Sometimes you install a widget and it looks a little lop-sided stuck to the left hand side of a column.  Look for the following in your HTML (make sure you tick the box that says ‘Expand widget templates’ otherwise you won’t find the code)[div class=’widget-content’]

and insert align=’left’ align=’center’ or align=’right’ as follows (Note the American spelling of centre/center)

[div align=’center’ class=’widget-content’]

Tracking visitors to your site.Register for Google analytics and install the code you are given here:

Media_httplh6ggphtcom_cxhuj

and paste it just above the [/BODY]section.Useful widgets

Media_httplh6ggphtcom_sdudd

Media_httplh3ggphtcom_hewit

Media_httplh4ggphtcom_bjzhd

One of the best widgets I’ve found is from Stat-counter.   This gives you extremely detailed information, with the sort of detail you’d get from your server logs if you self hosted.  You can see referring links, pages requested, ip addresses and exit links. The only catch is that you have to pay for a log of more than 500 lines.  For low traffic sites like mine (25-40 unique hits per day) this easily keeps tracking data going back a few weeks.  Statcounter has full support for Blogger and even gives you instructions of how to install the code.If you want users to your site to see where other visitors came from I can recommend a widget from Feedjit.  These put real time tracking information on your site, allowing you and other visitors to your site to see the country and destination pages of visitors.Forms in Google Docs are useful for adding a contact page to your blog – more information in this blog post.Google profiles are a useful way to list and link to all your web personas from one page.  My Google profile is here.I hope you found these tips useful.  Feel free to leave a comment and a link to your blog below.