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.

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 the gap above the post header

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


2  Find this code

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.

---

Related Articles

Setting up Google Analytics to get statistics about for your visitors

Adding a new CSS rule to your blog's template

Advantanges and disadvantages of editing your template.

How to edit your blogger template

Who did your blogger template come from - the quick way of finding out

Making a test-blog for template changes

Planning changes to your blog in private

Getting the HTML code to put a picture into your blog's sidebar, header or footer

You can use the Post Editor to get the HTML code that you need to put a picture into your sidebar (or header or footer, or anywhere else a gadget can go).

The Picture gadget is the normal tool for adding a picture to your blog's sidebar.

But sometimes you want more control over the picture size or behaviour.  Eg, you may want to have two pictures very close to each other and guarantee that they're the same size.

To do this, you need to get the HTML code for the picture, and then put it into your blog as an HTML-gadget.  Fortunately, Blogger's Post-editor make it very easy to do this without writing the code yourself.

Using the Post Editor to generate the HTML for a picture

1  Start a new Post  (NB   you're not ever going to publish this:  it's just a work-area)

2  Don't enter any text:   just use the Picture icon on the toolbar to add a picture.   Blogger will prompt you to upload the picture, or to choose it from a Google-album-archive or to enter its URL:  add the picture the way that you usually would.

3  Switch to the HTML tab   (top left of the editing window).

This show you the HTML code for displaying the picture, as it is set to display in the Post (depending on the picture-settings you've chosen, it may be centered or right/left aligned, and the size may vary).

4  Copy the HTML.

5  Switch back to Compose, so that you don't get confused the next time you edit a post.

6  Return to the list of posts:  you may be asked if you want to leave the page without saving - the answer is Yes.  Or you may have a new draft-status post, which you can delete.



Job Done!   You now have some HTML code in your memory which you can paste into an HTML/Javascript gadget, or anywhere else that you may need it - even into another post that you are editing in a separate window, or into a totally different tool.

---

Related Articles

Stopping pictures on your blog from being "clickable"

Inserting a Picture into a blog Post.

Putting 3rd party HTML into your blog

Center-align the gadgets on your blog

Hosting pictures outside of Google / Picasa

Inserting a picture into your blog as a gadget

Showing your oldest blog-post first - and the rest in reverse order.

Blogger does not have an option to display your posts in reverse order - so that the oldest post is first, and the most recent post is last.  

But this article describes displaying your posts in this way by manipulating their post dates.  And it links to an article about some other possible options.

Overview

Previously I've discussed the options for giving your blog a home page.  One option is to organise the post-date for each of your posts, so that you control the order posts are displayed in.

This is easy enough to do, although there are a couple of risks that you need to be aware of as discussed below.

Blogger Posts and the Post-date

Each Post in your blog has a date-time value, which is called its "post-date".   Normally , this is set to the date/time when you publish the post for the first time.  But you can change the post date for any post, and you can do this either when you post it first or later on.

The post-date is important because it controls the order that posts are shown in:

• The post that appears first when a reader visits your blog is the one with the most-recent Post-date.

• If you have more than one post-per-screen, then the next-most-recent post is on the screen underneath the first one.  And then the second-next-most-recent, etc.

When a reader is looking at any post, and they click Newer-Posts or Older-Posts, the post-date is used to decide what posts to show on the next screen.

This means that you can make your posts appear in the order than you wrote them (ie first post first, second post second, etc) by changing the Post-date so that:

• your first post has the most-recent post-date, 
• your second post has the next-most-recent-date, 
• your third post has the third-most-recent poste date
• etc

An alternative approach is to just make one post always appear first, and let the other posts appear in the order that you posted them.

How to make your posts appear in reverse order, using dates

1  Give your first Post a post-date (eg today), AND remember that date.

2  Give all other posts (even ones that you write next week, or next year) a post-date that is earlier than the post-date you picked in Step 1.

• If you want your posts is strictly reverse order, you need to give each one a date that is earlier than any existing post.  This is quite easy:  just look at the list of posts in Posting > Edit Posts and scroll to the bottom of the list to see the oldest date used so far.

3  Turn off the post-date display on your posts (since the post-date won't make sense, because you're manipulating the dates).

• To do this, go to the Layout tab.  
• Choose Blog-posts (edit).    
• Un-tick the date under "Post Page Options".
  

4  Remember to make the same date change for every post you write from now on.


Also, if it might be relevant for your readers to know when you wrote a post, make sure that you always manually put the date into each post.

Risks of this approach

If you follow this approach, you will give a far-in-the-past date to pages that you never want to appear first.  There is a risk that Google might convert the data behind older posts at some time.   If your post-dates get too far into the past, then it's possible that they might not cope well this.   This could be for reasons that seem logical, or because of things that are totally to do with the internal workings of Blogger's database, and make no sense to you at all.

Also, be aware that Google might choose to force the post-date to appear on posts at some time in the future.  At the moment, they don't:  it's your choice.   But you cannot guarantee that they won't change their minds about this, one day.   (Personally I think they probably won't, and I've built a couple of "real" websites that make use of the technique described here.   Just remember it's not guaranteed.)

An Alternative Approach

Adam of Too-Clever-by-Half has suggested a totally different way to display your posts in reverse order.   I haven't used it, but think that it has a lot of potential in some situations, provided you are comfortable using Yahoo pipes and RSS feeds to display things on your blog.

He has also recently shared another approach he found, which uses a script to manipulate elements within Blogger, and so is more robust than his first approach.

---

Related Articles

Changing the post date for any post

Giving your blog a home page

Using a gadget instead of a post as your home page
 
Stopping certain pages from ever appearing on the home page

Blogs, Blogger and blogger, Posts, Pages and Screens - understanding how blogger works.

mail2Post: How to update your blog by email, instead of using Blogger

Blogger's mail2Post tool lets authors make blog-posts, without using the Blogger software.   All you need to do is set it up, and write posts using your regular email tools.

Mail2Post and Blogger

The mail2Post feature, sometimes known as Post-to-profile, is a way of putting content on your blog without using the full Blogger software for writing the post.

It's not quite as good as using Blogger itself - there are a few features missing - but it is good enough in many situations.

How to set up mail2Post

Log in to Blogger with the Google account that you want to have mail2Post rights to your blog:  this account needs to already be set up as an author for the the blog.

Go to

• The Settings tab - if you are logged on with an author account, or
• The Settings > Email tab if you are using an administrator account  

Beside Posting using email, there is a place where you can enter some "secretWords", to make up an email address that you can use to post to your blog.

Enter some suitable words:  make sure it's not too easy to guess (your surname would not be a good choice!), so that spammers cannot get into it:

Choose either to publish emailed updates as soon as they arrive, or to save email as drafts so that you,  or another administrator, can review them before posting.

Note down the full email address, ie   NAME.your-secret-words@blogger.com   (you will need this later - and unfortunately because of the way it's displayed, it is not easy to copy-and-paste the value).

Click Save Settings.


Job Done!   Your blog is now set up so that posts can be created by being emailed to it, instead of requiring someone to use the Blogger software to write each post.

Using the mail2Post address

Once mail2Post is set up, anyone who sends an email message to the email address you copied can post to your blog, with what ever restrictions you set.

You might put message on your blog saying

 "send contributions to YOURNAME.YOURSECRETWORDS@blogger.com"

But be aware that this could generate a lot of spam.   And in the worse case, the spam could get your blog deleted for breaking Blogger's terms and conditions.

Alternatively, you might just tell the address to selected people - or perhaps even just use it yourself.

How is a Blogger Post made from an email message

When a message is sent to your mail2Post address:

• The subject-line of your email message becomes the Post-title
• The body of the email message becomes the body of the post
• I think:  If you automatically publish emailed posts, then the post date-and-time is the moment at which Blogger's servers received the incoming email message - expressed in Blogger's default time zone (PST OR PDT, I think).
• No labels are applied to the post
• The post-author is the profile name of the blog-author who set up the mail2Post address.

Pictures and Videos
People have reported various results when they include images and videos inside messages sent via mail2Post.   Personally, I have tested:

• An attached picture - posted ok, the image is show before all the text from the body of the email message
• An attached video file (4meg) - posted ok with the video appearing to be above the text from the email message
• An in-line photo - worked perfectly, the picture is placed in the post in the same position (relative to the text) that it was in the original email.

I suspect that the results  depend on they type of picture, the email client you are using, and the message format settings.   My testing was with Mozilla Thunderbird, which has a particular way of thinking about "attachments", slightly different from other email systems that I have used (eg Microsoft Outlook).

Probably the only way to discover how photos are handled when you use your email to send them is to set up a test-blog and experiment with different options.

What your readers see

People who read your blog in a web-browser see mail2Post entries just like any other posts.   If your blog displays the poster's name, then mail2Post entries have the name of the blog-author who set up the mail2Post address.

As mentioned before, the positioning of pictures and videos may not always be as good:  attached pictures, in particular, may be shown as the very stop of the post.

Apart from that, there is nothing to show visitors that the post was created using email - in either the post or in the blog's RSS feed.

---

Related Articles

Giving someone write access (ie author permissions) to your blog

Setting up a blog administrator

Understanding Google accounts

Setting up a test-blog to try things out in private

RSS, and why it matters for your blog

How Can I benefit from Ajaxsurf Trading And Investments

Easy, through Forex. So what is forex...?

Forex (Foreign Exchange or Currency Market) is a global market for the trading of currencies.
The Forex market is the most traded market in the world with a daily turnover of  $5.7 Trillion. This market is open 24hrs a day. It includes of all aspects of buying and selling of currencies at the current price. This gives you a chance to trade with forex and make a  lot of money out of it. And here at Ajaxsurf we can give you all the skills and tools required to trade Forex successfully. with only R5000 for full month you can learn  to be a quality Forex trader. We also do investments with a 7% return and our investments start at R10 000 only t&s apply.  

How to put a gadget above your blog's header

This article is about how to put an item (any type of gadget) above the Title section in a blog made with Google Blogger.

If your blog has a layout or designer template, then (almost?) all of Blogger's templates start out with a nav-bar at the top of the screen, followed by a Header section showing your blogs title & description, or a custom header image if you've uploaded one.

And even if you go into the place in the layout-designer where you can re-arrange the layout by drag-and-dropping items, you cannot drag any gadgets to above the header.

But this is easy to change, provided you are willing to accept the disadvantages of editing your blog's layout template.

How to allow changes above your blog's header

Follow these steps to make it possible for you (or any blog administrator) to add gadgets to the area about your blog's heading section:

1  Edit your blog's template in the usual way

2  Find this code in your template:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE(Header)' type='Header'/>

Hint:  use the template-editor search tool, to look for a key phrase like "id='Header1'

4  Change it to

<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE(Header)' type='Header'/>

Notice that there are two changes made:

• Setting maxwidgets to greater than 1, and
• Setting showaddelement to Yes, instead of No

Job Done:   after you have successfully saved this change, then the next time you edit your blog layout  (Dashboard > Layout  ), then you will find that you can add or drag-and-drop up to three gadgets to the Heading section of the blog, making a total of four.

You can add even more gadgets by changing the number for maxwidgets to something else.

Related Articles

Disadvantages of editing your blog's layout template

How to set up an extra administrator for your blog

Types of Blogger template

Planning changes to your blog - in private

How the data in Blogger blogs is organised

How to edit your Blogger template