Syntax Highlighter - Where to upload .js javascript files used for blogs

I had read about the syntax highlighter scripts a few months back but never really found the time to add it to my blog.

Today I decided to do it. Soon I ended up with the same problem quite a lot of others had already faced. Hosting .js files. Most of the code examples on the internet showed people uploading the .js files in Google pages. But Google pages is discontinued and it is now Google Sites, and Google sites does not permit uploading .js files.

Though the required files are available in Google code for you to refer, still I had modified a few things in the script which I wanted to host somewhere. Another option was to insert all that script inside my template, which I did not like.

Some blogs suggested some alternative free hosting sites, but I found my way out.

Here is what I did. I renamed all the script files with a .jsc extension and uploaded them in Google sites - it gave me no problem. I then referred these files in my template and it works like a charm. I just did a quick test on my default browser - Chrome. Also tested in IE 6 and Firefox.

Modifying Blogger Template – Resizing main Blog Area

The Google blogger has a decent bunch of templates to choose from and when I had to choose one I took a couple of minutes to think.

I would be posting code snippets and occasionally diagrams or images, maybe screen captures to explain something. But primarily the content will mostly be text with a lot of code.

I did not want a dark background with white fonts – I think no one will ever want to use that for writing technical content. Somehow I did not like the fully white templates as well. Most of the templates offered looked too simple and without many colors.

I finally chose the Rounders-3 (Green version) because it was simple and slick and the colors were fine and looked professional. However there was one drawback with it which I noticed as I started to post. The space reserved for the main blog was too little and any post that I did looked obtrusively lengthy. The code snippets that I posted had to be broken down to multiple lines despite using a smaller font. Making the fonts any smaller would be make it impossible to read.

So the only options I had were to either expand the main blog area or choose another template. But then, since I liked the template and also because did not want to perform a huge face-lift to a blog with steady traffic, I chose option A.

The change, I presumed, should not be difficult to make and it was not that difficult at all.

The default template was done to fit 800x600 resolutions and hence the max size of the title and footer was at 740 px. I am not sure if there are any more people using such low resolutions, but anyways I had my Google analytics stats to answer my question. There was less than 1% of the total visitors in that screen resolution.

Convinced that it would not affect the majority of the users, and even for those affected, they only have to scroll to see the profiles section, I proceeded to make the change.
Just wanted to jot down the exact changes made, as a ready reckoning for myself and others:
1. CSS properties had to be changed for the main blog area and the Title
2. Noticed that the rounded corners were not images for just the corners, but were a strip, hence had to modify the images and adjust it to the new width

That was all that needed to be done.

I used Google sites to upload my modified images. There was a snag in accessing the images from Google sites. Read more about it here.

Actual CSS Changes

#outer-wrapper
width:940px;
change image – used
http://sites.google.com/site/codingpassion/Home/corners_main_bot.gif?attredirects=0

#main-wrap2
change image – used
http://sites.google.com/site/codingpassion/Home/corners_main_top.gif?attredirects=0

#main
change image – used
http://sites.google.com/site/codingpassion/Home/rails_main.gif?attredirects=0

.main .widget
width: 668px;

.main .Blog
width: 684px;

#header-wrapper
change image – used
http://sites.google.com/site/codingpassion/Home/corners_cap_top.gif?attredirects=0

#header
change image – used
http://sites.google.com/site/codingpassion/Home/corners_cap_bot.gif?attredirects=0

#footer-wrap2
change image – used
http://sites.google.com/site/codingpassion/Home/corners_cap_top.gif?attredirects=0

#footer
change image – used
http://sites.google.com/site/codingpassion/Home/corners_cap_bot.gif?attredirects=0

Before


After