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.

How to enable Blogger threaded commenting (on customized template)

Blogger announced threaded commenting today, as I wrote earlier. If you have customized your template, there is a chance that this threaded commenting does not work.

There is of course the possibility to reset the template, but then you loose all customizations. So here's how I could enable Blogger threaded commenting on blogs where it did not work, due to previous customizations.

First you should check, that you have embedded comment form enabled, and also full blog feeds. Without those settings the threaded commenting won't show. If they are ok, and still no threaded comments, you should edit the template.

Open template html for editing, and click "Expand Widget Templates". Find this code, it is either twice or four times in the template:

          <b:include data='post' name='comments'/>

Change every instance you find to this:

          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>

Save the template and test. If the previous changes were not enough, then you should see if this block of code is found, where threading javascript is included, and insert/modify it if necessary (search for <div id='comment-holder'>):

    <div class='comments-content'>
      <b:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threaded_comment_js'/>
      </b:if>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
    </div>

How to disable Blogger's new threaded commenting

As I wrote earlier today, Blogger has now threaded commenting. There are three ways (that I know) to disable Blogger's new threaded commenting, if you don't want it:

- Don't use embedded comment form,
- Disable per-post comment feeds in your blog, or
- Edit template html.

The easiest way is to change embedded comment form to popup or full page, or disable per-post comment feeds in your blog settings. But if you want embedded comment form and post comment feeds enabled, then you need to edit template. Note: these instructions do not apply to dynamic views.

For the template editing option, this has worked for me:

Open template for editing, and click "Expand Widget Templates". Find this block of code, which is there twice (for mobile and normal viewing), you can search for <b:if cond='data:post.showThreadedComments'>:

        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>

Change both the blocks to this:

        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<!--      <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/> -->
            <b:include data='post' name='comments'/>
<!--      </b:if> -->
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
<!--      <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/> -->
            <b:include data='post' name='comments'/>
<!--      </b:if> -->
        </b:if>

I.e. comment out the if-elses where "threaded_comments" are included, and include only "comments". Remember to do this twice, for both blocks of same code. To avoid extra javascript loading, search this line:

        <b:include data='post' name='threaded_comment_js'/>

and change to:

<!--    <b:include data='post' name='threaded_comment_js'/> -->

Save template. Now you should have the "good old" comments back with embedded comment form, and any modifications and hacks that were made to comments system.

Blogger has now threaded commenting

At least some sort of... Here's the announcement: Engage with your readers through threaded commenting. And this is how it looks like (in dynamic views – in non-dynamic view it is similar):


It has only two levels, and it could look a bit better, I think. But it is ok. It is activated if you have embedded comment form and full blog feeds enabled. When activated, other comment hacks, like my threaded commenting, don't work.

If you want my threaded commenting back on your blog, you can switch comment form to "full page" or "popup", instead of "embedded", in blog settings.

I will write some posts about how to enable this new feature on modded templates, how to disable it by editing the template (so you can switch back to embedded form without Blogger threading), etc. I'll get back after little more investigating. Stay tuned.

Add post titles to Older and Newer Post links

Update June 27th 2012: new version here, I suggest you consider using it instead of this.

When you open a Blogger blog post, there are links to Newer Post, Home, and Older Post at the bottom of the page. Unfortunately the Newer and Older post links only contain text "Newer Post" and "Older Post", not the actual post titles. Wordpress, from where I migrated to Blogger, can display the post titles. But not Blogger.

Already done, but...

I started thinking, if I could make a hack to display those post titles also in Blogspot blogs. Some googling revealed that this had already been done. I think ETBlue was the first author of that hack, here's Blogger forum post about that. Later it was repackaged and republished by Bloggersentral and WEB.SILOG.. The hack is quite clever, it uses jQuery to load the previous and next posts and uses jQuery selectors to get the titles. Good for me, I thought, saves the me trouble of making a hack.

...it skews the stats! 1 --> 3

After having the mod installed for a couple of hours I noticed, that I had many three-hit visits in my blog. Then I realised, that loading two extra posts by jQuery results in two extra stats hits for an opened post! That may not worry everyone, but I did not like that at all. So to the drawing board, after all.

My first version

So blog posts cannot be read from browser without causing stat hits. I uninstalled the ETBlue/WEB.SILOG./Bloggersentral hack and started devicing my own. My first quick & dirty solution was to parse the url, and create a "pseudo title" from that, so for example:

Url http://yabtb.blogspot.com/2011/11/return-of-better-recent-comments-gadget.html becomes "Return of better recent comments..." and http://yabtb.blogspot.com/2011/11/welcome-to-yabtb.html becomes "Welcome to yabtb". If url is so long, that it might be cut, it is cut once more (to make sure it is not full title) and ellipsis is added. See function urlToPseudoTitle in the hack source, if you need something like this.

This was quite nice solution and works especially on English blogs. And it is much faster than jQuerying two extra pages. I was satisfied for a couple of hours.

But then I noticed a glitch in my Finnish blog. In Finnish language there are letters ä and ö (a with dots, o with dots), which are converted to "a" and "o" in the post url. So if I have title "Monet kipulääkkeet lääkekannabista koukuttavampia", and its url is http://mspotilas.blogspot.com/2012/01/monet-kipulaakkeet-laakekannabista.html, the pseudo title becomes "Monet kipulaakkeet...". Pseudo title is still readable without the dotted letters, but is a bit funny. Once again, back to the drawing board...

The solution

Script cannot read blog posts without stats hits, but it can read blog feeds. Actually I did already something like this in my recent comments gadget: load the post feed and collect post url - post title pairs, to be later used to convert urls to post titles.

It is possible to read up to 500 entries at a time from the Blogger feeds. Most blogs aren't that big, so the limit of 500 entries will be most of the time sufficient. But one could easily add another line to the script to fetch entries from 501 to 1000. And as a fallback, if script did not get post title from feed, for reason or another, it creates a pseudo title from the post url (see previous chapter). Reading the feed entries might take some milliseconds, so the script is executed (0,5 seconds) after page is fully loaded, so it won't slow down page load.

Demo (this blog)

Installing the hack

This hack is quite easy to install, although it requires template editing. I use jQuery in this hack, mainly for simplicity (much easier to execute something at window load, select elements, etc.). So you need jQuery. Check your template, and if it does not have jQuery, insert this before </head:>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>

The previous/next links need some styling, so that post titles fit better. For example something like this in Simple template; add these to the styles section of your template (or use Template Designer|Advanced|Add CSS):

.blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;}
.blog-pager-older-link {background-color:transparent !important;padding: 0 !important;}
#blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;}
#blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}

If you don't have Simple template, test and change styles if needed. Then find </body> and insert this code (just) before it:

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

Save the template, and the hack is installed!

Fine tuning Home link position

Home link is not centered on blog's front page, last page, newest post and oldest post. Add this CSS to center the link properly:

.home-link {left:0px;position:absolute;margin-left:250px;text-align:center;width:60px;white-space:nowrap;}
#blog-pager {min-height:2em;}

Values work with 560px wide text area (250x2+60=560), change accordingly if needed. If "Home" text is very wide in your language, you may also have to change the values (test and see if it works).


Hope you like this hack! It is installed for example in this blog.

Update June 8th 2012: Blogspot uses local domains (like "blogspot.fi") in next/prev links but not in feed. I added two lines to deal with this: lines 34 and 41 are new.
Update June 27th 2012: new version here.

URLtinyfy - a JSONP API for tinyurl.com, goo.gl, etc.

Shortened urls, of blog posts for example, maybe useful in some places (like Twitter). I started first making a hack for Blogger which would offer the reader shortened url(s) for the posts. I came across ggl-shortener and json-tinyurl, which could be used to make goo.gl and tinyurl.com short urls in client side (javascript). But these both Google App Engine applications suffer from overrunning quota, especially json-tinyurl, but sometimes also ggl-shortener.

I think they both simply forward every request to the url shortener services, which always results in url fetch call, and url fetches are quite limited per day in Google appengine. My hands were already itching to make a new appengine app and to excercise my new Python skills, and I thought I could do the url shorting a bit cleverer. And at least have (for my url shortener hack) a service that is not yet, hopefully ever, suffering from quota problems.

Presenting urltinyfy

So I created a new appspot app, urltinyfy, which offers more or less the same APIs as ggl-shortener and json-tinyurl, at least should be compatible. As a bonus there is also support for safe.mn, although they have their own jsonp API so it is a bit redundant. I also coded bit.ly support, but because it needs bitly API key, and they have own jsonp API, I left it out from the "production version". Safe.mn and bit.ly was mainly implemented because I wanted to see if and how it could be done.

My application uses memory cache, so if shortened url is already fetched, it is returned from the cache and no url fetch is needed. This should lessen the possibility to run out of free quota (of url fetches).

I have coded this entirely from a scratch, I have not used any code from ggl-shortener or json-tinyurl. I'm not sure if I'm going to publish the source code of this application, we'll see about that. :)

Parameters

url:  the url to shorten (best to be urlencoded). Only mandatory parameter.
callback or jsonp: the callback function, if jsonp is used
unify: if 1, json will include tinyurl and longurl fields for all services (easy to use, independent of the service), and will pass through title and callID parameters, if found

Usage

If you now use ggl-shortener or json-tinyurl, you should be able to switch to my app with minimal changes, by changing the urls in your javascript like this:

change http://ggl-shortener.appspot.com/?url=... to http://urltinyfy.appspot.com/googl?url=...
change http://json-tinyurl.appspot.com/?url=... to http://urltinyfy.appspot.com/tinyurl?url=...

As alternative "syntax", http://urltinyfy.appspot.com/googl?url=... is the same as http://urltinyfy.appspot.com/?service=googl&url=..., and accordingly with other services.

If you want javascript examples how to use this, do google searches for "ggl-shortener" and "json-tinyurl". I might use this in some url shortening hack later on.


Problems? Suggestions? Please leave a comment.

Thumbnail on main page, bigger image on full post

You may have seen those fancy templates, that display on the main page a snippet of the post's text along with a thumbnail of an image inside the post. Maybe you want something like that only from time to time, so installing a new template for that would be overkill and maybe constrains your other options. I will show you how you can do it with a little javascript or CSS for example in Simple template.

Trim Blogger popular post snippets right

I have done some "tweaks" for the popular posts gadget, and here's another cosmetic one. The gadget cuts the post snippet at a fixed character index, so it can cut words in half, which is quite stupid. It would be much better to cut the post text at a word break. This little hack I made does that, using jQuery.

Sometimes little things matter. :)

You can install this hack by adding an extra HTML/Javascript gadget in your sidebar, or paste the code to an existing gadget (the gadget must be after the popular posts gadget!). Or you can put this code in your template html, just before </body>. If you have my Shuffle or Shuffle and limit hack for popular posts installed, put this code in the same place, after that hack's code.

Data provided by Pastebin.com - Download Raw

You must have jQuery loaded in your page for the script to work. Script, installed also on this blog, won't cut the text smaller than 42 chars. Hope you like it.

Tip: By modifying the jQuery path '.popular-posts ul li .item-snippet' you can apply the same technique to other text-ill-cutting gadgets, too.

Comments feed changed and Recent comments update

I found out that comments feed no longer contain the direct link (so called "alternate link") to those comments, that the comment author has deleted. I.e. those, where it reads "This post has been removed by the author.". Comments feed used to have links to all comment entries, but no longer does for these deleted ones.

This affected my recent comments gadgets. I have updated their source code in their posts.

Better Recent comments gadget for Blogger: line 69 is modified, line 76 is new.
Return of the Better Recent Comments gadget: line 121 is modified, line 128 is new.
(newest) Son of the better recent comments gadget: line 124 is modified, line 131 is new.

If you experience recent comments disappearing if there is a new author-deleted comment, please update the gadget, just two lines need to be changed. Another quick fix is to permanently delete the author-deleted comment from the blog's admin comments section.

Make a jump break jump to where you want to

Jump breaks are great, but the jump target is not always what you want: exactly at the place where <!--more--> was. Maybe you'd like to show the whole post instead. Here is a simple tip to alter the target position. You have to use the html editing mode for these hacks to work.