In Blogger: Make blogs, not problems

In Blogger support forums you can daily read how someone has lost his post due to editor constantly autosaving the draft, or blog layout is broken after trying some hack. Can the post be recovered - no. Layout fixing - stressful work, your users see broken blog, etc. These problems can be avoided or diminished very easily. If you try to work on one blog only, chances of loosing data get higher. Appreciate your work and efforts and do not put all the eggs in one basket.

Blogger is a platform for making blogs. Blogspot blogs are free. So make blogs instead of problems. Don't use your "main blog" to try all the hacks out there. Make a blog for that, call it your "beta blog", for example. Tired of loosing a post text because of autosave? Make a blog for pre-publishing posts, "prepub blog". There you can publish already the very first draft version, after which the autosave is turned off while editing the post. After text is ok, copy text to your main blog and publish.

Prepub blog can also be a great place to develop ideas for blog posts. You can publish there your draft ideas without "filtering" them. Just pick the good ones for further editing and publishing in main blog. Your existing posts can be exported from main blog and imported into background blogs for test data. Your template html can be copied to background blogs, too, you don't have to make all changes from the start.

Note: if you upload images to your post in prepub blog, they will be placed in prepub blog's Picasa album, so you should not delete this album or pictures in it. Alternatively you can just work on the text in your prepub blog, and upload the photos in your main blog before publishing.

You can leave those background blocks out of Blogger's listings and keep search engines out. You can also make them completely private, if you want, you being the only one who can view (prepub could be like this).

Your blogs could be for example:

myblog.blogspot.com

myblog-beta.blogspot.com

myblog-prepub.blogspot.com

Specific addresses may not be available, but for background blogs the url is not so important anyway. And you don't have to stop there, at three blogs. Make blogs as many as you think you need. Do not compromise a single copy of information.

What do you think?

Follow post's comments by email in Blogger

"Isn't this a built-in feature?" Yes and no. You can have post comments delivered to your mail, if you have Blogger/Google account, but not if you are OpenID, non-registered or anonymous commenter. There is the Subscribe to Post Comments (Atom) -link, maybe spiced up with RSS icon, but many people don't know what to do with that feed link. So something more user friendly would be nice.

With this little hack you can offer your reader an easy way to subscribe to new comments of a post and get them delivered to reader's email. I use blogtrottr.com feed-to-email service in this hack. I wanted to place the email subscription form beneath the RSS link, which was bit tricky but succeeded. Because RSS feed url opens in new window (target="_blank"), I made the form open its results in target="_blank", too.

Installation is easy, if you know your way around. Open template html for editing. Select Expand widget templates. Search lines:

    <!-- feed links -->
    <b:include name='feedLinks'/>

After those line add:

Data provided by Pastebin.com - Download Raw

Now your readers can subscribe to those posts' comments they are interested in. It works either by user entering email address in the form (form has very basic email validation) and clicking the subscribe button, or just by clicking the button, which opens Blogtrottr page where email is asked.

You can test this and my other comments hacks at Playground for Blogger threaded comments.

Tip: Add avatar for anonymous commenters in Blogger

Seen this man?

Probably. That is the "mystery man" gravatar, widely used in different blogging systems as an avatar of non-registered and anonymous users. Not in Blogger, though. So, if you allow anonymous or non-registered comments in your blog, you might want to use this tip.

You can get the anonymous avatar to your blog by simply adding some CSS to your template (layout templates). You can do it by editing template html or through Template Designer: Select Advanced, Add CSS. Add this CSS to your template:

.avatar-image-container.avatar-stock img { 
background:url(http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=33) no-repeat center center;
width:35px; height:35px; 
}

If you want custom avatar instead of the mystery man, change url http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=33 to your custom image url (uploaded to your Picasa web albums, for example).

You can see this working in Playground for Blogger threaded comments.

---

2011-Dec-25 update: changed "width:37px; height:37px;" to "width:35px; height:35px;".
Update Feb 2nd 2012: Blogger threaded comment has now this anonymous avatar, so you might consider using it: http://img1.blogblog.com/img/anon36.png

Collapse and expand individual Blogger comments hack

When a post has many comments, reading them, keeping track what's read and following threads of conversation may be difficult. After making the threaded comments hack, I was thinking if one could make the texts of all comments collapse, so that the "flow" of conversation could be seen, it would make easier to follow conversation and find/navigate to particular comments. User could also expand the texts of all comments, and collapse/expand single comment's text.

A hack that would do those things was not found ready. So I had to code one myself (well I probably would have done it anyway). I first did it to use "pure" javascript and div show/hide, but then I made an option to use jQuery and smooth transitions, which in the end looks really great. But you can choose to opt out the jQuery, if you want, it still works.

Before installing this hack you need to install my Highlight author comments hack. We use those comment wrapping div:s created in that hack.

Open template html for editing. Click Expand Widget Templates. Insert this code before </head> (leave out first line if you don't want jquery):

Data provided by Pastebin.com - Download Raw

After inserting that code, 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 add:

Data provided by Pastebin.com - Download Raw

Next line contains <H4>. Change that <H4> to:

<h4 style='width: 50%;'>

Find lines (added in Highlight author comments hack):

              &lt;div class=&#39;admin-comment&#39; id=&#39;x<data:comment.anchorName/>&#39;&gt;
            <b:else/>
              &lt;div class=&#39;normal-comment&#39; id=&#39;x<data:comment.anchorName/>&#39;&gt;

Replace those lines with:

Data provided by Pastebin.com - Download Raw

Save template. Now the hack already works, you can test it.

But let's add some visual clue when mouse cursor is over a comment so user is encouraged to click it to hide/show comment's text. I made that by adding hover effects to comment wrappers. I also styled the normal-comment spacing to be same as admin-comment's.

Open Template Designer. Select Advanced, Add CSS. Find the CSS you added in Highlight author comments hack, something like this:

.admin-comment {
background: #F4F4F4;
margin-top: 6px;
margin-bottom: 6px;
padding: 3px 3px 0 3px;
border: 1px solid #EDEDED;
}

(you can do this also in tempate html editing mode, if you know what you're doing)

Replace that with:

.admin-comment {
background: #F4F4F4;
margin: 4px 4px 4px 0;
padding: 3px 3px 0 3px;
border: 1px solid #EDEDED; 
}
.admin-comment:hover {
background: #EDEDFF;
border: 1px solid #D0D0FF; 
}
.normal-comment {
margin-right: 4px;
padding: 3px 3px 0 3px;
border: 1px solid #FFFFFF;
}
.normal-comment:hover {
background: #F8F8FF;
border: 1px solid #EDEDFF; 
padding: 3px 3px 0 3px;
}
.comment-footer { margin-bottom: 4px; }

I also fine tuned margins in this CSS a bit. You may want to adjust color details etc. according to your blog styles. I have again installed this hack on this blog, so you can see it in action, for example here. Although not necessary for this hack to work, I recommend you to install also my threaded comments hack.

Option: comments closed initially

If you want the comments to be closed when the post is opened, edit html and put this before </body>:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
  hideComments();
</script>
</b:if>

Add RSS icon to feed link in Blogspot footer

I've seen many complaints that Blogger does not offer user the possibility to follow comments in a post, that user has commented. Well, it kind of does, via RSS feed, but this is often not noticed. When viewing a post, there's a feed link in page footer, but it is in small text not easily recognized. My tip to make it more visible is to add RSS icon to the link.

This hack also adds RSS icon to other pages' feed links in footer, for example in front page the link to the blog posts' feed.

Here's how you can do it: Open template html, select Expand Widget Templates. Search for line:

     <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>

Change to:

     <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><img src='http://img1.blogblog.com/img/icon_feed12.png'/> <data:f.name/> (<data:f.feedType/>)</a>

Save.

Threaded commenting with Blogger native comments

Update January 18th 2012: A newer and easier to install version 2 here, you should consider using it.

Threaded commenting is a much wanted feature in Blogger. There are 3rd party commenting solutions with threading. Wordpress has threaded commenting built in. But what about threading in native Blogger comments?

When googling Blogger comments hacks, for completely other reasons, I came across this Threaded Comments in Blogger article. However the hack looked a bit complicated, template needed big changes, and I did not want that. And, according to some comments, installation to new templates was not straightforward. I thought, maybe it could be done with fewer changes and code that was easier to maintain. I felt like my mind could not rest before I figured out how to do it. :) So I had to find a solution, and finally I did, here it is. Thanks to Sham for the idea.

This hack works for the (current) layout templates (October 2011). Don't know about classic templates. Does not work with dynamic templates, because they display comments completely differently, getting their data dynamically from comments feed.

How to install Threaded comments

Update January 18th 2012: A newer and easier to install version 2 here, you should consider using it.

You must install my Highlight author comments and Reply to comments hacks first. After installing those, edit template html, and paste this just before </body>:

Data provided by Pastebin.com - Download Raw

In the script there are two values, 300 and 20, that you can change to control the maximum indent amount (300 in my code) and the indent of one "step" (20 in my code). Defaults should be quite good. You can also change these values afterwards.

Save template and enjoy. It is almost like magic :)

Code "threads" the comments either by parsing link <a href="#link to comment"... or by parsing @username from message field. A reply containing "@username" is positioned after latest username's comment (which timestamp in earlier than in reply) or for immediate previous comment, if it is from username, on the list before reply.

If you just want to test how the threaded comments work, please don't do it in this post, I will delete totally irrelevant comments. But you can do the testing here: Playground for Blogger threaded comments. Thank you.

Playground for Blogger threaded comments

You can test my threaded commenting hack (v2) in this post.

See also the hack for expanding and collapsing texts of comments and avatar for anonymous commenters.