Update! HTML Editing Now Available in New Blogger!

This just in: Blogger has added HTML editing capabilities to the new Blogger interface! That's right! Previously we had posted a "tutorial" on how to temporarily access the old HTML editor since the new interface did not contain this feature, however, Blogger's new new interface does include the HTML editor. No more hackish methods necessary.



The HTML editor can be easily accessed via the "Templates" category in the new new interface. Located at the bottom of the Templates page, is a link reading "Edit HTML." By clicking on this link, your template HTML is made available. As in the "old" interface, a check box is provided to "Expand Widget Templates."



Above is a screen capture of this area within the new Blogger. I knew Blogger wouldn't let us down!

Continue Reading »

How to "Edit HTML" of Templates in the new Blogger interface

Users of Blogger's new interface might have noticed that the "Edit HTML" feature which existed in the previous Blogger interface, is not present. This omission it seems, does not appear to be an oversight, nor does it appear it is Blogger's intention to include it.

Regarding design, the new interface provides two categories. Where widget editing and arragements were previously handled via the "Page Elements," sub-category to the "Design," tab,  the new interface offers these functions in the "Layout," as a stand-alone category,



The second area in the new interface pertaining to the design, is the "Template" category, which provides access to the "Template Designer," as well as pre-made template options.

At the very bottom of this page is the new interface's only reference to HTML editing (that I have found), with links reading, "Edit Template," and "Revert to classic templates."

Clicking on the first link, produces the option to "Download
full template," or "Upload a new template," followed by words from Blogger that suggesting HTML editing might be phased out altogether:

"...Editing your template HTML may limit your access to new Blogger features so we recommend using the template designer to change layout and add custom CSS."




Thanks to the helpful folks on Google's Blogger Help Forum, I discovered how to access the former dashboard's "Edit HTML," feature in the meantime.



First, you must identify your blog's ID. One method for doing so, is to view the source of your blog, and look for "service.post" You should find a line of code in your template similar to this:

<link rel="service.post" type="application/atom+xml" title="BellaTYPE - Atom" href="http://www.blogger.com/feeds/5499807116547380464/posts/default" />


The blog's ID will be located in this line of code.In the example above, the blog ID is shown in bold. Take the blog ID number you have located, and copy it into a text editor (Notepad for example) and then paste the following URL directly infront of it:
 http://draft.blogger.com/html?blogID=

It should appear like so:

http://draft.blogger.com/html?blogID=5499807116547380464

You can now paste this URL into the address bar of your browser, and you will open the template in former Dashboard's "HTML Editor."

Let's hope that HTML editing capabilities will continue to available to us on Blogger.

Continue Reading »

Adding ALT and TITLE Attributes to Blogger

Better Blogging Tips for Blogspot Powered Blogs
Posts In Series: [ 1 ][ 2 ] [ 3 ]

In this the third Better Blogger Powered Blogging series, we are going to expand upon the optimizing for search engines we began in the previous post, "Basic Search Engine Optimization Tips for Blogger," with the usage and implementation of ALT and TITLE attributes in our blog.

What are ALT and TITLE attributes? They are HTML codes indended for alternative or descriptive text to display when a cursor is placed on them.
ALT attributes pertain to and are used with images, while the TITLE attribute pertains to links.

These attributes are important as they are informative to visitors, and also provide information that may be crawled by search engines. It's good practice to include these attributes whenever using images and links within a blog post. Beware hwoever, of stuffing ALT and TITLE text with keywords as this is looked poorly upon by search engines. Keep descriptive text pertinent and simple.

The HTML for a typical link might appear something like this:
<a href="http://www.bellatype.com">BellaTYPE</a>

With the TITLE attribute included, that same link could appear like this:

<a href="http://www.bellatype.com" title="BellaTYPE">BellaTYPE</a>

To add TITLE attributes to any link in a blog post, select the Edit HTML mode, and add the code below to your link HTML:
title="DESCRIPTIVE TEXT HERE"

Adding the ALT attributes is similarly simple. Below is an example of the HTML for an
image.
<img src="http://www.bellatype.com/image.jpg"/>

The same example image HTML with ALT attribute:

<img alt="BellaTYPE" src="http://www.bellatype.com/image.jpg"/>

Adding the height and width attributes to images is also good practice, but we'll get to that in another post. Back to the ALT attribute. To add an ALT attribute to any image, simply add the code below to your image HTML:
alt="DESCRIPTIVE TEXT HERE"

Now that we've tackled the use of ALT and TITLE attributes within blog posts, it's time to give our template the royal ALT and TITLE treatment. Head on over to the HTML editor from the dashboard and check the box that says "Expand Widget Templates."

Don't forget to "Backup Your Template" prior to making changes to the code!

To ease your editing, copy and paste your entire template code into a text editor such as notepad.

Find for this in your template code (most likely will appear twice):

a expr:href='data:blog.homepageUrl'

And replace with:

a expr:href='data:blog.homepageUrl' expr:title='data:title'

Find for this in your template:

a expr:href='data:post.link'

And replace with:

a expr:href='data:post.link' expr:title='data:post.title'

Then find for this in your template:

a expr:href='data:post.url'

And replace with:

a expr:href='data:post.url' expr:title='data:post.title'

Then copy the entire contents of your text editor, and paste it in place of your template code in the Dashboard editor. Preview your blog, and if all appears fine, click publish and browse your updated blog.

Congratulations, your blog title link as well as your post title's have now been outfitted with TITLE attributes. Place your mouse cursor over a post title to see the TITLE attribute in action.

Better Blogging Tips for Blogspot Powered Blogs
Posts In Series: [ 1 ][ 2 ] [ 3 ]

Continue Reading »