Telling Google, and visually-impaired people, about the pictures in your blog

This article is about why and how to attach keywords and related text to the pictures in your blog posts.  This is helpful for both search engine optimisation (SEO), and for making your blog accessible to people who use screen-reader software.

Pictures and your blog

Blogger has a set of tools for putting pictures into your blog, including several options for putting images into posts or gadgets. 

In most cases, the other content in each post provides enough information for Google's indexing tools to know what the post is aobut.

But if your blog mainly has photos, your posts may not have enough key words to get properly indexed.  And even if the image-indexing tools do some auto recognition, a description of a picture written by a human being  will almost always be better than one which was created by a computer.

Also, if your blog's visitors may include visually impaired people or others who use screen-reader software, then you need to think about how well your content will work for them:  if you important information is inside images but not in the text, then they won't be able to get this information in any way.

These two good reasons for adding "alternate text" to your pictures - and there may be more.

What's even better is that Blogger now has a tool for to make it easy to do this.

How to add captions and alt-text to pictures in Blogger

Add the picture to your Post.

In Compose mode, float your mouse over the picture.   This will show the picture-editing-toolbar, like this:

Choose the Properties option.

This opens a dialog box where you can enter

• A title - this is shown when a visitor hovers their mouse over the picture

• Alt text - this is kept in the background, and only displayed to people who (for whatever reason) cannot see the picture.

What your readers will see

People who read your blog on line, either with a standard browser or an RSS feed reader, won't see anything different, until they hover over the photo.   When they hover, they will see the text you put into the Title field.

People who read your blog in their email (because you've offered a subscribe-by-email option) may see the alt text instead of the picture, depending on what setting they have in their email system.

People who use screen reader software will have the text that you added read out to them in the usual way that their software works.

And most importantly, search engines will see the text you added, and hopefully the will use it in indexing your post.

Other Alternatives

The Post and Pages editor also has an Add Caption option on the photo toolbar, although I only recommend using  if you're comfortable editing HTML, because it puts the picture into a table, and so to move it inside the post you need to edit the code, not just drag-and-drop it.

---

Related Articles

Tools for putting pictures into your blog

Addingng a Picasa slideshow to your blog

Tools for applying copyright protection to your blog

Why RSS/Subscribe to Posts is important for your blog.

Adding a subscribe-by-email option to your blog

Read More

Adding a separator line between your posts

This article shows how to put a horizontal separator line between posts in your blog, using either HTML's line command, or CSS rules.  It also has suggestions about ways of formatting these lines using different colours and line-styles.

There are at least four approaches to choose from if you want to put a divider between your posts in Blogger.  These days, I prefer the CSS-rule approach, because it's so easy and flexible.  But I've shown details of a few other methods too:

• Manually add a horizontal line command to each post
• Use the post-footer colour block as a line (in Designer templates only)
• Add the HTML command for a line to the main section of your template, in one of the post-footers
• Add a top or bottom-border to the CSS rule that formats the body of your posts.

The following sections give more detail about each option, including how to apply them to your blog, and their advantages and disadvantages.

Manually add a line to each post

When you are editing a post, you can put a horizontal line anywhere in the contents.

In the post-editor:

• If  Post options > Compose Settings is set to  Interpret typed HTML, then you can just type <hr />, and Blogger will place a line like this in your post.

• If  Post options > Compose Settings is set to  Show HTML literally, then you need to switch to the HTML tab before you type <hr />.

Disadvantage: If your post is set to display comments, or the blog is set to show the author, labels etc under the post, these items will be underneath any line that you add manually to a post.

Designer Theme - post footer colour

If your blog has a designer theme (ref, What sort of theme have I got), then the Theme Designer > Advanced tab may have an option for setting the background colour of the post-footer (depending on which theme you are using).

If you use a dark colour (or have a dark background and use a light color), this makes the post-footer look like a line.

Disadvantage:  The "line" might be a bit thicker than you like.   And if your post is set to display comments, or the blog is set to show the author, labels etc under the post, these items are shown right inside the footer line.

Add a line-command to your theme

If you don't like the other two approaches, you can change your theme to add a horizontal line.  To do this:

Edit your blog's theme in the usual way.

Most themes have three footer lines:  what is in each one depends on the theme, and how you have arranged the items in the Layout > Blog Posts editor.  Look at the theme for code like this:

       <div class='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> </div>

OR

 <div class='post-footer-line post-footer-line-3'/>
    </div>

Add the <hr /> command to which ever of the footer-lines you want it in, for example

 <div class='post-footer-line post-footer-line-3'/>
<hr />
    </div>

Advantage:  you can easily place the divider line anywhere you want it, relative to the other items in your post-footer.


Disadvantage:  you need to modify your theme, and this does have some risks.  And it does use the <hr /> tag which some people (CSS purists) suggest is not a good idea.

Enhancements to the basic <hr /> command

There are lots of ways you can modify the <hr / > code.   For example

<hr style="text-align: left;" /> -  to left-align it

<hr style="color: red;" /> -  to change the colour
<hr style="width: 50%;" /> -  to make it narrower

See w3c.schools <hr /> tag for more information. 

Add a border to the CSS rule that formats your posts

The cascading-style-sheet rules in your theme control most aspects of how your blog looks.   They can be a very powerful way to control how your blog looks - and give a quick way to add a line between your posts.

What to do

If you have a designer template, then the quick way to make this change is to add a CSS rule to your theme.  The rule code to add is:

.post-body
{
border-bottom:1px dotted #666666;
}

or this one if you want the border at the top of each post:

.post-body
{
border-top:1px dotted #666666;
}

Making more complex changes

The CSS rule that controls how the "body" of your posts look is .post-body.   To make changes to it:

1 Edit your theme in the usual way.

3 Look for .post-body in the rules section . It will look something like this, but  the exact lines and values may be different:

.post-body {
margin-top: 0;
margin-$endSide: 2px;
margin-bottom: 0;
margin-$startSide: 3px;
}

 4  If you can find a .post-body rule, then add this line, just before the } character.

border-bottom:1px dotted #666666;

5    If you cannot find a  .post-body statement in the rules section of your template, then you need to add it.

Put it somewhere:

After    <b:skin><![CDATA[/*

Before  ]]></b:skin>

But not in the middle of any other rules: look at how the rest of that section of your template is laid out for clues.

The statement to add is something like the following, though you may want to try out different values for parts of it.:

.post-body {
border-bottom:1px dotted #666666;
margin-top: 0;
margin-$endSide: 2px;
margin-bottom: 0;
margin-$startSide: 3px;
padding-top:10px;
margin-top:20px;
}

Alternative formats

The #666666 means draw the line in black - you may like to use a different colour, or use the word "solid" instead of "dotted" to make a firmer looking line.

As an alternative, you can say border-top:1px dotted #666666; - this puts a line at the top of the body of each post, just underneath the title.

---

Related Articles

What sort of theme have I got

Disadvantages of editing your blog's theme

Adding a new CSS rules to your theme

Centering the Post-title or Page-title

Putting HTML from elsewhere into your blog.

Read More

Restricting who can read your blog

This article explains some of the issues with restricting readership of your blogspot blog to just people who you choose, and why you can appear to have unexpected readers.

When you first set up a blog in Blogger, anyone in the world can read it (if they can find it - how to get them to there is a different story!).

But some people want to keep their blog private, just for them and their friends (or teachers, students, other parent, classmates, etc).   This is fine, provided they don't mind that only up to 100 people - ever- can be invited to read the blog, and that it doesn't have an RSS feed so cannot offer email subscriptions.

How to stop everyone from reading your blog

In the Settings > Basic:  Permissions tab , there is an area where Blogger lets you restrict the readers of your blog to anyone, selected people, or authors only.

If you click the Edit link in this section, you can choose one of: 

• Private - Only blog authors
• Private - Only these readers

If you choose the first option, then In the first option, only blog authors can read your blog.  Other attempted visitors get a message that this is a private blog, and they will not be able to read any posts.

If you choose the second option, you need to click the + Add readers link and enter the email addresses of the people you want to allow to read the blog.     Each email address that you enter will get a message like this:

"Hello,

The purpose of this message is to inform you that YourName has invited you to join their private blog "yourBlogName". To accept this invitation, click on the button below.

<<Accept invitation button>>

Important: You will need to sign in with a Google Account to accept the invitation to view this blog. If you don’t have a Google Account you can create one here.

Happy blogging,

The Blogger Team

Email address you invited vs the email address that accepted

When someone clicks the button in the invitation email, then are asked to confirm that their currently-logged-in Google account is to be used to sign in to your blog, or given the opportunity to sign-up for a Google account if they don't have one already.

But notice that there is noting that forces the email address associated with that Google account that accepts your invitation to be the same as the one that you sent the invitation to.

Once someone has accepted an invitation, the list of readers just shows you the emails of the readers you have:  it doesn't show you the link between them and the person who you sent the invitation to.

For example, if you emailed an invitation to mary@gmail,com, but the Mary also has a Google account with manager@google.com as it's email, she could choose to reader your blog with the manager account - and you would see manager@google.com in your list of readers.

As well as this, people who you invite can forward the invitation-email to other people, and they too can sign into your blog - thankfully these days, each invitation can be used exactly once.

If this happens, the readers are put into a group, and the Permissions tab shows you the email address that you send the invitation to, and the emails of the people who've accepted the invitation.   And it lets you remove the permssions either from individuals, or from the whole group at once.

Guest sign-on

This feature has not been removed - and this makes your blog-readereship a lot more secure. 

Before it was removed, then the person you invited wanted, they can could to sign in as a guest for up 30 days.  However Google based this sign-in on the IP address they were using at the time, which caused a couple of issues:

• On a shared computer, then anyone else who used that computer could read your blog (if they can find it - for example, by looking in the browser history file).
• If their internet service (ISP) used dynamic IP addresses (ie you get a new one every time you connect) then the person who accepted the invitation was only be able to read the blog during their current internet connection.   And anyone else who gets the same IP address in the next 30 days will be able to read the blog (though it's unlikely that they will be able to find it).

Email isn't secure

Having said all the above - remember that email isn't really secure unless you are certain that it is encrypted at each end.   Security experts usually recommend treating it just like a a post-card:  assume your messages can be read, in plain text, by every postal-worker whose hands they pass through.   Or in computer terms, by every server that that the pass through on the journey between you and the recipient.

So, if someone really, really wants to read you blog, they may figure out how to "sniff" your email.   This isn't easy (and someone who can do it may be able to find easier ways to hack into your blog anyway), but is possible.

If what's in your blog really is super-sensitive, you need to choose whether it's worth taking the risk of using tools like this (and I think it is, in many cases, because the risk is small-ish), or whether you need to look for a set of tools that is more secure.

---

Related Articles

Understanding Google accounts

Transferring your blog to a new owner

Posting by email - knowing who said what

Read More

Comments RSS feed address after turning on HTTPS for a blog with a custom domains

This article documents the change the Comments RSS feed associated with blog, when you switch on the HTTPS option for a blog with a custom domain.

If your blog has a custom domain, you now have an option to switch on HTTPS to make it more secure.

If you do this, then the RSS feed address for your blog's comments changes.

This may be handled graciously by your template.  But if you use a service like Feedburner to display recent comments in an HTML gadget, then the gadget will break unless you update.    Well - mine did anyways.   Maybe your settings are different.

What was your blog's RSS comment feed address

Articles published by various people, including Google, say that your blog has various RSS feeds, including  2 site comments feeds.

Atom:   http://yourCustom.Domain/feeds/comments/default
RSS:     http://yourCustom.Domain/feeds/comments/default?alt=rss

(substituting your actual custom domain   eg myBlog.com   for yourCustom.Domain)

However after switching HTTPS on, I found that these were simply re-directing to the homepage - and this was causing any gadgets which used the comments feed to fail with a message like "the RSS feed is no longer available for display".    (I forgot to take a screenshot before fixing it - and now it's fixed I cannot un-fix it because Feedburner won't let me save an invalid feed address!)

What is your blog's RSS comment feed address

After trying various options, I have found that for my custom-domain blogs with HTTPS enabled, the correct RSS address for comments feeds is

RSS:     https://www.yourCustom.Domain/feeds/comments/default?alt=rss

(Again - substituting your actual custom domain   eg myBlog.com   for yourCustom.Domain)

This one may work also - I haven't had a need to test it properly, so don't want to say for certain:
Atom:   https://www.yourCustom.Domain/feeds/comments/default 

---

Related Articles

Why RSS / Subscribe to Posts is important for your blog

Adding an RSS feed icon to your blog

Finding the RSS feed address for your blog.

The Follow-by-Email gadget:  a very simple way to give your readers access to blog-updates by email

Read More

How to change AddThis Follow button settings for a gadget on blog or website

This article shows how to change the accounts presented in an AddThis Follow gadget which has already been set up on a Wordpress-based website.

(Note:   this is only relevant for Wordpress.org users.   Wordpress.com users do not have the same freedom to add or configure plug-ins.)

The AddThis plug-ins for Wordpress provide several functions.  One is a Follow gadget, which lets you offer links to your account on other platforms (eg on Twitter, Facebook and Instragram), so that people who are interested can subscribe to you there, and get updates from you even if they don't visit your blog or website regularly). 

When you install and activate this plugin, there is a screen where you can choose which other platforms to show, and say what your address on those platforms is.   

After you have set up the plug-in, then you an add the AddThis Follow widget to your site,   This gadget displays an icon for each tool which you selected, and each one link to the account that you provided.    How exactly it looks depends on the options you choose, but one possibility (Horizontal Follow) is like this:

But - how do you change these settings after the gadget has been added? 

For most widgets, to change their settings you just:

• Choose Appearance > Widgets from the left hand menu
• Find the widget in the list of ones that have been installed
• Click the down-arrow beside the name, to reveal the options.

And initially, AddThis-Follow looks much the same.  Rather than giving the detailed options immediately, it says

To edit the options for your AddThis tools, please go to the plugin's settings

Which sounds fair enough - there were a lot of values displayed on the page where you selected which social media platforms to include and how to connected them to your blog.

So you click the link, and get taken to a page - example below- which looks nothing like the one where you chose the services to display in the widget.   Even when you scroll down, nothing looks familiar, or even gives any clues about how to update the linked social networking accounts:

How to change the accounts offered by the AddThis Follow widget after it has been added

Don't start with the Appearance > Widgets  menu item.

Instead:

• Choose with Plugins >  Installed plugins  
• Find   Follow Buttons by AddThis in the list.
• Click Settings
• In the list of gadgets that is displayed, beside the type of Follow button you used (horitzontal or vertical), click the Settings button.    [Yes, that is two Settings clicks in a row.]

This opens up the familiar screen where you can choose social media services by clicking on their icon, and entering your name on that service in the field at the bottom of the page.

Job Done!    

You can now edit the social media accounts linked to your blog  - both correcting errors in the original setup, or adding new accounts which have been added since then.

What this means

Aach AddThis widget (eg AddThis-Follow, AddThis-Inline, etc) has the same settings each time it is used on your site.   So, provided your theme supports having gadgets in multiple places, you can have the Follow-Me gadget several places  (eg in your sidebar and underneath your posts) - always looking the same and linking tothe same social-media accounts.

---

Related Articles:

There are no related articles for this topic.

Read More

Understanding the Follow-by-Email gadget and Feedburner

The Follow-by-email gadget uses Feedburner's email-subscription service.   It's very easy to add to your blog, but there are some things that you need to think about if you are using it to deliver blog-posts to your followers by email.

The Follow-by-Email gadget is a very simple way to give your readers access to blog-updates by email: it delivers a message in their inbox every day that you post.

But to decide if it's a good thing to use, to get good value from it, and to troubleshoot any problems, you need to understand a little more about how it works.

And, since it uses Feedburner, this means understanding how Feedburner works, too.

What is Feedburner

The Follow by Email gadget uses a product called Feedburner to manage the list of people who have followed, ie subscribed to your blog. 

Feedburner was originally a tool to enhance the RSS subscriptions that website-owners delivered - see Why RSS / Subscribe to Posts is important for your blog  for info about RSS.   Very roughly speaking, every time a website publishes a new item, Feedburner adds that item to a "feed" or summary of the site, and tells all the subscribers about it, without the subscribers having to visit the website.

One option that Feedburner added was subscribe-by-email:  website owners who use Feedburner for this have to turn the service on, and then put "something" on their website that offers the service to people who want to get emailed updates.   To start with, Feedburner just kept a list of emails addresses, but now it's more sophisticated:   it checks with addresses that they really do want to be subscribed before adding them to the list, and offers an un-subscribe option with each subscription email.

Adding the follow-by-email option to your blog sets this up for you.   It:

• Sets up a feed, 
• Turns the email service "on", and 
• Puts an email--address request box onto your blog.   

What is set up when you add the follow-by-email gadget

The Follow-by-email gadget can be added to your blog the same way you would add any other gadget.   Doing this this means that, you are logged in to a Google account at the time.

If that Google account already owns an entry (ie a "feed") in Feedburner for the blog you're adding the gadget to, then the gadget just uses this feed.

But if the Google account doesn't currently have an entry from the blog, then a new feed is created, and the email service is turned on for it.:

• The Feed Title is based on the blog's name.  
• The feed address appears to be fairly random (eg I created one for a blog called "Another test blog", and the feed name is    http://feeds.feedburner.com/blogspot/meaUW

Advantages of the Follow-by-email gadget

This gadget makes it a lot easier to offer a follow-by-email option:  you don't have to set up the feed yourself, or use a HTML-gadget to provide a subscribe-by-email form.

And because it uses Feedburner, you have full access to Feedburner's statistics, and a number of other things that are included in Feedburner's features, including:

• Customizing the "click the link to subscribe" message, 
• Getting a list of all your email subscribers (verified and unverified), and 
• Configuring the look-and-feel (including timing and from-address) of the daily email to your follow-by-emailers. 

Disadvantages of the Follow-by-email gadget

There are some disadvantages of both the gadget, and the approach that Blogger has used to implement it:

• Google / Blogger have mixed up the words "subscribers" and "followers".  It used to be that subscribers used RSS gadgets (from Feedburner or other feed-providers), and followers used Blogger's own following-tools.   But this new gadget is called "follow-by-email", and it's possible that mixing up the ideas will make some people very confused.

• Using the gadget, you have very little control over the look and feel of the  follow-by-email option on your blog.  
  
  Compare this to the "Get updates by email" option which is in the top of the sidebar on this blog:  I've put a lot of effort into getting the wording "just right" so potential subscribers know that they will be getting a please-confirm email.   This on-screen wording means that even if they don't act on the email immediately, they get another reminder about if they come back to the blog again in the future.
• You have no control over the message that potential follow-by-emailers are shown to tell them to verify their subscription.  It looks like this
  
  
  
  While this message is fine for the tech-minded people who are likely subscribe to an RSS feed, it will probably bring a glazed look to those of your visitors who need a very simple subscribe-by-email option!  

• People who follow your blog by email will not be included in your Followers gadget or count - though you can use the Feedcount button to show how many subscribers your blog has.  

• People who subscribe to your blog by email don't see any of the widgets on your blog, or any advertisements.   (Unlike regular RSS-feed subscribers for whom you can set up AdSense for feeds).  Despite the options mentioned above, ou have very little control over how they see your messages, especially if they happen to be using email software that shows your messages in plain text.

---

Related Articles

Customizing the "click the link to subscribe" message
 
Getting a list of all your email subscribers

Why RSS / Subscribe to Posts is important for your blog

The Follow-by-Email gadget:  a very simple way to give your readers access to blog-updates by email

Read More

Putting files into Blogger's root directory

This article explains the issues, and options, for putting a file into the "root directory" of your Blogger blog.

If you are using certain non-Google products to enhance your Blog, they will sometimes tell you to put a file into your root-directory.   They may even tell you to use an FTP  tool to do this.

Sometimes this happens when a product also gives you code to install into your blog , This approach is used when the code is written for websites in general rather than specifically to work with Blogger: putting useful files into a place relative to the root directory makes it a lot easier to move a website from a test-address to the live one, so is a common approach outside of Blogger.

Or maybe the other tool has been designed to verify that you do own the website in this way, rather than asking you to change the website code itself.

How to add a file to your blog's root directory

The short answer for Blogger users is "sorry, you cannot do this".

The long answer is still no:  "there is no way to do this, but see the rest of this article for an explanation of why, and some suggested work-arounds."

Why not? Every other website tool lets me do this.

Posts:  Blogger's tool for managing
the content on our blogs

If you're clever, and have lots of time, you can make a website just using a text-editor (eg notpad), a graphics program, and ftp software that lets you put the files into the right places on computer that's connected to the internet.

Tools like Dreamweaver take away a lot of the time-consuming work, and some of the need for cleverness.  But you still need to know a lot about the internet to do things in a way that makes a good website.

Content management systems make this easier still: they let a technically-minded person do the nuts-and-bolts work to make the website, and give authors / artists / editors / content-creators simpler-to-use tools that let them put "stuff" (ie content) into the website, without needing to worry about the details of how it works.

Blogger is a (very simple) website content-management system, it creates our web-pages for us based on data that we put into certain places. Administrators can set up and change the theme, other people, eg authors simply make posts.

When we use Blogger, the main way that we change the data in our web-pages is using the Blogger software. 

Some items inside posts or gadgets can be changed using other software, eg Google Docs, provided they were were set up using that other software in the first place. But - key point - there is nothing in the way that Blogger is put together that means we need to access the base directory. So they don't let us do so.    And I doubt that this this will change anytime soon.

What to do instead

The options for getting around this restriction depend on how the file that you need to put into your root directory is intended to be used.

Installing code

If you have code to install into your blog, and a file to go with it, then you just need to

1. Host the file somewhere else (maybe in your Picasa-web-album for the blog, if it's a picture)
2. Change the code to point to the full path of where you have hosted the file, instead of the relative path used in the code

For example, here is the code for a button linking to my blog, with the picture in the root directory:

<div class="separator" style="clear: both; text-align: center;"> <a href="http://www.Blogger-hints-and-tips.blogspot.com" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img border="0" src="//Logo.png" width="100" /></a></div>

To change this to use a specific location, I just add a file-path and the file-name of the picture wherever it is hosted.

<div class="separator" style="clear: both; text-align: center;"> <a href="http://www.Blogger-hints-and-tips.blogspot.com" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK2Iz6qH50yNh8tL4JKBuUxIyL9zCa5cDnBdMZtZ4KIEEt4avgojeM58_Gwjyj4Oon7bM1n_0PhJx_Etjx2AMwzkOE9lbK2M576zykq0AyTQpFmKzQTJuEpYwnbb3BWvmeSrjoYX7Uyo15/s320/Logo.png" width="100" /></a></div>

TIP: blogger's editor sometimes gets links mixed up, so it's important to start the filepath with "http://"

Verifying ownership

If someone wants to use a file's position to check that you control a website, then they will have code on their own website that looks for the file in your root directory.

You cannot change this code. And you cannot place the fie.

So you need to ask them for an alternative way to verify, that is suitable for people without root directory access.

 If they don't have any alternatives, try lobbying for this on their product support forum:  by not having alterantives, they are ensuring that Blogger users, among others, cannot use their service.

If the official answer is still "no", then you could also ask in other on-line forums if anyone has found any other work-arounds.

An afterthought: what isn't recommended

I've recently seen someone suggest in a help forum that people with custom domains can put files into their blog's root directory by FTP'ing the files into place.

 This may be true, if the service that you are purchasing from your domain registrar includes file-hosting. But file hosting(*)

1. Isn't necessary for a custom domain used in Blogger (since Google hosts our files for us), and
2. Isn't available as part of the services when you buy a custom-domain through Blogger.

So it's not a general solution for most Blogger users, though it may work for some.

Initially I was a little sceptical of the idea: Blogger doesn't expect to see any files in our root directory, so I was concerned that it might do strange things if it found them there. But on reflection, I think there is probably a low risk of this happening, since the file-location is outside Blogger's control.

(*) To avoid any confusion, file hosting and DNS hosting are not the same thing. If you buy a custom domain for your blog from a registrar without going through Google/Blogger, then you do need to pay for DNS hosting, but do not need to buy file-hosting.

---

Related Articles

File hosts - places to store files used in your blog.

Picasa-web-albums: a quick introduction

How Blogger data is organised

Setting up a new administrator for your blog

Options for letting other people write in your blog

Read More

The difference between Themes and Templates in Blogger

This article explains the difference between themes and templates in Blogger, Google's blogging tool.

What is (was) a Blogger template

How a blog that is made with Blogger is shown to a visitor is controlled by four sets of information:

• The posts which the blogger writes (ie the content)
• A user-editable "configuration file" which records the overall formatting options which the file designer and then the blogger have chosen
• Another configuration file, called the post-template, which records choices that the blogger has made under Layout > Blog posts (edit), but cannot be edited elsewhere.   
• Blogger's own software, which puts the other things together with some internal rules to make "web pages".   Bloggers cannot control the rules in this at all.

Originally, the first "configuration file" was called a template.   In fact, officially it was called a design-template, to distinguish it from the post-template.   However because most people aren't aware of the post template, usually just the word "template" is used to mean design-template.

What is a theme

Other blogging tools (eg Wordpress, Tumblr) called their equivalent file a theme.    Most (or even all) of those tools provide less access to change things in the Theme file, for example if you use a Wordpress free-hosted blog, then you cannot change any of the code in your theme, you can only make formatting changes which are allowed for in the Wordpress front-end.

Many of the Wordpress themes have had a lot of  graphic design work done on them - using them gives a blog-site which looks very attractive (or otherwise suited for their purpose) on a wide range of screens.    Many large websites have been made using Wordpress, and so very many professional designers have created Wordpress themes.    Because of this, many people believe that it's easier to get an excellent-looking website from a theme than from a Blogger template.

Blogger templates have now become themes

Recently - I noticed it in March 2017 - Blogger started calling their templates "themes".  

• They've changed the menu option on their dashboard from "Template" to "Theme".
• They've changed the action button names in the template/theme editor to say things like "Save theme".
• They've written various help articles which refer to themes.

What hasn't changed

• We can still edit our templates themes extensively.
• The Blogger tools that make the changes in our themes haven't changed:  All the items under the Themes tab on the dashboard are the same as the ones on the Templates tab.
• The contents of our existing themes are still much the same  (I cannot guarantees they haven't made any changes, but I haven't seen any)
• The themes that we can choose from when making a new blog, or changing the format of an existing one, are the same.
• There are hundreds of help and how-to articles written by blogger-helpers like myself, which all refer to templates.   (I've started changing mine - but it's going to take a while!)

What else is going to change?   

This is the big question:   Is the rename a precursor to some other changes, eg restricting how much control we have over our themes? - or is it just a cosmetic change to make Blogger seem more modern?

Will there be some new themes released - ones that look better across a range of devices, maybe even some that are optimized for mobile instead of desktop use?

Will there be new theme-editing features introduced into Blogger's interface, to let us control things we cannot control now?

Conclusion / TL-DR

Only Google's Blogger product managers know exactly what the future plans for Blogger are - and they're not known for talking about the future direction  until they're just about to introduce new features.   

But until they do, my conclusion is that there is no difference between templates and themes in Blogger.  They are simply two different words for exactly the same thing.

NB:   Blogger product a announcements are usually made in the Blogger Buzz blog - and I see that template were still called templates in their most recent post in November 2016:

---

Related Articles

How to edit your Theme in Blogger

What types of theme / templates does Blogger have

Editing your blog's template:  advantages and disadvantages

How to turn on a mobile theme for your blog

Blogs, Blogger, bloggers, posts pages and screens - understanding Blogger-basics

How to make a real website, using Blogger

Read More

How to edit your Theme in Blogger

This article is about how to edit your theme in Blogger.

It supports many other articles on this site, which suggest specific theme changes needed to solve particular problems.    Note that until early 2017, themes were called templates.   In practise, "edit your template" and "edit your theme" mean the same thing.

In Blogger, a theme is a file which controls how your blog are displayed on the screen when someone reads it using a browser or a mobile device.   Themes used to be called templates, but were renamed "themes" in early 2017.

Previously, I've looked at whether it's a good idea to edit your Blogger theme / template or not.   Because themes are the same thing as templates, the same principles apply to editing your theme.

For many people, editing the theme is simply something which they need to do, because it's the only way to do what they want (remove the attribution, show a gadget on the homeppage only, add a Facebook like button to posts, etc).   And Blogger is often preferred because it allows users to edit aspects of their theme which other blogging tools done allow changes to.

Overview - how to edit your blog-theme

In general, the process to edit your theme is:

• Make a back-up copy of the theme, as it is now
• Open the theme-editor
• Make the change
• Check that it works, and if not, go back to the previous theme.

The following sections have more details about each of these steps.

How to make a backup copy of your current theme

I know:   It's tempting to skip this if you're only making a small change. I even skip it myself sometimes. And it's not needed if this is the first time you've ever customised your theme - because you can recover from problems by just reinstalling the standard theme.

But if you would be upset to lose any theme changes you made earlier, or if the change you are making now is not minor, then I strongly recommend making a copy before you start, just in case.  To do this

• From the Blogger dashboard, go to the Themes tab
• Click the Backup / Restore button near the top right of the dashboard
• Click the Download Theme button, and then wait while the file downloads.
• After the download has finished, find the place where your computer puts downloaded files.
• Find the file that was just created,
• Rename it to something sensible
   (eg MyBlog theme backup before change 31 Jan 2012.xml)
• Move the file to somewhere safe: usually somewhere on your computer is fine - or you make like to upload it to somewhere like Google Docs, to be absolutely certain that it won't get lost.

How to open Blogger's theme editor

• From the Blogger Dashboard, to to the Themes tab
• Click Edit HTML

Now you have your theme open in the theme editor, the next challenge is making changes successfully - or backing them out if your changes were not successful.

How to make the change to your theme

• Find the code you need to change:
  See Searching for text in Blogger's theme editor if you need help with this.
  
  Note:   some of the older "how to" articles say to make sure that the Expand Widgets checkbox off or on.   This checkbox has now been removed from Blogger's theme editor.    If the instructions you are following says to leave it "off", then you should just be able to follow them as is.    However if you are told to turn Expand Widgets off,  then you need to find the correct part of the code by searching for the widget-id or section name, and then "unfold" that to see the complete code.   

• Make the change (This article doesn't go into the principles of theme design, there are plenty of other articles and websites about that: I'm assuming that you know what you need to do).

• Click the Preview theme button
  If Blogger can make sense of the change you made, then view of your blog is shown in the theme-editing area, with what looks like your blog's homepage. It's not a real copy of your blog (the links won't work, the spacing might not be quite the same), but it shows you how the home-page will look with your theme edits.
  
• Do a quick check that the screen looks right - for some changes you even be able to tell if the change has been successful just from this preview screen.
  
  However:  If the new window/tab shows an error message like

Your theme could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly. <br/> XML error message: The element type "div" must be terminated by the matching end-tag "</div>".Error 500 

or

Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly. <br/> XML error message: Element type "b:widget" must be followed by either attribute specifications, ">" or "/>".

 then Blogger has not been able to understand the change you made. Sometimes the error message gives a clue about what's wrong, although it can be misleading.   Check that you made the change correctly - fix any errors and click Preview again.  If it still doesn't work, ask for help from the place that suggested the change you are making 

.

•  Once you are happy that the preview screen looks OK, click the Save theme button.

How to test your theme change

Some changes can be checked very easily, sometimes from the preview screen.

But if your change isn't visible on the front screen, you must check it after you have applied it. What to verify depends on your them type, what the change was, and what other features (eg the page-gadget as a menu, the archive widget, ) your blog uses. You need to decide what to test, based on all of these.

At least, I always click on and check on these things when I've made a major theme change:

1. the home page
2. the items in the menu bar
3. a label value
4. an archive widget entry
5. custom-search-engine results
6. comments

And if I'm being particularly reader-focussed, I'll also check these things in more than one browser:   usually in the current version of Internet Explorer, Firefox and Chrome.

What to do if your theme change wasn't successful

If you find that the theme change has caused problems, then ou have have a choice to make:

Can you and your readers live with the problems on your blog for "a while", while you look for other solutions? 

Or 

Do you need to remove the change right now, so visitors can use your blog as it was while you solve the issues.

There is no right answer to this question:   It's a personal decision, based on the blog, and your readers.   But if you do need to remove the theme change, here's how to do it:

• Open the Themes tab
• Click the Backup / Restore button near the top right of the dashboard
• Click Choose File and find the file that you downloaded earlier
• Click Upload.

It is best to restore your theme before you have changed any gadgets.  If you get a message about widgets being missing, then it means that the gadgets associated with your blog are not the ones referred to in the theme.   If this happens, you need to decide whether to deep or delete any "orphaned" ones, and may need to check their settings again.

Making complicated changes

If your theme may need a lot of "surgery" while you figure out how to make a change, then it may be a good idea to build a private test-blog to do the work in, and only copy the contents into your "real" blog theme when you are certain that you've got it correct (or correct-enough).

---

Related Articles

Advantages and disadvantes of editing your Blogger theme

Finding things while editing in your blogger theme

Adding CSS formatting rules to your blog, without editng the theme

How to remove the "powered by Blogger" attribution from designer-theme blogs

Putting a gadget on the homeppage only

Planning changes to your blog - without readers seeing what you are doing

Read More

How to find things in Blogger's Theme editor

This article explains how to find things (gadgets or text) in the Theme editor in Blogger.

Very often when you are editing your Theme in Blogger, you need to find particular text.

For example, you might need to find all places where  "</head" appears, so you can add something to the very next line.   Or you might want to find the code for a particular gadget (aka widget), so that you can put a conditional-formatting statement around it.

There are now two tools you can use to find items in the Theme editor:

• The Jump to Widget tool if you are looking for a Widget
• The Find bar if you are looking for a text string.

More information about using each of these is given below.

How to use the Jump to Widget tool

First, you need to find out the exact name for the widget / gadget that you need to find the code for.    (See Finding a gadget's name for a tip on how to do this).

Then, inside the Theme editor (see Editing your Blogger Theme for how to get there), just choose the name you are looking for from the drop down list .   (Click the arrow beside Jump to Widget to see the items in the list):

Once you have chosen an item from the list, the template editing window moves to the place where this gadget is listed in the theme code.   It usually places it in the 2nd line of the editing window.  For example, in the picture below, I chose to jump to the Followers1 gadget.

How to find any text in the Theme editor

Click anywhere inside the Theme-editor window:   this is the rectangle which shows the code in your Theme.    (It's important to click inside here first, or the next command will work differently)

On your keyboard, press Ctrl/f:   to do this, hold down the control (ctrl) key, and press the  f    key.

A search bar will now show in the top right corner of the theme editing window - like this:

Type the text you want to find into the Search bar and press Enter.   

The cursor will move to the first time that the text appears.   

To find the next place where the text appears, click into the Search-bar and press Enter again 

Repeat as often as you need to find the correct place.  

When you are finished with searching, click the X button at the right hand side of the Search-bar to close it.

How to see the details inside a gadget or other piece of code

You can now find any text that you need to find in Blogger's theme editor (previously called the Template editor).   

But if you look carefully at the Theme-editing window you will see that there is sometimes a horizontal arrow in the left-hand side of the code, and that the line numbers jump - like this:

This happens because some of the detail is hidden, to make the theme-code easier to work with.

But you can use the arrow (called an expand-arrow) to see it all:  Click on it and you will see that it changed to a down arrow, and that the code window now shows some extra lines which were previously hidden.

You won't always need to do this:   some template edits just say to find the code for a gadget and to put extra instructions before and after it.   But others need you to open up the gadget code and make changes inside.

Job done!  You can now find gadget and text items inside your Blogger Theme - so you can continue editing it.

---

Related Articles

How to edit your Theme in Blogger

Applying conditional formatting to widgets

Finding the widget-id for a gadget in Blogger

Read More

Showing a PowerPoint file in your blog

This article is about options for showing the contents of a PowerPoint file inside your blog.

Previously I've described how to load content from MS Word to your blog.

But some people have material in PowerPoint (or other presentation software) files, that they want to show in their blog.   So far, I've identified three options for doing this.

These approaches should work on any PowerPoint formatted presentation, no matter what tool it was prepared with - except of course if it was Google Docs in which case you go straight to option 2.

Option 1: Each slide as an image

Follow these steps:

• In PowerPoint, choose Save-as, and choose an image format (eg .png).   
• When the system asks if you want all slides or just the current one, choose All.
• Upload all the image files that were created to your blog - it's your choice whether you put them all in the same post, or one-per-post.
  I usually upload them firstly to Picasa web albums or another picture-hosting service, and then just link from my blog to there)

At first, I thought that this was a backward approach.  But recently I wrote an article based on a presentation that I gave several years ago.   After trying various ways of displaying the presentation and  the article, I realised that I was trying to find a way to include all the comments that I made when I used the presentation face-to-face.  To do this, I needed to show each slide individually, so I used this option because it gives full control over what commentary goes with each picture.

Option 2: Convert to a Google Docs Presentation

This is described in detail in  Using Google Docs's publish-and-embed option - I believe it's better than trying to use Google Web-elements, because it achieves much the same thing, and takes one piece (web-elements) out of the equation.

Option 3 Copy and Paste

As with MS Word, copy-and-paste from PowerPoint to Blogger is NOT recommended, because the PowerPoint content can have all sorts of extra HTML codes attached to it, and these can cause negative effects in your blog.

But you may want to copy-and-paste, either because you don't want the content as images, or because you want other things like presenter notes etc that are not stored in the presentation slides.

To do this, you need to:

• Copy from PowerPoint, 
• Paste into a text-editor (eg Notepad in Microsoft Windows)
• Copy again from the text-editor
• Paste into your blog.

An alternative may be to export the presentation as an outline (ie rich-text or RTF format), and then convert it via Google Docs in the same way that you would for a Word document.   You would need to test this to check if it brings in the items that are stored outside of the slides.

Option 4   Use a slideshow host

Another approach would be to set up on account on SlideShare or a similar service that allows you to upload slideshows and gives you code that you can add to your blog in the usual way, which embeds the slideshow in your blog.  

I haven't tried this one out myself, but in theory at least it should work.

---

Related Articles

Showing a PowerPoint presentation as a slideshow in your blog

Converting from MS Word to Blogger, via Google Docs

File hosting options - places to keep your files on-line

Tools for applying copyright protection to your blog

Putting embed code from an outside service into your blog
.

Read More

How to not show any posts on your blog's home page, using Blogger

You can set your blog up so that no posts are shown on the main screen - provided you have used some of the other "home page" approaches to give readers other ways of getting to your content.

Previously I've explained how to only show one post on the main page of your blog.

But some people who want to give their blog a home page go further than that, and don't show any posts on the main screen at all.   (Remember, the main screen is where people who navigate to your blog, rather than to posts within it, go.)

This sounds like a strange thing to do - after all, blogs are about posts.

But actually it's fine, provided you use some other tools to let readers move around the blog.  I've made a 150+ page blog this way, and it works very nicely because I have organised the information and used some index-pages (containing lists of bus-routes, suburbs, maps etc) with tables that link to many other posts.

How to show no (ie zero, 0) posts on the main screen

Some people want to do this, as part of the process of giving their blog a home page.  It's not possible if your blog has a Dynamic thene, but can be done for blogs with Layout themes.

There are at least two ways of doing it.

Option 1 - use a custom re-direct for your home-page

Make a new Page (Pages > New Page) and add the material which you want to show on your main screen.    Publish this page.

Take a note of the URL of the Page that you use created.

Go to Settings > Search preferences > Errors and re-directions > Custom re-directs

Click Edit then New re-direct

In the dialog box which opens:

• Enter a back-slash (ie   /  )into the first (From) box.

• Enter the URL of the page that you noted earlier into the second (To) box
• In the To box, remove the blog-address, because Blogger already adds that for you.
  Eg if your URL is     http:/www.myBlog.com/p/home.html
  then just enter           /p/home.html
  
  (note that you keep the backslash (/) just before the P.

Click the Permanent checkbox.

Click Save just under the entry you just made - it now looks like this:

Click Save changes.

Job Done!   Anyone who goes to your blog's home page will now go automatically to the alternative page you made - and the effect is that no posts are shown on the home page.

Option 2 - use the Posts and Comments setting

Choose the Settings > Posts and Comments panel from the left sidebar.

Enter zero (0) into the Show at most field

Click Save Settings in the top right hand corner of the screen.

About this method

The method in Option 2 works:   no posts are shown on your home page.

But by default, nothting else is shown, either.    Unless you take steps to avoid it, your readers will see a grey box saying "0 Posts" when they look at your blog's main URL.   

Some of the things you can do to avoid this include hiding the "showing posts with label XXX" message, and creating a gadget that only shows on the "home" page.

Recommended option

The custom re-direct option is probably the best approach - and is certainly what I've used for my blogs recently:   it's clean, and doesn't need any special messing around with gadgets etc to put content onto the "home" page.

But there may be cases where the second option is better - and I have recently confirmed that it still works.

Whichever option you choose

Remember that you need to set up some other way to let readers move from your home-page to see your other posts - some of the ways to do this are discussed here.

---

Related Articles

Limiting your blog to only have one post on the main page

Giving your blog a home page

Giving readers alternative ways to see the posts in your blog

What are dynamic view themes?

Blogger theme types
.
Using tables in your blog

Displaying a gadget only on the home page

Read More