…because “in Draft” sounds cooler than BETA.

Yes, Blogger is at it again. Releasing new and (sometimes) exciting features. I took a bit of a spin with it today to see what is up.

The major additions are in regards to some of the rougher bits of Blogger 3.0 – the template WYSIWYG template editor.  Some sorts of widgets have been sorely lacking for some time.  Subscription links (for feeds) are new trivial to add to one’s Blogger sidebar.  Better for hackers, Google Gadgets can now be directly added.  The fact that this comes so close on the heels of OpenSocial is doubtfully a coincidence.  This opens Blogger up to a large number of new functionalities instantly.  Other new widgets include a search box, polls, and a sideshow widget for photos.

Videos are now just as trivial to add to posts as images.  A loss useful feature, but cool none the less.

Now for my favourite and most exciting feature – OpenID!  Yes, you read it correctly, the new Blogger (which could doubtless be dubbed Blogger 4.0) has support for leaving comments using OpenID!

This is exciting for a number of reasons, but largest of all is that this will soon expose THOUSANDS of people to OpenID.  This could easily take it from a geek tech to mainstream knowledge.

What is the point of getting that profile section in your sidebar marked up as an hCard? There are a number of reasons. Your blog will be compatible with the features of the new Operator Firefox Extension. If you ping Pingerati (or you’re indexed by Technorati), people will be able to find you on the hCard Search Engine. There are, obviously, other reasons as well.

What’s that? Blogger doesn’t output this markup by default, and you don’t want to learn the codes? No problem! Use my new hCard Profile Wizard and follow the easy two-step process to include an hCard-compatible profile in your blog!

Blogger now has an inline comment form that is native: http://buzz.blogger.com/2008/10/commenting-made-easier.html

Update 2007-02-08 : Contrary to a bit of a misunderstanding this hack DOES work with the new Blogger out of beta. If you can’t find the code try checking the ‘Expand Widget Templates’ checkbox. I have added a bugfix for the redirection bug some were experiencing.

The old inline comment form is dead to Blogger BETA (or, should I say, the new Blogger). Deader than ever, the form now does absolutely nothing.

Have no fear — there is good news!

Since we must use Blogger’s ugly comment page in some form (because of their new security token system), I wanted to include this in our pages somehow. I thought of making it inline, but discarded this idea because it would look rather dumb (since we can’t style that page) and would be displaying comments twice on the page, etc.

Enter lightbox. The following hack gives you a nice, integrated comment form that still appears somewhat separated (so visitors know you didn’t create that ugliness!). Visitors can close the ‘popup’ without commenting, but if they comment it will close and reload the page automatically. (See a demo on my test blog, but I can’t guarantee it will be there forever. My test blog is for testing and is therefore unpredictable.)

To install the hack, follow these steps:

1. Go to the ‘Template’ tab and select ‘Edit HTML’.
2. Check the ‘Expand Widget Templates’ box.
3. Add this code right before your </head> tag (if you have my calendar hack, or any other Lightbox Gone Wild for Blogger hack, installed, this step in unnecessary):
   
<script src='http://jscripts.ning.com/get.php?xn_auth=no&id=1093361' type='text/javascript'/>
<script src='http://jscripts.ning.com/get.php?xn_auth=no&id=2655847' type='text/javascript'/>
<link href='http://singpolyma.googlepages.com/lightbox.css' rel='stylesheet' type='text/css'/>

4. Find this code:
   
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

   and replace it with this:
   
<a class='lbOn' expr:href='"#comment-form-" + data:post.id'><data:postCommentMsg/></a>

5. If you do not use peek-a-boo comments or have a footer link pointing to the inline comments section (if you don’t know, you don’t) then find this code:
   
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>

   and replace it with this:
   
<b:if cond='data:post.allowComments'>
<a class='comment-link lbOn' expr:href='"#comment-form-" + data:post.id'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>

6. Find this code:
   
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

   And directly after it put this code:
   
<script type='text/javascript'>
var isLoad<data:post.id = 0;
function checkDeactivate<data:post.id {
if(isLoad<data:post.id > 1) {
//<![CDATA[
document.getElementById('lbContent').innerHTML = '<div style="text-align:center;width:100%;font-size:16pt;font-family:sans-serif;"><br /><br /><br />Reloading...</div>';
//]]>
window.location.reload();
}//end if isLoad
isLoad<data:post.id;++;
}//end function checkDeactivate
</script>
<div expr:id='"comment-form-" + data:post.id' style='display:none;'>
&amp;lt;iframe onload=&quot;checkDeactivate<data:post.id src=&quot;<data:post.addCommentUrl/>&amp;amp;isPopup=true#commentForm&quot; frameborder=&quot;0&quot; style=&quot;border-width:0px;width:100%;height:380px;&quot;&amp;gt;&amp;lt;/iframe&amp;gt;
<div style='text-align: right;'><a class='lbAction' href='#' rel='deactivate'><img alt='' src='http://www.ning.com/xnstatic/icn/cross.gif' style='display: inline; width: 10px; height: 10px;'/> Close</a></div></div>

7. Save your template

If you don’t use del.icio.us and want more posts showing up in your calendar try appending ?max-results=999 to your feed URL. So it will look like:
http://yourblog.blogspot.com/feeds/posts/full?max-results=999

So you’re not satisfied with just an archive list? You’ve perhaps switched to BETA and even the hierarchal menu just isn’t cool enough? Well, you’ve come to the right place.

This hack allows you to generate a calendar of your posts for people to browse inline in your blog! This hack works with either Blogger Classic or Blogger BETA and, best of all, is one of my easiest hacks to install yet!

Just go to the setup page. Enter your feed URL (do NOT use a FeedBurner feed, it tends to mess things up) and your blog title. Click generate. Follow the instructions.

Now, if you use mine (click the calendar next to the archives box in my sidebar) you’ll note that I have posts in the calendar going all the way back to forever it seems. Your probably only has this month’s. Well, that is just one extra hack, but there’s a catch — you have to be one of those who posts all blog entries to del.icio.us (I know, the BETA people no longer have a GM for that, I’m working on it.)

Go to the full del.icio.us feed setup page (I won’t steal your password!), enter your del.icio.us username and password in the upper form. Click Go. Go back to the setup page. Enter your username (and optional anchor tag) in the lower form. Click Go. Use the contents of your address bar as your feed URL for the calendar instead of your normal feed.

A translation of this page exists. Not sure on the language of that page, but thought I’d give them a link.

Dear Confused Reader,

You are reading this because much of the Geekery to come out of the Singpolyma – Technical Blog confuses you. The code is far beyond your comprehension, and sometimes so are the instructions. You are the one who emails me your template to hack, instead of hacking it yourself. That’s OK, and I’m willing to help, but in case you wanted to try doing a little bit more yourself….

Hoctro, another brilliant hacker, has written a sort of 101 (or is that 411?) post on hacking your blog, or at least following the instructions to do so. Complete with screenshots illustrating his points, this article will help you understand not only my writings, but those of other Blogger Hackers, forever.

Yours,

Singpolyma

Read Hoctro’s Post (Blogger BETA Only)

Other template-related posts by Hoctro