Stikcy Posts

Blogger's posts are by default displayed in the reverse chronological order (i.e. the most recent post is displayed first). This means that, as and when you write new posts, the visitors to your blog's homepage get to see those new posts.

A sticky post is a post that gets stuck to the homepage and remains at the top no matter how many other posts you write. This is very useful if you want to make your blog index page similar to that of a normal website, which has the same homepage all the time.

The trick is to manipulate the post date and time of the particular post that you want to remain as the homepage. All you have to do is to set the date and time of that post to somewhere in the future. For example, if this post is forward-dated to, say, July 26th 2010, it will remain on the index page for another year. The farther you set the post date, the more it stays stuck at the top.

The "Post date and time" settings are found at the bottom of the post editor window, and are illustrated in the figure below.


Remember to first publish your post in the normal way and then to modify the post date and time from the edit post mode. If you forward-date the post before its initial publishing, then it will go as a scheduled post.

Other than creating the pseudo homepage, this trick is useful to create notices that you want to stay on top for some time. For example, if you are organizing some event that occurs in two months time and you want all the readers to your blog during the next two months to see that notice, you can forward-date it by two months so that it will remain at the top until the event is over.

Another thing you might want to do is removing the displaying of the post date and time from the Post Page Options section. Otherwise, your visitors might get the feeling that they have time traveled to reach your blog.

HOWTO: Add a Read More Option

Update:
Please follow this better Read More option, instead of the one described here.

If your blog contains long posts and you want to only show a selected snippet of each post on your homepage, here’s a simple method to add a “Read More” option to hide part of a post on the homepage (and also on archive pages).

• Go to Layout -> Edit HTML and click the ‘Expand Widget Templates’ check-box.

• Then locate the </head> tag and add the code shown in red in the following snippet, above that tag.

]]></b:skin>
<style><b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if></style>
</head>

• Then locate the <data:post.body/> element and add the code shown in red below.

<div class='post-body entry-content'>
<p><data:post.body/>
<b:if cond='data:blog.pageType != "item"'><br/>
<a expr:href='data:post.url'>Read More</a>
</b:if>
</p>

• Then for each post that you want to display a summary, you have to add the following piece of code enclosing the part that you want to hide. (Do this from the Edit Html tab of the post editor)
  

This is a sample long post. Only these two lines are visible on the homepage.
<span class="fullpost">This sentence, which is enclosed inside the HTML code
shown in red, will be displayed only when a visitor clicks on the Read More
link.</span>

Reference:
Expandable Post Summaries

Aligning the Header Image

In a previous post I talked about how the Blogger’s header image gets resized depending on the size of the image, the available space in the header and the configuration of the header widget. In this one, I will answer another question I get so often from my readers; “How can I center the header image?" This handy tip will help you not only to center align the header image, but also to right align it, if required.

First add the header image as you would normally do it. Then, to center Blogger’s header image, simply add the following CSS snippet to your template’s skin. (Read this to learn more about the Blogger template structure)

For placement “Behind title and description” add:

#header-inner {
margin-left: auto;
margin-right: auto;
}

For placement “Instead of title and description” add:

#header-inner img {
margin-left: auto;
margin-right: auto;
}

You can add it anywhere inside the skin. But, to keep all header related styles close apart, add it after a style such as the #header-wrapper or #header.

To right align the header image, simply remove the “margin-right: auto;” statement from the above block.

This trick has been tested on Denim, Denim Stretch, Rounders and Scribe templates. (Minima has it by default). But it should work on all other default Blogger templates. If it doesn’t work on a particular template, please let me know.