Simple Tips For Editing Blogger Code

Blogger sometimes has a mind of its own. If you visited here recently you may have noticed that there were two sets of social networking buttons below each post. That is because the default Blogger set were showing up alongside the custom set I had inserted -- even though I had told Blogger not to display their own. Nothing I could do in the Page Elements screen seemed to effect this, so instead I deleted the offending code directly in the Edit HTML section. I'll now offer you some simple tips for making this editing process safer and easier.

First, check "Expand Widget Templates" so that all of the template code will be present in the form field. Otherwise some of the key components will be hidden from view. Then boot up your favourite text or code editor and prepare three tabs or three windows or three buffers... whatever they call places to put separate documents.

Copy the huge block of code out to your favourite text editor. If you're not used to keyboard short-cuts, now is the time to start learning. They are quicker and less error-prone than the mouse. I'll be giving Windows keys but they are similar on other platforms. Ctrl-A selects all the text in the field. Ctrl-C copies it.

Move to the first text editor document and paste in the buffer (Ctrl-V). This we reserve as a backup, so save it somewhere safe for the moment. I have a standard folder for such temporary documents. Using the desktop for this task is not recommended, as it soon makes a mess of the place.

Move to the second text editor document and paste in a second copy. This one we will edit. It's much easier to deal with the code in its own window than in the small form field on the web page. Plus you now have all the text editor functions at your fingertips. Be sure to save your work as you go.

Now we need to know what to look for in this big mess of code. The easiest way is to go to the actual blog page where the problem occurs, highlight the offending part of the code (with the mouse), right-click, and choose "View Selection Source". (If you are not using FireFox the process may be different or even impossible.)

You will be presented with the HTML that was under the highlighted region. Generally this comes up in a new window on screen. Copy that block of text and close the pop-up window (Ctrl+C, Ctrl-W).

Move to the third text editor document and paste the buffer (Ctrl-V). Now you can inspect this part of the HTML for the code you are interested in. Note the "span" or "div" element that encloses it. Copy the class name for this element (Ctrl+C). Then ditch this text window as we are done with it (Ctrl-W maybe, depending on your editor).

Go to the document with your template code and search for this same class. This is another quick key combination (Ctrl-F, Ctrl-V, Enter in my case). Your cursor should now be at the section of the template code you need to edit. In this example I wanted to delete the duplicate code, so I simply got rid of everything from the opening to closing "div" markup. In other cases you may be editing rather than erasing the code.

When you are done, copy the entire document (Ctrl-A, Ctrl-C), go to your Blogger web form and paste the code over top of the stale code already there (Ctrl-A, Ctrl-V). Hit "Save Template" and your blog is updated. Check it to make sure you did the right thing.

With this method it is easier to find the code to change and easier to make the changes without screwing up. By making a duplicate of the template code before editing, you also have a convenient way of rolling back any unwanted changes.

The big lesson here is to make any extensive editing in an environment you can totally control. I do the same for emails and any other time I find myself typing too much into a form on a web page.

And, oh yes, I have fixed the Blogger template error on this site, so all is good!

RELATED POSTS