Adding an RSS feed icon to your blog, using Feedburner

Feedburner's chicklets are used to add the standard "orange radar" button to your blog.  This lets readers to subscribe the RSS feed of your choice.   The information is targeted to Blogger users, but most of it applies to anyone who uses Feedburner. 

What is a Chicklet, and why you need one:

Previously I've explained how to remove the (ugly and confusing) "Subscribe to Posts (atom)" link from your blog, and why RSS / Subscribe to Posts is important to your blog and how to create a Feedburner feed for it.

But an RSS feed is useless unless people subscribe to it.  So as well as making the feed, you also need to put something in your blog that lets your readers sign up for it.

A standard option for this is the orange square with "radar" markings on it, which many people call a "chicklet" (since it lets your viewer - the chicken? - have access to the feed you are providing).

Feedburner also has options for:

• Using a custom icon from popular web aggregators
  I'm not sure that this is a great idea, because you don't know what feed-reader software your readers actually use, and the whole point of a feed is that you don't dictate how people see your blog.

• Using an icon that promotes Feedburner.  This cute, but I've never seen anyone use it.

How to add a chicklet to you blog:

Log in to Feedburner, using the Google account that owns the feed.

Click on the name of the feed you want to provide a subscription tool for.

Choose the Publicize tab.

Choose the Chicklet Chooser option, from the left navigation bar.

Choose one of the options shown:  the default one is the standard-size RSS-radar-button.

Scroll to the bottom of the screen and either

• Copy the HTML that is shown, and add it to your blog in the same way that you would add any other 3rd party HTML,
  
  OR

• Choose Blogger from the drop down list beside "use as a widget in", and clickGo. 
  
  This takes you to a Blogger screen where you can choose which blog you want to add the gadget to (if your current login has more than one), and what title to use for it. 
  
  When this is done, click Add Widget. 
  
  This takes you to the Design > Page Elements tab, where you can drag-and-drop the widget to wherever you want it.  
  (When I tried it just now, instead of the layout screen I got a "bad request" message.  However pressing Save and then View Blog brought up the blog with the gadget showing, and I was able to go back and edit the layout later on).

What your readers see:

Your readers will see an item, wherever you put it, that looks like this:

Subscribe in a reader

or this: 

or

or something similar, depending on what option you chose from the Chicklet Chooser screen.

When someone clicks on one of these items, they are taken to either a screen where they choose which feed-reader software to add your site to (if you've used the first option), or to the specific feed-reader software.

Customising the widget code:

If you use the generic RSS button, then you may want to customise the widget code slightly:  It looks ugly not to have a space between the picture and the word "Subscribe" - and it's good to have the phrase "RSS" on the screen because that is what feed-reader-savvy people generally search for when they're looking at a site and want to find the subscribe option.  I also prefer if the subscribe action opens in a new tab/window, rather than taking the reader away from my blog.

This is quite easy to do, if you put a few line breaks in so you can see that

• the code is actually two separate link statements
• the first one has an image (the orange "radar bars" that it takes from Feedburner)
• the second is a text link
• both of them link to the RSS feed address

So it's quite easy to add a couple of extra spaces (shown as   ), change the text as I've done below, and add   target="_blank"   to both of the links

<a href="http://feeds.feedburner.com/Blogger-hints-and-tips" rel="alternate" type="application/rss+xml" target="_blank">
<img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="vertical-align:middle;border:0"/>
</a>

&nbsp; &nbsp; &nbsp;

<a href="http://feeds.feedburner.com/Blogger-hints-and-tips" rel="alternate" type="application/rss+xml" target="_blank">

Subscribe via RSS

</a>

I generally also put the option to subscribe to my blog by email and the Feedburner FeedCount item (which shows the number of subscribers) in the same area, to give people options, and to encourage them to subscribe.

How to re-direct an old custom domain - and all its posts - to a new one

This article describes options for making link to a blog's old URL automatically point to the blog's new URL after a custom domain change.

If you have a blog made with Blogger which has a custom domain, then it's easy enough to switch this blog to use a different domain. Doing this moves both the content (posts and pages) and template (layout, structure, colour-scheme).

Often when people make this type of change, they want to set up re-directs so that if anyone clicks an external link to the old custom domain, they are re-directed to the same content on the new domain.
For example, www.old-domain.com/current-Page.html should redirect to www.new-domain.com/current-page.html.)

With many other website building tools, the .htaccess file for the site lets you set up re-directs like this. But things are little different when you use Blogger.

Your Blogspot address VS your custom domain

Your blog always has a blogspot addresss - let's call it: www.yourBlog.blogspot.com

When you publish to a custom domain, Blogger automatically handles the re-direction from www.yourBlog.blogspot.com to www.yourCustomdomain.com for you. This works at all levels, so the home page and every individual post/page are all redirected correctly.

To move your blog from from www.yourCustomDomain.com to www.newCustomDomain.com, you simply tell Blogger to

1. Stop publishing your blog to www.oldCustomDomain.com and then to
2. Start publishing it to www.newCustomDomain.com

(See Switching your blog to a different custom domain for more information about this.)

Once you have done this (and afer a little bit of transition time), Blogger handles the re-direction from www.yourBlog.blogspot.com to www.newCustomdomain.com for you - as before, this works at all levels, so the home page and every individual post/page are redirected correctly.

One point that many people mis-understand, is that after you have done this, there is no connection between Blogger and your old custom domain. You have various options (listed below) for what to do with www.oldCustomDomain.com - and you aren't limited to the features that Blogger offers. The only limits are based on what your domain registrar allows, and what tools you can (learn to) use.

Options for re-directing your old custom domain

Option 1: Registrar re-direction

Once you have stopped publishing your blog to www.yourCustomDomain.com, Blogger has no connection with it at all.

How you manage re-directions from it is totally up to the tools provided by the domain registrar. The simplest approach is to set up a "301 redirect" on the domain, which simply sends all traffic to it to another domain of your choice.

The method for setting this up depends on the tools used by your domain registrar - search their help files for terms like "301 redirect" to find out what is possible with tools.

See Using a custom domain for something other than your blog for advice about accessing your domain registrar account for the domain.

Advantages

• This is the easiest approach, and doesn't require you to make a website of any type.
• Visitors are automatically re-directed.

Disadvantages

• Depending on how the registrar's tools work, visitors may be automatically redirected to your new home page, not the the post that they specifically followed a link to.

Option 2: Another website tool

If you know how to use another website development tool that does provide access to the .htaccess file for the site, then you could make a "site" that just contains page-and-post level redirections for all your existing posts and pages.

Advantages

• This approach sends people to the exact content that they followed a link to.

Disadvantages

• It could be tedious setting this up for every post and page, if you have a lot of them at the time when you change domains.
• You need to choose and learn a very different type of website building tool to do this.

Option 3: use Blogger to make a site-level re-direction message

Make a totally new blog (eg    www.myBlogHasMoved.blogspot.com),

Publish it to your old custom domain

Give it one post that says

"www.oldCustomDomain.com has moved to www.newCustomDomain.com please update your links"

Use the Settings > Search preferences > Errors and redirections > Custom Redirect Custom Page Not Found  option to explain that your blog has moved, and send any traffic to that one post.

Advantages

• This is a simple approach, using tools that you already know.
• It will work forever (because blogspot domains don't expire).

Disadvantages

• Visitors will not be automatically redirected: the best you can do is show a link which goes to a selected post or page in your blog, which the visitor needs to click to go to the blog.
• The re-direction link is only to one specific page, not to the exact content that was linked to iniitially.  This is quite different from what many people want to achieve - blogger simply does not have that functionality.

A non-option: Blogger's custom redirect tool

Blogger has a function under Settings > Search preferences > Errors and redirections > Custom Redirects  that lets you set up custom redirects for individual pages.

However this isn't suitable when you change your custom-domain totally, because it only supports re-direction within the same blog, not to an external URL.

(And anyway, if you have a significant number of posts, it would not be practical.)

Other options?

Have you found any other ways around this? Or any good tool for setting up .htaccess redirects on a domain that you used to use for a blog?  Share your experience in the comments area below.

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.

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

---

If your Compose Settings (under Post Options) is set to  Show HTML literally, then you need to switch to the Edit 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 Template - post footer colour

If your blog has a designer template (ref, What sort of template have I got), then theTemplate Designer > Advanced tab may have an option for setting the background colour of the post-footer (depending on which template 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 template

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

1  Edit your template:

In Sept-2011-Blogger (ie the new interface) go to Template > Edit HTML > Proceed
In pre-Sept-2011-Blogger (ie the old interface) go to Design > Edit HTML.

2  Download a full copy of your template, and put it somewhere safe (in case things go wrong, and you need to go back to where you were).

3  Click on Expand Widget Templates.

4  Most templates have three footer lines:  what is in each one depends on the template, and how you have arranged the items in the Layout > Blog Posts editor.

Look at the template for code like the following,

       <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>

and add the <hr /> command to which ever one you want, 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 template, 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 template control most aspects of how your blog looks.   They can be a very powerful way to control how your blog looks.

Quick option:

If you have a designer template, then the quick way to make this change is to add a CSS rule to your template.  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;
}

In-depth:

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

1 Go to Design > Edit HTML

2 Download a full copy of your template, and put it somewhere safe (in case things go wrong, and you need to go back to where you were).

3 Look for .post-body in the rules section of your template. 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.

How to make a blog into a real website

This article explains how you can use Blogger to make a site that looks just like any other website and why you might, sometimes, want to do this. 

Blogs vs Websites

Some people are very happy to use Blogger to make a blog, that is, website that looks like a diary or journal that they write in regularly.

But a common question is "how to I make my blog into a real website, just like "someone" has done over at "this website"?

This isn't easy to answer:  Not everyone means the same thing when they say "real website".  "Someone" might have just changed the background image, installed a third-party template, changed a few settings - or re-written the entire Blogger template!  They may have just made the blog look more professional than the basic templates do - or maybe they've removing all "blog" features so that the site is like a regular brochure website.

The bottom-line is that, even with no changes a blog is a "real website", because it's got:

• An url (www.your-blog-name.blogspot.com)
• A space on the internet that's dedicated just to it. (For Blogger users, that space is inside Google's servers - we don't have to pay for our own hosting).
• Web-pages, made in HTML, which visitors can look at using a web-browser (eg Internet Explorer, Firefox, Chrome, Safari, etc)

And there are some sites which are large, very popular and not at all ashamed to look like blogs, for example:

• www.IkeaHackers.net/ - a site for sharing clever ways of repurposing kitset furniture
• www.DarkRoastedBlend.com - a site about coffee - notice their About page is really just a post from 2005!
• www.HowAboutOrange.blogspot.com - a very stylish crafts website
• www.RUStling.org - a site listing all the songs in a large folk-song book

This article from Blogger Buster lists a 100 others - and I'm sure that there are plenty of popular non-English language sites that look like blogs, too.


But there are many other sites that have had some or all of their Blogger features hidden, for example

• www.GalwayTransport.info - a local public transport information site
• www.ConcentricsRestaurants.com/ - a promotional site for a company that builds restaurants
• www.RenewPilates.com - the site for a Pilates studio

You need to do more work to make the second type of site - and even then, if a knowledgeable visitor looks at the source-code for a page, they can still tell that you're using Blogger.   So, usually, I'd recommend that you focus on what you want to achieve with the site, rather than "getting rid of blogger".

That said, here is a lit of things that you may want to to do to "turn your blog into a website".   They are in, roughly, the order that I recommend doing them to have the maximum effect.

Initial steps to reduce the "bloggy" feeling

1)   Get a custom domain

This is a website address like  www.mySite.com  or  www.yourBlog.org - or whatever available name that you choose. 

Using a custom domain means that your address will not have "blogspot.com" in it.

You can do this either:

• Using Blogger's  Settings > Basic > Blog Address > Add a Custom Domainfunction, or 
• By using an URL that you buy directly from a domain registrar - you might need to do this if the address you want isn't available through the Blogger function (egI recently needed a co.nz address for a site) or if you do not have a credit card.

This step is essential if you don't want the site to be perceived as blog, because the address is what people see when they first find the site in search-engine results.

If you are going to get a custom-domain, then I strongly recommend doing it at the very beginning of setting up your blog, so all the later steps are based on the custom-domain name rather than re-directions.  This is is A Good Thing for SEO - and even if SEO doesn't matter for your blog initially it may become important later on.


2)    Turn off the navBar, and remove the space where it used to be


3)   Show only 1 post on the main page. 


4)   Hide the "blog-specific" values from posts, on the Layout > Blog post (edit) tab.  

At a minimum the things to turn off are:

• Post-date
• Posted-by
• Post-time
• Comments
• Links to this post
• Labels
• Reactions
• Email post links
• Post sharing

5)    Make a home page - ideally using the custom-redirect option


6)    Remove the attribution gadget (the bit where it says "Powered by Blogger")


7)    Remove the "subscribe to posts (atom)" link


8)    Add an RSS-subscription gadget using Feedburner.
Some people say this is optional - but I believe that all "proper" websites offer an RSS feed and show that they do so by using a feedburner-style RSS chiclet.   If you just add Blogger's Subscribe gadget instead, it gives the Atom - ie blog-style feed.

Banishing the Blogger look for good

These next steps really go together: if you do one, you need to do the others too. They are needed if you totally want to remove the blog-ish-ness:

9)     Remove all gadgets that show a list of posts. These include the Archive, Labels.  This is simply the reverse of the add-a-gadget procedure - edit the existing gadget, and click Remove.


10)   Remove the "older posts / home / newer posts" links.

11)   Set up your own navigation system: every post or page needs to be able to be accessed from either a button or a link that is in either a gadget or another post/page.

It's temping to think about navigation from the home page. But first-time visitors who come to your site from search-results will not arrive at the home page. They might not even think to look at the home page. Ideally your navigation system should offer several routes to get to every piece of information, and should include both logical links between posts and a search-based option.


Tools that you might use to help with this:

• Summary posts, with links to detail pages about the topic. (Eg my public-transport site has a "city buses details" page, which links to individual route maps)
• A menu bar with links to the most-important summary posts.
  NB  If you use the Pages gadget for this, it is automatically included if you give the site a mobile template which is an important step if you want the site to beresponsive.
• Linked-List gadgets to show summary posts, or lists of related detail posts, in the sidebar or footer.

An alternative to your own navigation system is to use categories to put your posts into pages. This doesn't fully reduce the bloggy feeling, since someone who looks at a page sees a list of posts (with just post-summaries if you've used jump-links).   However changing the the status message (the grey box that says "showing all posts with labelwhatever") can make this acceptable in some sites (ie ones where the line between blog and website is blurred).

What you (currently) cannot do

You cannot remove the post-date values from the URL of blog posts.
If your entire site could be done with 20 or fewer screens, you could use Pages for everything - but IMHO this isn't necessary, visitors don't seem to be overly spooked by URLs with numbers in them.

You cannot use a dynamic template 
If you want your site to look like a website, not a blog: you need to use a Designer, or possibly a Layout, template.

Other things that you might do

You might want your blog tostand out in the seach results in order to get more visitors - seeGetting Started with SEO.

You might want to link it to the social networks - remember that there are wide range of possible links, and you need a strategy about how the site relates to each social medium that you use.

Have I missed anything?

I wrote this article  while I was setting up a site on which I want to minimise the "blog" look-and-feel, and I've tried to capture all the steps that I did.   

But maybe I've missed some things?   Maybe there are features that work differently on other templates.

What else would you do?