How to make Blogger sticky post using a gadget

I have this other sticky post hack, which uses real Blogger posts. But for some Blogspot blogs that may not be the best solution, so lets see how we can do the sticky post thing using a HTML/Javascript gadget. I did not find "full solutions" where the sticky post works like it should, i.e. displays only on the first page of the blog, but not on other pages. So here is one, by me.

Live demo

Adding the gadget

Go to Design, Page elements. Click Add a Gadget (any link will do, we will move the gadget to proper place afterwards).

Write the text/html you want in your "sticky post", click Save. I suggest to not use any title, it helps the correct alignment when gadget is hidden.

Now drag the new gadget to top of blog posts, like this:

Save.

Hide the gadget on other pages than first

Open template html for editing. Before </head> add this:

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style type='text/css'>
div.main div.widget.HTML .widget-content { display:none; }
div.main div.widget.HTML { margin-bottom:-30px; visibility: hidden;}
</style>
</b:if>

Depending on your template you might have to change the value -30px to adjust the position of blog texts. -30px works for "Simple" template.

How to mimic a post in gadget html

Here's a "template" you can use in HTML/Javascript gadget contents to make the gadget have post-like title, spacing and body text.

Data provided by Pastebin.com - Download Raw - See Original

This template works at least in "Simple" and "Awesome Inc." templates, probably in others, too. :)

Live demo

Small update for recent comments gadgets

I have updated the source code of all three recent comments gadgets today.

1. Bug fix

The gadget choked with comments on blog pages (versus articles). Fix for that was easy, search for line:

postTitle = hrefPost.split(&quot;/&quot;)[5].split(&quot;.html&quot;)[0].replace(/_\d{2}$/, &quot;&quot;);

and change it to:

if(hrefPost.match(/\/([^/]*)\.html/)) postTitle = hrefPost.match(/\/([^/]*)\.html/)[1].replace(/_\d{2}$/, &quot;&quot;);

That line is line number 88 in recent comments gadget, line 138 in return of recent comments gadget, and line number 141 in son of recent comments gadget.

2. Default/empty post title

I also updated this line (line number 85/135/138):

var postTitle="";

to this:

var postTitle="-";

So at least something is displayed, if title cannot be parsed.

3. Better linking to post page comments

In return of, and son of recent comments gadged, I also added this line:

if(!/#/.test(href)) href += "#comments";

It is line 185 in "return of", and line 192 in "son of". With a comment on a page this gets us positioned on top of the comments (versus top of the article). I did not make this update on the oldest gadget, if you're still using it, I suggest you try the latest version, son of the recent comments gadget.

I've updated the source code in the blog articles, you can look up the changes there.