Add post titles, thumbnails, and summaries to Older and Newer Post links

By default Blogger shows links to Newer Post, Home, and Older Post at the bottom of a post. There are hacks that add post titles to those links, couple by me, too, here's the latest: Add Post titles to Older and Newer Post links – reloaded. In one comment I was asked if it would be possible to display also thumbnail and post summary. It is.

I have installed this hack in my MS-potilas blog, which is in Finnish (you'll see the idea without understanding the language):

Demo

Installing the hack

You need to edit your blog's template. I use jQuery in this hack, so you need jQuery. If you already have it loaded, you can leave the first line out of the hack.

Open blog's template, and put this code before </head>:

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

If you have any previous hack for Newer/Older post links, remove it. Save the template and test.

Configuration

You can configure the following javascript variables:

maxSummaryLength - how many characters can summary text be
olderLink - contains the template for older link
newerLink - template for newer link
defaultOlderImage - if older post has no thumbnail, use this image instead
defaultNewerImage - if newer post has no thumbnail, use this image instead

In olderLink and newerLink templates you can use html and fields [title], [date], [datetime], [img], [thumburl], and [summary]. You can also edit the CSS to make everything look different. Hope you like this hack!

Small update (visual improvement) for my tabbed gadgets

I made my gadget tabifying widget back in 2011. Today I saw another implementation, and it had nice fade in effect. I remembered that I had used also jQuery in the tabifying widget, and that jQuery has nice functions for fading. So I decided to try and tweak it a little. The result can be seen on this blog: click on the tabs on right sidebar (for example, About me, Followers, Subscribe to) and notice the smooth transition. :)

(This won't work with nested tabs, but I don't recommend using them in the first place, because nested tabs can be confusing to user.)

If you have my tabbed gadgets hack installed, you can make the same changes. It is quite easy:

1. Open the tabifying gadget for editing. Make a backup of the working script before making changes.

2. Find line (near line 105):

  for(var i = 0; i<tabnav0_tabids.length; i++) {

3. after that add this line:

    if(tabnav0_tabids[i] == nimi) continue;

If you have multiple tab sets, and you have tabnav1_tabids instead of tabnav0_tabids, use tabnav1_tabids in the added line, etc.

4. Then find this block of code (near line 111):

  toshow = document.getElementById(tabnav3_id).style.display;
  document.getElementById(nimi).style.display=toshow;
  if(tabsIDs[nimi])
    document.getElementById(tabsIDs[nimi]).style.display = toshow;

5. Replace that block of code with this:

  $("#"+nimi).fadeIn(300);
  if(tabsIDs[nimi])
    $("#"+tabsIDs[nimi]).fadeIn(300);

6. Save the gadget.

If you want, you can adjust the fade in time, now 300 (milliseconds), I think 200 to 600 milliseconds is good range. Hope you like it! :)

Resize Blogger popular post thumbnails

I got a question in a comment how to change the thumbnail size in Blogger popular post gadget, in my Trim Blogger popular post snippets right article. Here's how to do it, hack is similar to my previous popular post hacks.

You must have jQuery loaded in your page for the script to work. 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>

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's html, just before </body>. If you have my other popular post hacks, like shuffle, shuffle and limit or Trim Blogger popular post snippets right, you can put this code in the same place, after those hack's code.

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

In the script there is the variable var newSize = 100; which defines the new size for thumbnails. You can set the new size smaller or bigger than the default size, which is 72.

Add Post titles to Older and Newer Post links – reloaded

When viewing a single 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...

Previous hacks

There are already some hacks to do this. One of the first is by ETBlue, here's that hack. It works very well, but it skews the stats: the loading of two extra posts by jQuery results in two extra stats hits for an opened post.

I did a hack, too, which adresses the stats problem, it is here. It uses somewhat different method to get the post titles: they are fetched from the blog feed, or generated from the blog url (=pseudo title), so no extra posts are loaded, so we have no stats skew. The problem is that is only gets real titles for 500 latest posts. Older posts get a pseudo title. 500 is sufficient in most cases. The script could be modified to get 1000 posts, or more, but it would take some time to load the feeds.

In a comment of my previous hack Duy Pham gave a link to his Older/Newer post title hack. He has an excellent solution for getting the titles from the blog feed: first get the index using publishing date of the post, then retrieve maximum of 3 posts (previous, this post and next post) from a feed.

Duy Pham's hack was so inspiring, that I started coding the thing same in jQuery (Duy uses javascript), and to be compatible with my previous hack. The result has 2 lines less code than the previous hack, and many more features:

Post titles to Older and Newer Post links – reloaded

Demo

Installing the hack

You need to edit your blog's template. I use jQuery in this hack, 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>

Then find </body> and insert this code (just) before it:

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

If you had the previous version installed, you can replace the old code. Save the template, and the hack is installed!

Configuration

You can configure the following javascript variables:

olderLink - contains the template for older link, you can use [title] in this
newerLink - template for newer link, you can use [title] in this
olderTitle - template for older link title, you can use [title], [date] and [datetime] in this
newerTitle - template for newer link title, you can use [title], [date] and [datetime] in this

You can use any html, too, for example you can use images. If you use the default olderLink and newerLink, you can also style classes .blog-pager-older-link-title and .blog-pager-older-link-title.

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;}
.home-link {left:0px;position:absolute;margin-left:250px;text-align:center;width:60px;white-space:nowrap;}

If you don't have Simple template, test and change styles if needed. Values for .home-link 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). Of course you can style everything quite differently than me, that's just CSS. :)

Hope you like this hack!

Customizable Author Box with post count

I got this request for an author box with post count in my blog's comments. An author box is something that is displayed after a post, and it shows info about the author who wrote the post. WordPress.org has many author box extensions, for example Author Box After Posts. There are some hacks for Blogspot blogs, too, but they are generally for single author blogs, and with no post count.

My Author Box has support for blogs with multiple authors, and post counts per author.

Demo

I must warn you, this hack suits best people who can do their own template customizations and basically already know their way around. These instructions have worked "as is" for Simple and Awesome templates, should work for all others, too, especially if you know you to adapt the code. Not for dynamic templates, though.

How to install

Installing is quite simple. Edit template HTML, expand widget templates. This hack uses jQuery, so if your template does not already have jQuery, add the following code in your template before </head>:

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

Then find: <data:post.jumpText/>, there should be only one instance. Few lines down from there is line:

<div class='post-footer'>

just before that line paste all this code:

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

This (+ possibly jQuery loading) is the only code you need to put into the template. Later I'll show you three snippets from this same code, don't put them in the template, just edit the previous code at those points. After pasteing the code to the template, you can save the template and see if there were any errors. You can also test the hack at this time. After that you must customize the hack to suit your blog and blog's authors.

Configuration

This hack works for both single author and multi author blogs. If you have multi author blog, you must set var multiAuthor = true; This setting can be true for single author blogs, too, but it is sligthly faster if you put false there for single user blogs.

With onePost and manyPosts variables you can localize the words "post"/"posts" or use other word like "article"/"articles".

There are more configurable things in javascript parts, but I'll tell more about them later.

HTML markup

This part defines the look of author box.

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

Author box html comes partly from the template, and author specific thigs are set by javascript. If you have a single author blog, you can put basically any html between <div class='post-author-block'> and </div>.

Just use <span class='authorinfopostcount'>0</span> where you want the post count to appear, and <span class='authorinfopostpost'>posts</span> where you want the singular/pluralis post word to appear. You can also use the same classes as in multiple author blogs, and you can use additional classes and make CSS for them as you wish.

With multi author blog, author specific information contains post count, author (profile) link, author avatar image, author description, and author name. So these can not be "hard coded" into the box, but they are set via javascript. Inside <div class='post-author-block'> and </div>, when you use the following tags + classes, their contents will be dynamically set:

<a class='authorinfolink'>somemarkup</a> this will link the text "somemarkup" to author profile link
<img class='authorinfoimage' src=''/> this will get author avatar
<span class='authorinfoname'/></a> author name will be put inside this span
<span class='authorinfopostcount'>0</span> and post count here
<span class='authorinfopostpost'>posts</span> this will be post/posts (singular, pluralis) according to how many posts author has
<span class='authorinfodescription'></span> this will be replaced by the author specific description, which can be plain text or complex html (but no scripts). Class can be used in div, too.

You can also add classes and CSS for elements if you wish. It is just basic template editing. And probably want to customize the CSS too, to get the box look like you want. CSS part is this:

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

Then in the javascript part, for every author or the blog you should set variable aut_desc['AUTHORNAME']. Element with class='authorinfodescription' will receive that description. You can use html here, put div's there, br's, links, imgs, pretty much everything, but not scripts. Now there is only some info about me and some dummy info, you can replace them with content that is relevant to your blog.

For every author or the blog you can (but it is not necessary) set/override auth_url['AUTHORNAME']. This way you can link author straight to his Google+ profile, or any other page you wish, instead of the blogger profile page. Here's the configuration part of the javascript:

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

I would have liked to get the author description automatically, but there is no feasible way of getting author profile descriptions in multi author blog, so the descriptions must be set in script. Positive side is that you can use any description you want, with links, images etc. Because descriptions could not be fetched automatically, I decided to leave the whole hack simple, so its users can customize the author box look themselves.

If anyone wants to develop this idea further, go right ahead. I'm not so good at making html/css, some of you will make this look much better. If you use it, please drop a comment so I can see what it looks like in your blog. :)

Youtube videos lazy load, improved style

I styled my previous youtube lazy load hack a bit so that the video description text is easier to read. Before it looked like this (this is an image, so no hover effect):

HTML needed to produce this is:

<div style="text-align:center;"><a class="youtube-lazy-link" href="http://www.youtube.com/watch?v=SFiWfrLEqPw" style="width: 420px;height:315px;" title="Click to play!"><b>Mozart Fantasy in C minor</b> played by me</a></div>

With the new style, it looks like this (actual embed):

Mozart Fantasy in C minor played by me

Here's the code, place it before </head>. If you had previous version installed, you replace it with this code. And as always, you can edit CSS styles to your needs.

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

This script is installed on this blog.

Automatic image caption from img title

I'm administering a Blogspot blog where some of the content uses img title tag to store image captions. Title tags are normally shown in a tooltip window, when user hovers the mouse over the image. There are some scripts around that display the image caption from image's title tag, but I decided to make my own. To get it quickly done, I used jQuery. This code goes before </head> tag, remove first line if you have jQuery already loaded.

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

Now you can use the following html markup on the page:

<img class="caption" title="Image title" src="./pics/pic.jpg" />

and it will dynamically be turned into something like this:

<div class="caption-wrap">
<img class="caption" title="Image title" src="./pics/pic.jpg" />
<p class="caption-text">Image title</p>
</div>

Use the classname "caption" and a title tag for those images you wish to autocaption.

Alignment and left/right margins are copied from img to the wrapping div, so horizontal positioning of the title paragraph is (should be) the same for basic image alignment options (centered or float left/right).

Here's a link to an example article with many auto-generated image captions, the blog is in Finnish, article is about prohibition: Nobel-palkitut ja huippupoliitikot vaativat huumeiden laillistamista.

Blogger post editor's "compose mode" has possibility to set image captions. But I think compose mode is not reliable, and so I mainly use the HTML editing mode. Also the HTML markup is much simpler using title tags and this script.

If you use this, you can adjust the script and the styles for your needs. This script can also be used outside Blogger.


Update January 21st 2013: Changed the script to use $(window).load() function instead of $(document).ready(), which makes sure that outerWidth function always returns the image width correctly. Line 31 was changed.

Hack to expand/collapse Blogger sidebar gadgets

Previously I made the tabbed gadgets hack, which can save space in blog's sidebar. This hack serves the same purpose, but a bit differently. With this hack you can make your sidebar gadgets vertically collapsible, using jQuery. I have used it on this blog on some gadgets, and here is...

a demo blog.

You can choose which gadgets you make collapsible, and make them either closed or open initially. You can also make gadget groups, from which only one gadget may be open at one time (in this blog the search gadgets, and in demo blog the profile gadget and "read more" gadget).

To install, you need to have some computing skills and know your way around. Edit your blog's template, and paste the following code before </head>. If you have jQuery already loaded somewhere in your template, you can leave out the first line.

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

Then you need to edit the window.load function at the end of the script. There you should add calls to cedgAddOpen or cedgAddClosed for all those gadgets that you want to make collapsible (and open or closed by default). Use gadget ID, preceded with #, or gadget title, as parameter. Using "#ID" is preferred method. You can easily see the IDs of the blog's gadgets at end of the template, when widget templates are not expanded.

To make a gadget group, pass several ID parameters to cedgAddOpen. The first ID's gadget will be opened initially, others closed. Example: cedgAddOpen("#Profile1", "#HTML1"); You can call cedgAddClosed again for the first gadget's ID if you want it initially closed, too.

Note: if you use also tabbed gadgets, you cannot collapse gadgets that are made into tabs.

As you can see in the CSS, the little plus and minus signs are implemented as base64 images. You can change them if you want, and they can be external images, too. Also other styles, and the gadget spacing, can be easily changed. You may also want to style the gadget titles (H2 element), I use a gradient there, here are instructions.

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.

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.

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.

Use new blank Blogger profile picture in comments

Blogger profile pages used to be like this (sample from Blogger documentation):

Profile pages changed to something like this a month or two ago:

If user hasn't set a profile image, then the "avatar blue" image is shown instead, like in the picture above. But in blogs' comments section, these users' avatars display the icon, not "avatar blue". With this little hack you can change these users' avatar icons in your blog's comments.

Blogger icon → avatar blue
First I suggest you install avatar for anonymous commenters, so you will have the avatar size right, and also mystery man for unregistered commenters.

Open your blog template html, edit widget templates. Find the widget block that begins with the following line:

<b:includable id='comments' var='post'>

Then find this line that ends the comments includable block:

</b:includable>

If you want the jQuery solution, insert this before </b:includable>:

<script type='text/javascript'>
//<![CDATA[
$("#comments-block img[src$='http://img2.blogblog.com/img/b16-rounded.gif'][width$='16']").attr("src", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMe3GlIVjxa4xDBtmfx3PDwZt5_lktr4-mckVsym6CloCvnnSIdJohcJTpsv7TwxNSsSV9Jf75GztpuKyjQRjcPRfm_cii6AjDEnM3xGHbLmjW-cDE1gKg0FKi12y2cIreqS960ujki70/s37/avatar_blue_m_96.png");
//]]>
</script>

(Double click to select for copying.) If you use jQuery, you need to have jQuery loaded somewhere in your blog's template page. Or if you want the non-jQuery solution, insert this before </b:includable>:

<script type='text/javascript'>
//<![CDATA[
if(document.getElementById("comments-block")) document.getElementById("comments-block").innerHTML = document.getElementById("comments-block").innerHTML.replace(/http:\/\/img2\.blogblog\.com\/img\/b16-rounded\.gif/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMe3GlIVjxa4xDBtmfx3PDwZt5_lktr4-mckVsym6CloCvnnSIdJohcJTpsv7TwxNSsSV9Jf75GztpuKyjQRjcPRfm_cii6AjDEnM3xGHbLmjW-cDE1gKg0FKi12y2cIreqS960ujki70/s37/avatar_blue_m_96.png");
//]]>
</script>

(Double click to select for copying.) Choose either, don't use both. "Avatar blue" image is uploaded to my Picasa web album, so different sizes can be fetched easily. This hack goes nicely with my recent comments hack, which is also able to substitute the icon with the "avatar blue".

Lazy load YouTube videos

Update Feb 26th 2012: new version here.

YouTube videos are easy to embed, and they may enrichen your blog. You may want to give user a wide selection of videos from which to pick the interesting ones.

But the more you have videos on your page, the slower it loads. Every video is hosted in an iframe, in which a flash from youtube is loaded, and flash loads the default picture for the video. For one video, it does not take too long, but for 20... Also, this consumes browser and flash plugin memory quite a lot.

I found this article about Lazy Loading Video To Speed Up Your Web Page. Using these ideas as a start and wanting to simplify the process (taking screenshots - too laborious), I developed my own "lazy loader" for single YouTube videos, to be used in my MS-potilas-blog. And the pages load now much faster, especially the labels which contain videos. This solution is not limited to Blogspot blogs, but can be used anywhere. Here is a jsfiddle based on this code for testing.

Nowadays the new YouTube embed code looks like this:

<iframe width="420" height="315" src="http://www.youtube.com/embed/eS67OxC_UN0?rel=0" frameborder="0" allowfullscreen></iframe>

Resulting this (normal YouTube embed):



Using lazy loading

So let's speed up our page load time. Once the lazy loading script is installed, to use lazy loading, use this kind of code for a video instead of the iframe code:

<a class="youtube-lazy-link" href="http://www.youtube.com/watch?v=3u8sEaohHMk">Jean Sibelius: 3rd Symphony, 1. Allegro Moderato</a>

Result (lazy loading):

Jean Sibelius: 3rd Symphony, 1. Allegro Moderato

or if you wish other size than default 560 x 315, do like this:

<div style="text-align:center;"><a class="youtube-lazy-link" href="http://www.youtube.com/watch?v=SFiWfrLEqPw" style="width: 420px;height:315px;" title="Click to play!"><b>Mozart Fantasy in C minor</b> played by me</a></div>

Resulting this (lazy loading):

Mozart Fantasy in C minor played by me

If you are lazy, too, and converting a lot of old youtube iframes to lazy loading links, you can also use the "youtube embed url" directly in the href, you don't have to convert it to "youtube watch url".

Default width is 560 pixels and default height is 315 pixels. You don't have to use style parameter, if you use the default size. Width and height can be copied from the embed iframe code to style parameter.

Use a descriptive text inside the link (artist, song name plus maybe (m:ss) length of the video), whatever you like. You can use a text in your own language to describe the video. If you use line break in the link text, start consecutive lines with &nbsp; to get consistent indenting.

If lazy loading code does not run for some reason (javascript disabled) or there is some error (script not installed?), then links to the youtube videos are shown as a fallback. Also in dynamic views only the link is shown. When script is run, link background is set to default image of the video, and a play button div is dynamically created over the link element. Script uses two external semi-transparent images, play button and an active (hover) play button.

When user clicks the link with the video image, the link is replaced by the iframe code, flash is loaded, and then video starts to play.

Here's another demo page (besides this post) with many videos: 11. joulukuuta.

Installing the lazy loader

Edit page/template html. Check, if you have jquery loaded (try searching for "jquery"). Find </body>, and paste this code just before it (leave out line 1, if you already had jquery loaded):

Update Feb 26th 2012: new version of the script here, you should consider using it.

Data provided by Pastebin.com - Download Raw

Embed parameters

If you want to have parameters in the embed code, just put them into href, like this:

Bach Contrapunctus I from the Art of Fugue, played by me<br />
<a class="youtube-lazy-link" style="width:560px;height:410px;" href="http://www.youtube.com/watch?v=bETMzZhunDI&rel=0&color=white&theme=light&showinfo=0">Bach Contrapunctus I from the Art of Fugue, played by me</a>

Resulting (lazy loading):
Bach Contrapunctus I from the Art of Fugue, played by me
Bach Contrapunctus I from the Art of Fugue, played by me

If you use showinfo=0, the script hides the link text. It is still good to use the link text, in case the script does not run for some reason, and for dynamic views, maybe for feeds, too.

Reference: YouTube embedded player parameters.

Feedback?

I'm very satisfied how the script works and how it speeded up my main blog, but could it be made simpler or somehow better? If you know jQuery, CSS, DOM, and have ideas for this lazy loading script, please leave a comment. Or if you have artistic skills, the transparent play png images don't look exactly the same as in YouTube... although images I use are quite good, they have smoother edges than YouTube's, even better than in YouTube? Share your thoughts.

I tested this with Internet Explorer, Firefox, Chrome, and Opera. Should work on other jQuery compatible browsers, too. CSS parameter background-size is not supported by all browsers, but the result looks also good on those browsers that don't.

Shuffle Blogger Popular Posts

Blogger's popular posts gadget is a great way to introduce more interesting topics in your blog to an occasional reader. The gadget uses blog statistics, and the most popular post (from the chosen period or all time) is displayed first, second popular is second, etc.

The gadget is really great, but I missed some features. If you have always the same list in the same order in your sidebar, users very quickly ignore it. But if you shuffle the entries, the list looks fresh every page load. And I could not tell, which one of my most popular posts is the best, they are all good ;) and so random order suits them better.

So my first hack (more coming along) for the Popular Posts gadget randomizes the order of the popular posts. You can install this by adding 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>.

Data provided by Pastebin.com - Download Raw

I use a simple but effective Fisher-Yates/Knuth shuffle to shuffle the posts. You must have jQuery loaded in your page for the code to work. If the script did nothing to your popular posts list, try adding the following code, which loads jQuery, in your template before </head>:

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

I'm very pleased with the result of the hack, and hope you like it, too. You can see a working example of this in my MS-potilas blog ("Popular Posts" is "Suositut artikkelit" in Finnish), and later I'll install this also on YABTB (now installed).

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>