Templates: blogID in posts widget layout data tag

This might be quite new feature, I just discovered it today (by browsing through template sources): blogID is now available in posts widget in the layout data tag "data:top.id". So if you are making Blogger hacks or templates, you can use this instead of telling users to edit their blogID into the code.

Clear button for CSE search results

Blogger's normal search capabilities (search gadget and navbar search) did not work in my blogs, that's why I use CSE (custom search engine) gadget, and my hack for navbar search.

One thing that I was missing from Blogger's search gadget was the little X-button to close the search results. Well there's one next to the search button, but none in the search results area. Now that I've learned some jQuery, I did a nice little hack to add that close button into the CSE search results, like this:

It is also installed in this blog, so you can test it live.

You have to have my navbar search hack installed first, because code needs the variable customSearchControl (and uses also searchPhrase, if present). And you need to have jQuery loaded somewhere in your blog's template. After having these the installation is easy. Open the HTML/Javascript gadget, that contains your blog's CSE search gadget. Before the last line (</script>), add this code:

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

Save gadget and test.

Expand/Collapse all comments texts, for threaded comments v2

This is simple hack, it installs links for collapsing/expanding all comments' texts. You can test the functionality here.

You must have threaded comments v2 installed for this to work. Edit blog template, expand widget templates, find lines:

<b:includable id='comments' var='post'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>

After those lines, just before line that contains <H4>, add this code:

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

Save template. You're done.

Blogger threaded commenting hack v2

Blogger announced its own threaded commenting on January 12th. I thought that soon my good old threaded comments hack would not be needed anymore.

But Blogger's implementation of threaded comments has its limitations, and bugs, too. So I decided to give my threaded commenting hack a new round, and made version 2. It is now installed on this blog, you can see it and test it for example in the threaded commenting playground.

Features include:

• (relatively) easy install, just one piece of code copied to template
• contains Reply links to comments hack
• contains highlight author comments hack
• expand/collapse individual comments
• style is similar to Blogger threaded comments
• max threading levels can be specified
• if you have used Blogger's threading, can read that threading information
• works with major browsers, tested on Internet Explorer, Firefox, Opera, Chrome
• I must have forgotten something. Did I mention that it is great? :)

To install this, just edit your blog's template, copy the following code (use the "Download Raw" link) and paste it just before </body> in the template. If you have jQuery loaded previously in the template, you can delete the first line that loads jQuery. If you had my previous threaded commenting hack installed, remove that code (the javascript part). You don't need to install any hacks beforehand, like in the previous version: this hack includes them, if they are not installed.

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

This works at least on Simple template. If your template is heavily modded, then this hack might not work without modifications. And this hack does not work on dynamic views, and does not work if Blogger's threaded commenting is active. If you need to disable Blogger's threaded commenting, see this article.

Update August 31th 2012: If you have this installed, and threading stopped, please install this update.

Templates: Is comment author blog admin? An easy test

If you make Blogger templates or template based hacks, this info might interest you. In the comments section, usually in <b:includable id='comments' var='post'>, if one needs to check if the comment author is blog admin, often seen solutions include:

<b:if cond='data:comment.author == &quot;PUT_USERNAME_HERE&quot;'>

and

<b:if cond='data:comment.authorUrl == &quot;http://www.blogger.com/profile/01234CHANGETHIS56789&quot;'>

But the easiest way, and least error prone, is:

<b:if cond='data:comment.authorClass == &quot;blog-author&quot;'>

After realising this, I updated my How to Hightlight author comments in Blogger hack to use this easier method.

Short URLs for Blogspot posts, and update to urltinyfy

Recently I made a Google App Engine application in Python, that provides javascript JSONP APIs for different URL shortening services. Read more about URLtinyfy, and the API, in this blog article.

I expanded the application to support more URL shortening services. Currently it supports: tinyurl.com (provides same interface as json-tinyurl), goo.gl (provides same interface as ggl-shortener), safe.mn, is.gd, v.gd, mcaf.ee, linkee.com, cli.gs, (std.li*), tinyurl.ms, and "hidden" support for bit.ly (and j.mp, which is same as bit.ly). I added also a sample URL shortener in javascript for the (non-hidden) services, for example: Sample linkee.com URL shortener.

*) std.li API does not work anymore in June 2012, removed from the list

And here's another example of usage, a hack to add...

Short URLs for blog's posts

This requires template editing. Edit also Widget templates. Find (partial line):

post-footer-line-3'

and about 8 lines later:

</span> </div>

Add this code after that </span> </div> line:

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

The above code includes tinyurl, googl and safemn services. It is easy to add, remove or change the services displayed. Hack is installed on this blog, for demostration there are five different services offered here, but in practise I think it is better to limit the shortening services to two or three.

Tip: Anonymous avatar for new Blogger threaded comments

Update Feb 2nd 2012: Blogger has updated the threaded comments, and it now includes an avatar for anonymous commenters by default. So this is now obsolete.

---

Previously I've told how to use anonymous "mystery man" avatar in the "old" commenting system, article here. But if you start using Blogger's new threaded commenting system, that old CSS won't display the mystery man anymore.

To make anonymous avatar work for the new commenting system, I had to use CSS3. Most browsers luckily support it now. Here's a simple CSS3 definition, that puts the mystery man back into his place. Add this to your template's CSS section (you can use Template Designer|Advanced|Add CSS):

.avatar-image-container img[src$="blogblog.com/img/blank.gif"] { width:36px;height:36px;
background:url(http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=36) no-repeat center center;
}

(double click code to select for copying) This tip works for non-dynamic views. You can use a custom avatar instead of the Gravatar's mystery man, uploaded to your Picasa web albums, for example.