Domain Hosting Sale

Monday, 22 August 2011

Lining up the first post and the sidebar

In some Blogger templates, there is a big gap between the bottom of the header and the start of the first post, and this means that the posts and the sidebar are not aligned. This article explains how to adjust the gap, and so remove that problem.

Blogger template layouts

In the templates that Blogger provides, as well as all third-party templates, the amount of space between elements on the screen is not accidental: designers put a lot of effort into working out what spacing will look good, and then finding ways to put CSS code into the template so that the spacing they want is shown in any browser software that Blogger supports.

But there are times when you may want to change this spacing, and this is easy to do, provided you are willing to accept the disadvantages of editing your template, and if you can work out exactly which part of the template code to change.

The pre-Header gap

A pet-hate of mine is the blank space above the first post, which looks strange unless you put something else in to the space. In this example, I've got an AdSense link-unit in the area highlighted in red, just to fill in the empty area:

How to change this

1 Edit your template - don't forget to take a backup.

2 Find this code (use the text-find feature in your browser, eg ctrl/f in Chrome to make finding it easier)

h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}

The exact numbers used in your template may be different: the key thing is to find the CSS command that is putting a margin above the post header. In the template that I took this example from (Simple), it's the "0.75em" - which puts 75% of the space of a the post-header characters as a blank space above the header.

3 Change the first margin value: how much to change it by depends on your template, but in some cases I've used 0 successfully.

In CSS, when a margin statement has three numbers beside it, they refer to the

top,
left-and-right,
bottom

margins respectively. So if you want to do something else to the post-header, eg indent it, this is the place to make changes

4 Click Preview to see what the blog will look like - keep doing this until you get the right setting.

5 When you are happy with the spacing, click Save Template to apply the changes to your blog. (Or Clear Edits if you cannot get it right and need to stop trying).

Note: If you make a big change to your template like this, it would be a good idea to check out out in at least one version of the other browsers that your readers use - at the moment, this usually means Internet Explorer 8, Firefox and Chrome. But it may depend on your niche - a tool like Google Analytics will give you some statistics about what browsers, and screen sizes, your visitors have.

Also, it is possible to make this change by just installing a new CSS rule for h3.post-title into your blog - because the latest one found is always the one used, and because the template designer's Add CSS function puts the rules you add after the othr rules. I don't recommend it here, though, because working with the original rule makes it easier to see the effect of making changes to any of the values in the area.

Other affected spacing

If you have more than one post per page, then this change will also reduce the amount of space between the bottom of one post and the header of the next one. Depending on your template, you want want to add a little more space into the margin statement in the bottom of the post-footer, eg

.post-footer {
margin: 20px -2px 20;
padding: 5px 10px;
}

If you display comments in your blog, you also need to check the impact on comments, because the original command applied to h4 items in comments as well.

If you are making a lot of changes, you may want to make a test blog, and plan your changes in private before applying them to your main blog.

Saturday, 20 August 2011

Chitika overview

This article is an introduction to the Chitika advertising programme, which is one of the alternatives considered by bloggers whose sites are not eligible to use Google AdSense.

Chitika is another advertising programme - similar to Google AdSense, but run by a different company with slightly different rules and ways of publishing advertisements.

Ads shown by Chitika are not context-sensitive. Instead, they are selected for your site using the search-terms a user entered to find the site.

Because they're not context-sensitive, you can display them on the same pages as AdSense ad-units. At least the reason Chitika give - personally I've never been able to to find the AdSense condition that says "we must be the only context sensitive ads on a page", just one that says "no ads that look like ours".

Who sees Chitika ads:

Origianlly, Chitika ads weren't worldwide: they were only displayed to readers from Canada and the US who got to your site by searching. However this has been changed: now they have two products:

Premium, shows ads related to the search query used by people who visit your site and come from one of Chitika's "accepted countries". Currently (Aug 2011) there are 12 of them, including the USA, Canada, United Kingdom, Germany, Italy, Spain, the Netherlands, Denmark, Norway, Sweden and India.

Select, shows less-well-targetted ads to visitors from other countries, or who did not get to your site by searching for something.

If you want, you can opt-out of showing Select ads, so that visitors who don't get Premium ads don't actually see an ad at all.

You can see an example of Chitkia ads here: this opens a new window showing you this page (the one you're reading now) as it would look to someone who arrives at the site by searching for "Blogger Hints".

How to sign up for Chitika:

You sign up for Chitika in the usual way - they ask for a range of information about you and your website. They do personally check each site, so it may take a few days or even weeks for account approval to come through .

It's a bit more "tecchie" to set up than AdSense - mainly because you need to install code from Chitika into your blog, instead of being able to just add a gadget in Blogger. But (in 2010), I was able to log in for the first time, read the terms and conditions, mess around with some ad-formats, and place ads on my site in less than 2 hours this evening, with no glitches along the way.

Terms and Conditions:

This article is based on my understanding of the terms and conditions of Blogger, AdSense, and Chitika - as at today. These companies may change their policies at any time, so before you implement anything, it is essential that you read the currrent T&C documents yourself, to sure that your site will comply.

Chitika has some quite stringent conditions. For example, you can't use it on site promoting sale of alcohol, tobacco, haz-chem, weapons, and some other things. This bit is quite near the end of their terms-and-conditions document - yet another reason to double-check before you start showing Chitika ads.

Saturday, 13 August 2011

Showing data in your blog

This article is about how tables can be used to display data in Blogger, why you sometimes should use them, and how to make them.

Showing structured information in your blog

There are lots ways to make your blog reader-friendly: bullet-pointed lists, pictures, grouping information into sections, headings, etc

Bullet pointed lists are great if you only want to show one piece of data for each point.

But if you want to show more data for each item, they're not so helpful.

Consider this example:

Monday: start time 5pm, Shona
Tuesday: 6pm, Jason
Wednesday: rest day
Thursday: 5pm, Jason
Saturday & Sunday 3pm, Shona

Similar information isn't aligned - and if you want to tell readers that the time shown is the start time and the name is the leader that day, you have to either put it in the text (which some readers will skim over and miss), or repeat it on every line.

To display data like this, a table is a far better option.

So why do some people not recommend tables? In the early days of web-browsers and HTML, tables were often used to control the layout of pages, and this lead to various problems. This is why you'll find people preaching vigorously against using tables, eg Sitepoint have an entire book (The Principles of Beautiful Web Design) on the topic.

Nonetheless, tables do have a place - they are the best way to display truly tabular data.

Using Tables in Blogger

When I started using Blogger in 2009, there were issues with how the post-editor displayed tables - and people wrote articles like this about how to manipulate the HTML code so the tables displayed properly, without any extra line-break. Thankfully, those problems have been fixed, and as far as I know Blogger's post-editor copes with HTML for tables.

However it doesn't have tools for creating tables in Compose mode, so you need an alternative tool to make them. Some options include:

1 Show the table as a picture:

Make the table in a tool (eg Word, Excel) that does support table. Turn this into an image file, eg by taking a screen shot, and show this picture in your blog.

This gives you a lot of control over how the table looks - but the contents in your table cannot be indexed by Google, so the won't show up in search-results. It also won't work so well for longer tables.

2 Make the table in another tool and display the output

If you make a table in Word, then you may be able to display it in a blog-post by converting it via Google Docs. (I know that this method works in general, but I haven't tested whether converted tables keep their formatting or not, so cannot confirm if it works).

Similarly, you could make it in a spreadsheet file (eg Excel), upload it to Google Docs, and then use a web-element to display it in your blog. (I didn't much like these the last time I looked, because they put some "extra stuff" around the edge - not sure if they're still doing that or not.)

3 Edit the HTML-code behind your post

If you put the HTML code for a table into the post-editor's Edit HTML view, then blogger will draw the table correctly, even though the WYSIWYG Compose mode doesn't have functions to let you draw tables, or add/delete rows and columns.

This method is more challenging than the others - but it gives you the most control over how the table looks. .

To do it, you need to:

Go into Edit HTML mode,
Find the place where you want the table to go
Enter the code.

Finding the place that you need t put the code can be challenging if you're not used to working with HTML - the article about Stopping pictures on your blog from being "clickable" has a hint about using marker-text to help with this.

Getting the HTML code to draw a table in your blog:

If you want to display tabular data on your blog or web-page, then you can either type the HTML instructions in manually, or use a tool that generates the code for you.

There are plenty of HTML table-generators around (google to find them): you tell them how many rows and columns you want, and they generate the skeleton HTML code that you need for a table of those dimensions. Then you simply have to copy-and-paste the code into the Edit HTML view of the post/page editor, and fill in the details you want to show inside the table.

This last step, filling in the details, is the hardest part. The nicer table-generators help by putting some marker-text into each cell, so you can at least see where they are, for example, they provide code like

<table>
<tr>
<td> row 1, cell 1 </td>
<td> row 1, cell 2 </td>
<td> row 1, cell 3 </td>
</tr>
<tr>
<td> row 2, cell 1 </td>
<td> row 2, cell 2 </td>
<td> row 3, cell 3 </td>
</tr>
</table>

which looks like this in the post-editor screen:

Column 1	Column 2	Column3
row 1, cell 1	row 1, cell 2	row 1, cell 3
row 2, cell 1	row 2, cell 2	row 3, cell 3

And because the post-editor screen displays the table correctly, it is easy enough to edit the contents there.

(The code quoted doesn't actually show a table like that, which is centered with borders and a background colour. I wanted to show the basic code here so you get the point - see the Appendix at the very end of the article for the actual code to produce a table like the one shown).

This works well for smallish tables. But for larger tables (ones with lots of rows and/or columns), you may want to use a tool to create the HTML for you. There are various options for this:

1 Output from Save-as a web page:

Products that work with tables (eg Word, Excel, PowerPoint) and can save files as HTML pages. However the code that they produce will have a lot of extra things in it, including the formatting from the stylesheet in the original program. Some of this code may not work well with Blogger - so I DO NOT recommend this approach.

2 Use a "proper" HTML editor:

If you have it, a tool like Dreamweaver (or similar web-site editors) is likely to create the HTML while giving you an easier front-end. I've been told that Notepad++ is also useful for this, though I haven't figured it out yet.

3 Use Excel functions to "write" the HTML:

Many of the tables I make are genuine sets of data that I want to do other things with (eg sort, filter, cross-tabulate), as well as make Blogger posts about. So it seemed sensible to find a way to use Excel's text-functions to create the "body" section of the HTML tables for Blogger - since HTML is really just text.).

This method has worked well for me, and has halved the time it takes to create posts on one of my blogs that shows a lot of Google custom maps.

Formatting tables

The CSS-Tricks website has written a comprehensive guide to table formatting commands. It's fairly techy, but extremely informative about the best way to use tables. You can find it here.

A Final Thought:

This article is about putting tables into your blog-posts. But the information applies equally well to putting them into gadgets - see putting HTML from outside sources into your blog for more details.

Showing a picture in a blog-post

Using Excel text-functions to write the HTML for a table

Displaying the contents of a Microsoft Word document in your blog

Writing posts for Blogger in MS Word

Putting HTML from outside sources into your blog

Stopping pictures from being "clickable"

Blogs, Blogger and blogger, Google and google - basic definitions for bloggers

Appendix: Code to make the example table:

This is the actual code used to make the table shown above. It uses a mix of in-line CSS, and pure HTML formatting for the table features that CSS doesn't support:

<table border="1" cellpadding="5px" style="background-color: orange; border-collapse: collapse; margin: auto;">
<tbody>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column3</th>
</tr>
<tr>
<td>row 1, cell 1 </td>
<td>row 1, cell 2 </td>
<td>row 1, cell 3 </td>
</tr>
<tr>
<td>row 2, cell 1 </td>
<td>row 2, cell 2 </td>
<td>row 3, cell 3 </td>
</tr>
</tbody></table>

Saturday, 6 August 2011

Adding Amazon Associates product links and banners to your blog

This article shows the options for putting product links, banners, widgets and page-links from Amazon into your blog-site.

Overview

The short-lived integration between Blogger and Amazon.com, back in 2009-2010-ish, means there are a number of ways to link your blog and Amazon - and the tools that Amazon provides means that there are a wide range of products you can show and functions your can provide to your readers.

You might do this just to make your blog look more interesting, or to make money by being an Amazon Associate and recommending their products to your readers.

Basically, so far in Blogger's life there have been four options for putting a link to Amazon inside your blog:

Use one of the Amazon widgets found in Blogger's gadget menu.
Use the Amazon Product Finder that was available when you're using the Post Editor in Blogger - but this is only available if you've added it previously - you can no longer add this to your blog, since Blogger / Amazon integration has ended.
Log in to the appropriate Amazon site, find the product that you want to link to, and choose "Link to this page", from the site-stripe at the top of the page.
Log on to the appropriate Amazon site's Associates page, and use either the Links & Banner, or Widgets tabs.

Options 1 still works - but you have no way of linking the gadget to your Amazon Associates ID. It lets you put:

Amazon gadgets into any place that you can put a regular Blogger gadget (header, footer, sidebar, etc),
Links to individual products from Amazon inside Posts or Pages.

Option 2 is no longer available.

Options 3 and 4:

Can be used with any Amazon site (ie Amazon.com, Amazon.co.uk, Amazon.ca, etc), no matter what you did with Amazon previously.
Let you put the code into your blog in the same way that you install any 3rd party HTML into your blog.
Give you the full code for their widgets (ie gadgets), so you can put these gagdets into posts. This is unlike gadget/widgets that you get from Blogger, which cannot be put into posts - at the moment anyway.
Can also be used if you want to put Amazon links inside other types of blog or website that allow you to install your own HTML/Javascript.

Further details for each of the options are listed below.

Option 1 - adding an Amazon gadget in Blogger

Go to Design > Page Elements > Add a Gadget.

Choose one of the Amazon gadgets from the list. (use the search item at the top of the list of gadgets to just get Amazon ones).

When you have configured the gadget (eg entered a title), press Save.

Then drag-and-drop the new gadget to where you want it to appear.

I strongly recommend only selecting gadgets that say "By Amazon.com" underneath their description (because I just don't trust 3rd party gadgets).

Also, be careful that the gadget(s) you choose don't conflict with any other tools that you have - for example, in you are using a Google Custom Search, one of the terms and conditions is that Google is the only search provider on your site, and this may mean that you should not use Amazon's search gadget.

Option 2 - using the Amazon Product Finder

This option is no longer available, because Amazon / Blogger integration is over.

Option 3: Using Amazon's Link to this Page

This gives you a very quick way to get the HTML you need to put a product-link into your blog, which you can then put into your blog in the usual way.

It's particularly useful because it lets you link not only to a product, but also to other pages, for example, and up to date list of Amazon sellers who are currently providing a particular product - Example of a link to used copes of HTML Dog's XHTML / CSS guide.

See Amazon's article explaining the site stripe for more information about this.

Also, if you use widgets, remember that it's easy to change the tracking-code that they are associated with, without having to re-generate the widget.

Option 4: Using Amazon's own code builder

If you go to the Affiliates page on the Amazon that you have signed up for, there are a number of ways (top menu, sidebar) to get into their code building tools.

These tools are fairly intuitive to use: choose the options you want, copy the code, and install it into your blog.

Amazon Integration is with Amazon.com

Putting HTML from 3rd parties (like Amazon) into your blog

Changing the Look of Amazon Associates advertisements

Changing the tracking code for an Amazon Associated widget

Saturday, 30 July 2011

Enabling Blogger on Google Apps domains

For Google Apps accounts, access to Blogger is controlled by the domain administrator. This article shows why domain administrators may want to turn off Blogger access, for their domains - and describes how to enable Blogger access if required.

Blogger and Google Apps Domains

Previously I've described Google Accounts, the difference between Google and Google Apps accounts, and the work being done to resolve conflicting accounts.

People who have Google accounts can use Blogger by going to www.Blogger.com. But for Google Apps account users, access to Blogger is controlled by the domain administrator. There are reasons why domain administrators may not want their users to have Blogger. But there may be times when it is appropriate, so this post shows how to enable Blogger access, too.

Why limit Blogger access:

Reasons why domain administrators (from commercial companies at least) might not want to allow their users to use Blogger with their domain account, include:

It doesn't feel like work:

Other Google products accessed with domain accounts can be set to use the domain-owner's logo. So they look like a company tool, even though they're provided by Google. This reminds people that they should only use the accounts to do things that are appropriate "at work". But Blogger cannot (currently) be set up in this way - people who are using it may forget that they are using a work / organisation tool, and may be tempted to publish personal material using the account.

Access control:

Firstly, there is currently no way to use Blogger to publish a blog that can be read by everyone using the domain, and not seen by anyone outside it. This means that Blogger cannot be used for company businesses that should not be shared outside the company. (The closest option in Blogger is to set up a private blog and invite people to read it - but there is a maximum of 100 invitations ever, and besides this option does open some security holes.)

What happens when people leave

In well-managed companies, when a person leaves their domain account is deleted (perhaps after a month or two, in case they come back). If someone has made a document or blog using domain account, and that domain account is deleted, then it's likely that the document or blog will be deleted too. This isn't such a big deal for documents: they can be transferred to other accounts. But even though there is a procedure for transferring ownership of blogs, there are some items commonly found inside blogs (eg pictures, videos) that cannot be transferred given the tools that Google offer at the moment.

No Blogger access at all?

There may be times when it is appropriate to allow people to access Blogger through your domain accounts.

Currently, this is all-or-nothing: either you give access to everyone or no one. Google Apps doesn't have a way to let you give access to small group of your users.

If you want to give access, follolw the procedure outlined below. However note that it's possible to turn access off again as quickly as it was turned on. If you do need to allow access to let a person "rescue" a blog that is attached to a domain account, it should be easy enough to arrange a limited time with them, during which they can log on, and at least give another, non-domain, account administrator access to the blog.

Also, this isn't about blocking all access to Blogger.com from the workplace. It's only about what people can do with their "company" domain account. If someone really wants to use Blogger at work and/or for work purposes, they can still set up a separate Google account and use that for Blogger (provided the overall security policies let them do so). This account is an asset that needs to be managed (just like their office keys, credit card, work mobile, official Twitter account, Facebook page access, etc) - it's just not inside your domain.

How to turn on Blogger access in your domain

Go to the Google Apps control panel, and sign in to the domain-management function.
Log in, using an account with domain administration rights.
Go to the Organization & Users tab
Switch to the Services sub-tab
Scroll down to the Other Google Services category
Note the Terms of Service issue described on the screen - only continue if this does not cause a problem for your company etc.
Find Blogger in the list (it's currently 2nd in my list, so easy to find).
Click the On button beside Blogger, so it goes green.
Click the Save changes button at the bottom of the list.

This will allow every user in your domain to use Blogger, by logging in to www.Blogger.com with the domain account that you set up for them.

Wednesday, 27 July 2011

Putting a custom +1 button into your blog

You can add a custom version of Google's +1 button to your blog, just like Facebook's Like button. It can go in under the title bar in the post-header or beside or below each post. Or it can be a gadget. And the "plus one" function can apply to an individual post or your whole blog.

[Updated Jul 2011 to link to the asynchronous version of the code.]

What is Google's +1 button

+1 is Google's answer to Facebook's Like button - or at least that's what Google are hoping.

They first announced it in March 2011, and have now added it to the standard sharing buttons for Blogger.

The big difference between +1 and Like is where the results appear:

Like shows up in counts in the Like button and inside Facebook in the feed from the person doing the liking.
+1 shows up in Google search results - it's still not clear if this is just in search results for your "friends" (however they're defined) or if it shows in search results for everyone, or how much influence it will have on search-result.

Adding +1 if you don't use Blogger's standard sharing buttons

Provided you're willing to accept the disadvantages of editing your template, it's easy enough to add a customized Tweet or Facebook share button to your blog.

Adding a customised +1 button is very similar. Just follow these steps:

1   Go to the +1 button configuration page Webmaster Central.

2   Choose the basic settings you want: pick button size, annotation and language.

So far, I've used the medium (20px) size, as it seems to fit best with the other share-items that I've added before. You should be able to see it at the top of the page if you're reading this article through a web-browser.   Note that this option is slightly smaller than the default "standard" option.

Annotation is about how your number of +1s is "noted" in the button - choose the different options and watch what happens in the preview to see which one you want to use. Or choose None if you don't want the button to show a count.

3 Click on Advanced options, and decide what you want to to apply the +1 function to:

If you want to to put the +1 button where it can be used to on the individual post URL rather than your whole blog, then put some text like PUT-URL-HERE into the "Url to +1" box.

If you want readers to +1 your whole blog, just enter your blog's web-address (ie URL) into the "URL to +1" box.
(NB It may be possible to leave it blank in this case, but I'd rather specify exactly what URL to use, in case anyone hits +1 from an archive page or similar, which has a separate URL).

5 Copy the HTML shown.

The code provided is in two parts. The first section is what you put into your blog whereever you want the +1 button to appear. The second part starts with a comment: "". This means that:

You only need to put the code underneath that line into your blog once, and
The place to put it is immediately after the last time you put the +1 button code into your blog. Iif you only add the button once, then put after that time.

6 Add it to your blog in the same way that you would add add any other share-this-to-whatever social sharing button, except --- if you want the button to recommend individual posts not the whole blog, then before you save the change, replace the PUT-URL-HERE part of

href="PUT-URL-HERE" (or whatever text you used)

with

expr:href='data:post.url'

What your viewers will see:

Visitors who see your blog in their web-browser (not through an RSS feed reader) will see a new button wherever you choose to put it. (People who read your blog thru feed aggregators, or by email subscription, won't see it.)

When someone clicks the button, what happens depends on whether they are logged in to a Google account at the time, and whether that Google account has a public profile.

I'm not even going to try describing all the options possible as yet (or this will never get published!) but you are welcome to try the one at the top of this article to see how it works

Later on, as the button starts to be used enough to provide meaningful data for Google, potential viewers who see you site listed in Google search results will start to see counts of the number of times that other people have "plus-one'd" you in their search results.

Sunday, 17 July 2011

Timezones at a glance: what's the time in your readers' country?

This article describes why timezone matters for bloggers, and has a picture comparing the time in the major areas of the world throughout the day.

What time is it for your readers?

Previously I've described how to plan changes to your blog in private. But at the end of the planning, you still need to implement the changes in a way that causes your readers as little disruption as possible.

One approach is to use a statistical tool (eg Google Analytics) to see where your readers come from, and then choose a time when the majority are probably asleep (or working, or whatever makes them unavailable to look at your blog) to make the changes. It can be challenging to find a time that suits everyone, though, especially if you have on-line visitors from several timezones.

Also, if your blog offers follow-by-email or has a feed set up with Feedburner, then one of the options you can set in Feedburner is the time that your daily email to subscribers is sent out: depending on your blog's niche you may want your email to be hitting people's inboxes either first thing in the morning (professional blogs), or late afernoon / early evening (personal blogs).

Comparing time zones with a picture:

There are many, many time-zone calculators on the internet: typically they tell you the time right now in two different places (your and one other), and the difference between the time in each place and GMT. However this leaves you with some calculations to do if you need to compare several time zones, or if you want to think about very different times of the day.

An alternative approach is to draw the day in color-coded three-hour slots, like this::

Then you can use a table that summarises the time-zone in different areas of the world like this:

time zone comparison chart - lines up GMT / Europe, the Americas, Asia, and Pacific on one comparative table

Of course it's not possible to show every country like this, or to take account of daylight savings time (which operates in different months in different countries). But hopefully the countries shown will give you an idea of different parts of the world, and the time in each one of them.

To use the chart, find your country and read up and down the table and get a rough idea of the time in different parts of the world, at the different times in your day.

For example, if you're in the east of America, and you have a lot of readers in South America and Asia, you can see that when your time is 9pm, theirs is roughly midnight (South America) and 9am-noon (Asia).

A more sophisticated approach?

If you have installed Google Analytics, then Google keeps data about each person who visits your blog, including the time of day that they arrived.

You can access this through the Analytics application .. and I'll try to write about this in some detail when I remember exactly how to find the time-of-visit statistics.