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 »

Basic Search Engine Optimization Tips for Blogger

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

In this installment of "Better Blogging Tips for Blogger Powered Blogs," we're going to implement two simple and elemental search engine optimization measures; replacing the simple title tag with dynamic title coding, and add meta tags.

First on our agenda, is the title tag. While many pre-made templates are equipped with an improved title tag; this is not always true. In that case, we'll have to modify it ourselves.

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

To do this, we need to click "Edit HTML" within the Dashboard's "Design" tab to access the template code. Once there, find the code in question

<title><data:blog.pageTitle/></title>

and replace it with the "dynamic" title code shown below:

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

If we really want to blog better and be a better blogger, we should gain some understanding as to the purpose of this code and it's function before we proceed.

The former code consisted solely of the title tag, whereas the the new "dynamic" code supplies instructions, or conditional statements in addition to the title tag. The conditional statements define the title tag's behavior in the browser, depending on the page type on which it is referenced.

And just what does that mean?

If the referenced page is an index page, the browser will only display the blog title.

If not, or if the referenced page is something else, the browser will display the title of the referenced post or page, followed by the title of the blog.

It's not so complicated after all, is it?

Now that we've gained some understanding of the dynamic title code, we are ready "Preview" and "Publish," our blog. (Provided our blog appears normal/unchanged in the preview)

Browse your blog, paying attention to the title bar in your browser to see the dynamic title code in action.

The accessibility of our content by search engines is greatly improved now that our title code is "dynamic." Hooray!

But it's not time to celebrate just yet, we still have one more thing to complete on our agenda: adding meta tags to our blog.

Meta tags provide search engines various information and details specific to a blog or website. The meta tags we are going to add to our blog are description, keywords, and author.

Screen capture of BellaTYPE's description as it appears on Google Search, one example of how meta tags can be utilized by search engines

Return to the Dashboard HTML Editor, and look for the dynamic title code we added previously. To find that code again, first look for
</title>
and then
</b:if>

Just after this instance of </b:if>, we are going to paste the meta tag code provided below.*

<meta content='Your description goes here' name='description'/>
<meta content='Your keywords here' name='keywords'/>
<meta content='Your name here' name='author'/>

*The pink text in the above code must be replaced with values specific to your blog.

Your description goes here: Enter the description of your blog here. It is advised that the description be kept relatively short, and sentence form. Avoid using too many keywords in your description as well.
Your keywords here: Replace this text with keywords relative to your blog separated with commas. Limit your keywords to only those that reflect your content, and try not to use more than a handful.
Your name here: Replace with your name, or the name you wish to go by.

Just as we had in done when changing the title tag earlier, after customizing and pasting our meta tag code, "Preview," and "Publish," your blog.

Ta-da! You have now provided your Blogger powered blog with some elementary measures for search engine optimization. You are about to be discovered!

Stay tuned for the next installment in the "Better Blogging Tips for Blogger Powered Blogs" series, where we'll take optimizing your blog's content up one more notch...

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

Continue Reading »