Pages

Saturday, December 31, 2011

11

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", "http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/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, "http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/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".

Thursday, December 29, 2011

120

Son of the better recent comments gadget

Here is the newest version of my recent comments gadget (here is the previous version). Previous version still works, so if you have it installed, you don't have to update if you don't want to.

What is new?

Earlier this month Blogger added comment authors' avatar (profile image) urls to comment feed. This new version uses those urls to get the avatars, instead of using my google appengine application to get avatars from profile pages, as the previous version does.

As an added bonus in this new "Son" version, avatar size can be adjusted easier using a configuration variable, and I give you two additional CSS styles for the gadget.


Features of my recent comments gadget

You can configure:
  • number of recent comments displayed
  • max number of comments per post (so one post's comments don't "flood" recent comments)
  • length of comment excerpt
  • translation or own version of gadget's texts
  • customize what is displayed.
Also:
  • blog author's comments can be styled differently (CSS)
  • display comment author's site favicon, comment author's Blogger profile image, or mystery man icon (configurable) for non-registered commenters
  • does not have the bugs the recent comment gadget that Blogger offers has.
The newest version, "Son of the better recent comments gadget", adds the following new features:

The Script

Add a HTML/Javascript gadget to your blog, and paste the following code into it. If you had previous version installed, replace it with this, and make the same configuration changes you made to the previous version. I'm sorry that there is no automated upgrade, but this is no rocket science, I'm sure you can do it. :) Know your way around.

Data provided by Pastebin.com - Download Raw

Script configuration

There are some CSS definitions at first, which can be changed to your liking. After that there comes javascript code and configurable variables. Here is a list of the variables and a short explanation.

numRecentComments: how many comments you want displayed
numPerPost: how many comments per post max is the goal (will fallback when necessary)
maxCommentChars: how many chars max in excerpt of comment
maxPostTitleChars: how long post title can be, or 0 (=don't cut title)
txtWrote: header text, links to comment
txtMore: footer text, links to comment
txtToolTip: text to be shown when mouse hovers over comment
txtAnonymous: "Anonymous" username localized, or empty if English text "Anonymous" is to be used
getTitles: if true, fetch titles from post feed; if false, titles are generated from url
trueAvatars: if true, uses Blogger avatars (Blogger profile images) from comment feed, not just the blogger favico [B]
urlMyAvatar: especially if trueAvatars = false, set here the url to your avatar image
urlMyProfile: if you don't have a profile gadget on page, put your profile url here!
urlAnoAvatar: anonymous avatar, you can change from mystery man to a custom one, if you want, possibly this
maxResultsPosts: can be empty or &max-results=### where ### is number of posts to get from posts feed to get titles
maxResultsComments: empty or &max-results=### where ### is number of comments to get from comments feed

New configurable variables in "Son"

cropAvatar: crop avatar to square (true) or stretch (false) to square
sizeAvatar: size of avatar in x and y direction, pixels
urlNoAvatar: comment feed offers the icon (Blogger logo) for those Bloggers who have not set their profile image. You can override the icon with this setting (default: ).

txtWrote, txtMore and txtTooltip

These can be just normal text. If txtWrote is normal text, it is preceded by commenter name. So if txtWrote is "wrote..." the result would be Jason wrote..., if Jason was commenting.

All texts can also have simple variables, which are: [title], [user], [date], [time], [datetime] and [date format]. [title] is substituted by Post title, where comment belongs. [user] is substituted by commenter name. [date] displays date in current (user's computer's) locale, [time] displays time and [datetime] date and time in user's locale.

format in [date format]

In format some character combinations are substituted:

yyyy=long year, yy=short year, MM=month(01-12), dd=monthday,
hh=hour, mm=min, ss=sec (time/hours in 24-hour clock)

but format can contain also other text/characters (which are displayed as is).

"Written [date MM/dd/yyyy hh:mm]" could become "Written 11/03/2011 08:30".

Again, the script has good configuration defaults, so if all this was too complicated for you, you don't have to care about it. If you don't have a profile gadget on your page, put your profile url in the code I provided, and you're ready to go. If you have a profile gadget, then you don't have to change anything, just copy and paste.

Styles for different avatar sizes

Default size for avatar is 16 pixels. If you change, the CSS might need some adjusting. In the picture in the beginning of this post there are three examples, first the default (16 pixels), then 20 pixel avatars, and then 24 pixel avatars.

Styles for 20 pixel avatars:


...

var sizeAvatar = 20;

Styles for 24 (and larger) avatars:


...

var sizeAvatar = 24;

This gadget is installed on this blog with 16 pixel avatars. My MS-potilas blog has this gadget with 20 pixel avatars.

If you set the urlNoAvatar, you might want to change the icon also in the comments block, where the actual comments are (below the post). I have a hack for that, too, see: Use new blank Blogger profile picture in comments.



Problems in Internet Explorer?

By default many Blogger templates have set Internet Explorer to use EmulateIE7. IE7 emulation has some bug with blog feeds in foreign languages that can make the gadget not show properly. You can fix this by editing the template, find line:
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
(or something similar with text "EmulateIE7"), and change it to:
<meta content='IE=EmulateIE8' http-equiv='X-UA-Compatible'/>

Update Jan 2nd 2012: Deleted comments (This post has been removed by the author.) no longer have "alternate" link in comment feeds, like they used to, which can cause the recent comments to disappear. I modified the script to prevent this: line 124 is modified and line 131 is new.

June 6th 2012: Optional hack: If you don't want to show your own comments in recent comments, check this hack.

August 1st 2017: To fix avatars, please change lines 157 and 158 (article code is updated).



Wednesday, December 21, 2011

0

Christmassy Concentration Memory Game

If your blog's readers celebrate christmas, why don't you publish them a nice memory game to play on holidays? I tidied one javascript game a bit, made it work on Blogger and also on dynamic views, worked even in a Feedburner feed. With christmassy pictures it looks like this:



Free JavaScripts provided by The JavaScript Source


If you do it under 1:30, that's quite good.

Here is the source for the game. This can be put in a blog post (use html editing mode), a blog page, or some other html page. Probably works in a html/javascript gadget, too. If you wish, upload another set of pictures, and change the image path in the source to use those pictures. Have fun.

Data provided by Pastebin.com - Download Raw

Tuesday, December 20, 2011

2

Comment feed has now Blogger avatars

I added avatars to my recent comment gadget using a helper application coded in Python. Blogger has updated its feed format now in December 2011, and comment feeds now include also author avatars (author images) for Blogger users. The update is of course because of the dynamic views – I think everything dynamic views can display comes from feeds (unlike in the "traditional" blogger views).

This is great, and at the same time, will render my avatar fetching application pretty much obsolete. Although it will still work.

I found out about this feed update reading Aratina Cage's Last Comments blog. There's some impressive work, I recommend to check it out: very versatile recent comments gadget, and the new InComm, which looks great.

I will later modify my recent comments gadget to use these new author images from feed, instead of the Python app, and will then post the new version. Stay tuned.

Monday, December 12, 2011

3

Shuffle and limit popular post gadget post count

First look at these two previous articles about customizing popular posts gadget:

Shuffle Blogger popular posts and
Excluding specific popular posts in Blogger.

If you exclude posts from popular posts gadget, then you don't have exact count of popular posts – the count depends on how many excluded posts were in the list.

With this hack you can shuffle and then limit the count of popular posts. If you already have installed the shuffle hack, replace it with this code. You can put this code in a HTML/Javascript gadget, or in html template before </body>.

Data provided by Pastebin.com - Download Raw

This hack is installed on this blog, I use 10 popular posts, from which I exclude the current post user is viewing, and some others. Then the list is shuffled and limited to 8 entries. Modify the popcount variable in the script to get a different amount of posts. In my MS-potilas blog I use five popular posts, picked from ten posts minus some possible excluded posts.

Sunday, December 11, 2011

1

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):


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.

Thursday, December 8, 2011

27

Excluding specific popular posts in Blogger

Popular posts gadget is great. But sometimes it might display entries, that you don't want to advertise (anymore). For example, some post made for testing may be popular, but there is no need to show that to users. Or you might have an old and a new version of some article in the popular posts, and you don't wish to display the old one.

When editing your blog template, you should know you way around to not to break your blog.

To exclude posts, first write down the urls of the posts you want to exclude from popular posts. Then edit template html, expand widget templates, and find:
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
Just after those lines add one line per post to be excluded, a line like this:
<b:if cond='data:post.href != &quot;http://yabtb.blogspot.com/2011/09/dummy-post-8th-post.html&quot;'>
Then find (in the same popular posts code block):
      </li>
      </b:loop>
Between those two lines, put one:
</b:if>
for each excluded posts, so if you exclude 3 posts, put 3 </b:if>s, like this:
      </li>
</b:if>
</b:if>
</b:if>
      </b:loop>

I have omitted the indentation of the added lines in purpose, so they "stand out" better and can easily be spotted and edited.

Excluding the post that user is currently viewing

Find:
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
After that add:
<b:if cond='data:post.href != data:blog.url'>
And add one </b:if> after the </li> line, like in the previous chapter.

You may want to shuffle the popular posts, too. Or maybe shuffle and limit the post count to certain number (like a random set of five posts from the ten most popular minus currently viewed post) – maybe more about that later.

Sunday, December 4, 2011

8

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).

Thursday, December 1, 2011

32

Gadget tabifying widget for Blogger

Sidebar gadgets may be an important part of your blog. There are literally hundreds of different gadgets you could have in your blog. But the size is kind of limited, if you have too many, users might not scroll pages after pages to see what gadgets there are. I have had one hack in mind, that would collapse/expand single gadgets, when user clicks on the gadget title, to save space so user finds the gadgets easier. I started playing around with this idea, hiding and showing the gadget divs... And then I realized...

If I have say four subsequent gadgets, and I hide three of them and show only one at a time, it is like showing one page of four gadget pages. And a good UI component for selecting one of several pages is "tabs". So my idea of one hack turned into another: tabbed sidebar gadgets (I still might do the collapsing gadgets some day, too).

Some coding, and my javascript widget that tabifies other gadgets (gadget tabifying widget) was ready for testing. Look at this picture:


See how much vertical space is saved! A couple of these tabifying gadgets, and your new sidebar could be just a fraction of the old sidebar. You can see a working demo in my other blog, MS-potilas (blog is in Finnish). Later when I have time I will install these tabbed gadgets on this blog, too.
(Dec 4th 2011: installed on YABTB.)

The tabifier script

You have say 2–5 gadgets that you want to tabify (turn into "tabs"). Place a HTML/Javascript gadget just above them, and in the gadget put my code. You may give the gadget a title for housekeeping, by default the script hides it when run.

Script does not need jQuery library, which is often used in making user interface tabs. I wanted a clean and light, low level approach, and learn more, so I coded it just using CSS/html and javascript without any libraries.

Data provided by Pastebin.com - Download Raw

Script configuration

There are some configurable variables in the beginning of the script. But first, if you use more than one set of tabs in your blog, for the second gadget, you must do a search and replace, and replace all instances of "tabnav0" by "tabnav1" (and "tabnav2" in third tab set, etc) in the script.

Configure the number of gadgets you want to tabify. By default the tab titles are taken from gadget titles, which are then hidden by the script. Short titles are preferred, so the tabs don't span on several lines, which does not look good, works though. If you want, you can specify the tab titles in the array tabnav#_tabtitles, so you don't have to shorten the titles of the actual gadgets.

You can also style the tabs using CSS. Every tabset has different IDs and so can have different styles. I've added some simple grey gradients to the tabs, which I made using my gradient png data URI maker, but the tabs look ok without gradients, too.

Nested tabs

My tabbed gadgets can be nested. But if nested, the gadget that contains another tab set must always be the last tab of the "upper" tabbed gadged. And also increase the two z-index values by one in CSS of the inner tabifier script(s), so they are rendered better. I suggest you to not use nested tabs, because the user interface might get confusing to the blog reader.

Another tabify gadgets implementation, using jQuery

I googled for other tabbed gadgets' implementations, and found one at Blogger Sentral: The easiest tabbed content widget for Blogger, demo here, which looks very good. It uses jQuery to draw the tabs and is quite different from mine. You might want to check out that one, too, and decide whether use that script or mine. There is also much other interesting stuff @ Blogger Sentral.

New info January 30th 2012: Gadgets with iframe and Internet Explorer 9

This hack hides "hidden tabs" (gadgets) using CSS display:none. In Internet Explorer 9 for some reason, if gadget has an iframe, it won't be shown. You can specify your blog to use Internet Explorer 8 document mode, if you have iframe-containing gadgets you want to tabify. I.e. in the <head> section, there should be line:

<meta content='IE=EmulateIE8' http-equiv='X-UA-Compatible'/>

Or don't tabify iframe containing gadgets. If you do, make sure you test it with Internet Explorer. This might be related to this feature, but my script is not altering the DOM, only visibility, so I'm not sure. If you have some clue why it does not show in IE9 document mode, please let me know.



A small visual update, May 6th 2013:: Fade in effect for tabs, see the hack.


Sunday, November 27, 2011

3

CSS styling with gradients

A little while ago I made my gradient PNG data URI tool for the comment bubble CSS. Gradients can be used many ways in CSS. I just styled two elements on this blog, the sidebar gadget titles, and the search button(s):


I just quickly made some gradients using the colors in my blog – and here is the CSS for these:
.sidebar .widget h2 {
padding:1px 0 1px 3px;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAABCAYAAACbv+HiAAAABHNCSVQICAgIfAhkiAAAAGRJREFUKJGdkkEOgCAMBGf5/0t8nF/QA7ExUJfKiZQJ7YStzoMLBGr0U4DQU8ddC0bCZFi8e3EZls2RYeOcbffJwbmPvZz72qHknvh9u+d+pZw23eecfL4q/t+vHXPui3yzHbsBQ9wD/WdajeAAAAAASUVORK5CYII=) 100% 100%;
}
input.gsc-search-button {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAcCAYAAACgXdXMAAAABHNCSVQICAgIfAhkiAAAACFJREFUCJljeLeK4T/Tj18MDEzffzEw4GH9xCtLLAufKQB+SDdFA0XBigAAAABJRU5ErkJggg==) 100% 100% !important;
}
(double click to select for copying)

Tuesday, November 22, 2011

6

Second quickedit pencil for Blogspot post

I have sometimes chased the quickedit pencil from the bottom of the post, to edit the post. Especially if you have many comments on a long blog post, the pencil is somewhere in the middle of the page, and can be a bit tedious to find. I have often thought, that only if the quickedit pencil would be at the top of the post...

Yesterday I saw a feature suggestion in Blogger forums for a second quickedit pencil. So someone else had chased the pencil, too. :) This finally gave me the push to make this simple hack. It adds a second quickedit pencil to the upper right corner of a post.


Installation is easy. Open your template html, click Expand Widget Templates, find line:
<b:includable id='post' var='post'>
And just after that line, add this:
<!-- extra quickedit pencil / MS-potilas -->
<span style='float:right;margin-right:-25px;'><b:include data='post' name='postQuickEdit'/></span>
or add this, if you want the extra pencil only to appear when post page is opened (not shown on front page):
<!-- extra quickedit pencil / MS-potilas -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span style='float:right;margin-right:-25px;'><b:include data='post' name='postQuickEdit'/></span>
</b:if>
Save template.

Note, that quickedit pencils are displayed only when administrator is logged in and viewing the blog. So you won't see the pencils on this blog, just on your own blog(s).

Monday, November 21, 2011

4

Fine tune your blog's Google custom search

If you use custom Google search in your blog, you may find these tips useful. Excluding pages by meta robots and robots.txt affect also custom Google search results, but here are some tips and hacks to further fine tune your blog's custom Google search, or Custom Search Engine (later CSE), search results.

Open search results in the same window

By default CSE gadget opens the results in new window (link target="_blank"). To change links open in the same window (target="_top"), edit your CSE search gadget code and find line:
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
After that add line (double click to select for copying):
customSearchControl.setLinkTarget(google.search.Search.LINK_TARGET_TOP);

Set thumbnail for a post

Automatic thumbnails were introduced to CSE a little while ago. For some posts you may want to define the thumbnail manually. For example, I have some posts with picture slideshow, and automatic thumbnailing does not find the slideshow pictures, but I can specify the thumbnail manually instead. The easiest way is to use "meta thumbnail" in the post text. Edit post as html and add following code (double click to select for copying):
<meta name="thumbnail" content="http://lh3.googleusercontent.com/-fY4i0d-wN2A/Tmtet0g4_pI/AAAAAAAAAUs/lNXWTbdvAzs/s288/leskenlehti.jpg" />
Use your own image url in content. I use the "s288" size from Picasa web albums, that should not be too big or too small. You can specify the meta in body text (post text), even if the documentation says it must be in head section, reference: Custom Help Search forums.

No thumbnail for a post (or a page)

Edit post (or page) text in html, add this code to text (double click to select for copying):
<!-- <PageMap><DataObject type="thumbnail" /></PageMap> -->
Be careful not to use the Compose tab – if you switch from html to Compose mode and back to html, the html comments (and so also the PageMap) are gone.

No thumbnail for archive pages

You can set a page to have no thumbnail using a PageMap. For example, to remove thumbnails from archive pages, open template html, find line <b:include data='blog' name='all-head-content'/> and put this code before it (double click to select for copying):
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
&lt;!-- &lt;PageMap&gt;&lt;DataObject type=&quot;thumbnail&quot; /&gt;&lt;/PageMap&gt; --&gt;
</b:if>

Excluding pages from CSE search results

These exclusions are made in CSE control panel. Select Sites, Excluded sites, click Add sites. For most times the selection "Exclude just this specific page or URL pattern I have entered" is best.

To exclude all archive pages, use pattern: *.blogspot.com/*_archive.html
To exclude a static page, use url of the page.
To exclude all static pages, for whatever reason, use pattern: *.blogspot.com/p/*.html

Sunday, November 20, 2011

1

Block robots from specific page(s) in a Blogspot blog

If you want to have your blog indexed by search engines, you might still have some pages in your blog that you don't want the robots to crawl. You cannot control robots.txt file in Blogger, but you can use conditionals and "meta robots" to restrict individual pages from well-behaving robots (like Google).

For example, I have EmailMeForm contact form, which I have set to redirect to a "thank you" page after the form is submitted. I decided to block this static "thank you" page from being indexed.

To block a static page, put this code somewhere in the template html "<head> area" (before </head>), for example before line <b:include data='blog' name='all-head-content'/>:
<b:if cond='data:blog.url == &quot;http://BLOGURL.blogspot.com/p/PAGE.html&quot;'> 
  <meta content='noindex,nofollow' name='robots'/>
</b:if>
Fix the url http://BLOGURL.blogspot.com/p/PAGE.html to actual url of the page in your blog (in my blog it was http://mspotilas.blogspot.com/p/kiitos_09.html).

Note, that the above code itself does not hide single posts very well, only static pages, because posts are listed on front page and archive pages, too, where search robot would get the contents of the post.

You could turn off the indexing of post archive pages, like this:
<b:if cond='data:blog.pageType == &quot;archive&quot;'> 
  <meta content='noindex,nofollow' name='robots'/>
</b:if>
I have not tried this one, but it might trim down the number of search results, which may be desirable. If you use Google CSE in your blog, you can trim down the CSE search results by excluding *.blogspot.com/*_archive.html url pattern from CSE Sites, but that is another story.

And this is how to hide all static pages, whatever the reason may be, from robots:
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <meta content='noindex,nofollow' name='robots'/>
</b:if>

Saturday, November 19, 2011

0

Custom Google Search / CSE and automatic thumbnails

I have replaced the non-working sidebar search gadget with custom Google search or Custom Search Engine (CSE – why must they have all these different names for things, and CSE also stands for Custom Search Element...) and a gadget (or widget) for that: How to add Custom Google Search to your Blogspot blog. Also my navbar search is hooked to this CSE search.

Last week or so I noticed (in my MS-potilas blog) that the search results included thumbnails. Very good looking. Here's a post about automatic thumbnails in Google Custom Search blog: Thumbnail images in search results -- no work required!

This YABTB blog has not many pictures, but here's one example, search results with search gadget and CSE gadget:


It may be that default search gadget, which is based on Google blogsearch, will get thumbnails eventually, too, but until then I think CSE search results are way better looking than the default gadget's. Even if the default search gadged works for you, thumbnails for search results might be the reason to choose CSE instead.

Friday, November 18, 2011

1

Combined CSS and image comment bubbles

This article concludes my three part comment bubble article series. If you want comment bubbles in your Blogspot blog, you can pick one these three hacks.

1. Comment bubbles using only CSS
2. Comment bubbles using an image
3. Combined solution, which uses CSS whenever possible (installed in this blog)

As I explained in the CSS only comment bubble hack article, Internet Explorer does not support all CSS needed for rounded comment bubbles with gradient background. And the support varies from version to version.

Internet Explorer 8 and lower

I start with the "CSS only" hack installed, and then add there stuff for different Internet Explorer versions.

IE8 and lower don't have rounded corners and IE7 does not support :after, so I decided simply to use a comment bubble image, when IE version is lower than 9. First I thought that I'll use conditional comments like this:

<!--[if lt IE 9]>
..stuff for ie versions below 9..
<![endif]-->

But after trial and error I found out that it was not so easy. I learned that the browser version number does not actually determine the CSS capabilities, but the document mode (compatibility mode) instead. Well at least in Blogspot blogs, and that's where I'm targeting with my code.

I finally came up with this solution for IE (documentMode) < 9:

<!--[if IE]><script type='text/javascript'>
if(typeof document.documentMode == 'undefined' || document.documentMode < 9)
document.write('<style type="text/css"> a.comment-bubble { background:url(http://lh6.googleusercontent.com/-IVVxPuuguig/Tr_NWRIN3HI/AAAAAAAAAWs/weLvk3eWQtM/s800/comment_bubble.jpg) no-repeat;width:36px;height:26px;border:0;padding-top:3px;} a.comment-bubble:after { border:0; };</style>');
</script><![endif]-->

That code is placed somewhere after template stylesheet and before </body>. The javascript is seen and runs only on IE. If documentMode < 9 (IE8, IE7, ...), new style definitions are written: bubble background uses an image, set width and height, no border and right padding, and for a:after remove the border that made the triangle. Basically make comment-bubble use same styles as in the image comment bubble hack.

Internet Explorer 9

As we saw in the CSS only comment bubble hack, IE9 does quite well with the comment bubble CSS: only the gradient background is missing. There is a filter provided by Microsoft to make gradients, but that messes the rounded corners. There are workarounds for that, too, but I chose another way: I made a gradient background image and encoded it in base64 to make a data URI, so it could be directly embedded in CSS without external file. Background image is correctly clipped by the rounded corners.

So the comment bubble CSS became:

Data provided by Pastebin.com - Download Raw

Line 15 is new (compared to CSS only solution) and contains the gradient for IE9. Because it is before the background gradient definitions, they override it on browsers that support gradients. And on IE8 and below the background is later reset to use an image (see previous chapter).

The discovery of data URIs base64 gradient PNG lead me do a simple linear gradient tool for making embeddable gradient backgrounds.

Complex solution?

So, is there any point in this complex solution, one might ask. Well, to be honest, I don't know :) You might prefer to use either CSS only or image only solution, for simplicity. I could also have used either, but this way I learned more. In a year or two Internet Explorer will do CSS comment bubbles, too, and then these browser version dependend hacks won't be needed anymore.

Thursday, November 17, 2011

9

Comment bubbles for Blogger using an image

Similar hacks have been available before, this one adds nothing new or special to them, except the CSS code may be a bit tidier. Some might want to use this in their Blogspot blog for its simplicity: the same version gives same results in all browsers, and the CSS code is not long.

In this blog I use a combined method that uses CSS3 whenever supported, so this image comment bubble hack is not installed in this blog, instead a combination of this hack and the CSS3 comment bubble hack, more about that in this post.

Add comment count code

First we will add the link to "post.url#comments" next to the post title. Open your template html, and expand widget templates. Find lines:
<b:includable id='post' var='post'>
  <div class='post hentry'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
After those lines add (doubleclick to select for copying):
<b:if cond='data:post.allowComments'><a class='comment-bubble' expr:href='data:post.url + &quot;#comments&quot;' expr:title='&quot;Comments to &amp;quot;&quot; + data:post.title + &quot;&amp;quot;&quot;'><data:post.numComments/></a></b:if>
Save the template.

Add CSS for comment bubbles

If you want to have own bubble image, first you need to upload the comment bubble image to some server, to your Picasa web album, for example, and get its url address. I use this image uploaded to my Picasa web album, its url is http://lh6.googleusercontent.com/-IVVxPuuguig/Tr_NWRIN3HI/AAAAAAAAAWs/weLvk3eWQtM/s800/comment_bubble.jpg.

Then go to Template designer, choose Advanced, Add CSS. Add the following simple CSS definition:

Data provided by Pastebin.com - Download Raw

Change image url, if you want, and image width and height. Paddings can be changed to change text position inside the comment bubble image. Apply to blog – comment bubbles are installed.

0

Pure CSS3 comment bubbles for Blogger

A week ago or so I implemented the comment bubbles for this blog. There are some comment bubble hacks for Blogger that use image, but I found none with CSS3 bubbles, so that is what I started from. I show in this article, how you can make CSS3 comment bubbles like this for Blogger.

"Pure" in this context means that I don't use images. I really don't know much CSS so I don't know if the product-dependent -webkit-, -moz- and -o- style settings are "pure CSS3" or not.

Browsers like Firefox, Opera and Chome already support CSS3, and soon also Internet Explorer will, so you might already want to have this clean CSS only solution in your blog. It also loads a bit quicker without external images that cause http request. This CSS solution degrades to quite nice looking and usable element on Internet Explorers (version 9 and below), too, see the end of this article.

Because CSS3 is not fully supported by Internet Explorer versions below 10, in this blog I expanded this CSS only solution to use image in IE8 and below, and CSS + gradient data URI in IE9. So this CSS only hack is not installed in this blog. I'll tell you about "pure image comment bubbles" and the combined solution in later articles.

Add comment count code

First we add the link to "post.url#comments" next to the post title, where link's text is the number of comments in that post. Open your template html, and expand widget templates. Find lines:
<b:includable id='post' var='post'>
  <div class='post hentry'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
After those lines add (doubleclick to select for copying):
<b:if cond='data:post.allowComments'><a class='comment-bubble' expr:href='data:post.url + &quot;#comments&quot;' expr:title='&quot;Comments to &amp;quot;&quot; + data:post.title + &quot;&amp;quot;&quot;'><data:post.numComments/></a></b:if>
Save the template.

Add CSS for comment bubbles

I chose the colors for my bubbles like this, you might want to use some other colors that suit your template:


Go to Template designer, choose Advanced, Add CSS. Add the following CSS:

Data provided by Pastebin.com - Download Raw

Apply to blog. And you have your CSS comment bubbles!

This hack and Internet Explorer

In IE7 and below the bubble is only a rectangle with borders and solid background color.
In IE8 the comment bubble has solid background color and no rounded borders.
IE9 does quite well, only the gradient background is missing (background is solid color).

Wednesday, November 16, 2011

0

Gradient PNG data URI maker reference

As I mentioned when I posted the new version of my AppEngine application, I also added a new feature to the application. When I was implementing the comment bubbles, I learned about data URIs (or data: URIs). Data URI is a Uniform Resource Identifier. URLs are URIs, too, only data URIs do not contain address to the data, but instead the data itself. For example, small images! Data URIs are supported by all major browsers and by Internet Explorer version 8 and higher.

Read more, blog article: Data URIs explained.
Convert any data to data URI: The data: URI kitchen.

I implemented the button gradient for IE9 using gradient PNG data URI. I made the PNG with GIMP, saved without any extra data, run "base64 gradient.png", added "data:image/png;base64," in front of the output and there was my data URI for CSS. Still, quite a lot of work, for example if you change colors, you have to do this all over again. I tried to find a tool to automate this, but did not find, so I implemented it in my Google AppEngine application.

The gradient tool uses url parameters, although I have also made a front end tool for it. Url parameters work like this:

http://avafavico.appspot.com/?c1=C1C1C1&c2=C2C2C2&h=H&w=W

C1C1C1 is top color (or left color in horizontal gradient), 000000-FFFFFF
C2C2C2 is bottom color (or right color in horizontal gradient), 000000-FFFFFF
H is gradient image height, integer 1-4096
W is gradient image width, integer 1-4096

Example: http://avafavico.appspot.com/?c1=ff0000&c2=0000ff&h=10&w=30
Gradient:
Data URI: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAKCAYAAACjd+4vAAAABHNCSVQICAgIfAhkiAAAACVJREFUOI1j/M/A8P8HAyfDdwYOBnrSTAwDBEYtHrV41OKhbzEAzUMfE4HBrHkAAAAASUVORK5CYII=

Usually either H or W is 1 to optimize png size, and image is repeated to make it fill the whole background of an element, in the example h=10 so the image can be seen better, but in production version you would use h=1. H x W cannot be more than 4096, but this should be sufficient.

You don't and cannot embed the call to gradient tool into your template or page. Instead, you use the tool, get the data URI and put that in your template/page.

Tuesday, November 15, 2011

1

My Google App Engine Python application evolved

Couple of weeks ago I made my first Google App Engine application, using a new language for me, Python. It is made to fetch Blogger user avatars using Blogger userID. It worked/works ok, but I did some improvements to code, some structuring and formatting, generalized tag searching from html, etc.

Yesterday, as a deviation of making the comment bubbles, I added a completely new function to that application: a tool to make gradient PNG data URIs, which can be used in CSS, for example. The avatar part of the application functions just like before. I will tell you more about the gradient PNG data URI tool later in another article, and the comment bubbles, too, but here's the revised code (in my versioning it is version number 4):

Data provided by Pastebin.com - Download Raw

Again, if you have any ideas for the code, please comment. There was a minor html bug (which did not affect functionality) in the previous version, also one "None" comparison made with "==", unnecessary parenthesis, etc, and nobody told me! :)

Updates:
2011 Dec 14th, v4.01: Load also the new default icon from "www.blogger.com"
2011 Dec 18th, v4.02: Increased timeout from 5 to 15 in loading blogger profile pages, also handle download errors.
2012 March 14th, newest version 5 here.

Tuesday, November 8, 2011

12

Welcome to YABTB

Welcome to my Blogger tips and hacks blog. This is a real sticky post, without date hassling. Learn how you can make real sticky posts in your Blogspot blog. See also these hacks and tips of interest:

50

Real Sticky posts for Blogger

Sticky post(s) can be useful in a blog, as a featured post, as a notification of an upcoming event, some general info about blog, etc. Again, Wordpress, from where I migrated to Blogger, has this feature. And Blogger does not.

There has been two "hacks" around, until now, to make kind of sticky posts in Blogger, but both have big problems. But maybe one of them suits you, so I'll tell you about these shortly.

Date hack - not good

Publish your post. Edit the post after publishing, under Post Options set post date to somewhere in the future (for example year 2020). Now this post will be the first post in your blog, until 2020 or until you edit the date.

Problem: Messes blog's RSS feed. Your sticky post will be the latest post in the feed until 2020, and so people won't see updates from your blog in services that use RSS. This is bad.
Problem: Your post shows that it is published in the future. You can make code to hide the date but it gets complicated.

Gadget hack - not good

Go to Design, Page Layout, add HTML/Javascript gadget to page, and move it to just above the posts section. Don't give the gadget a title, write your sticky "post" in HTML to look as a post. One variation of this is to edit template html and put the "post" there.

Problem: It is not a post. You cannot comment it. You cannot see it in blog archives. And it does not appear in your Blog RSS feed, either. So for example, if you announce some upcoming event this way, your feed followers won't see it, unless they open your blog page.
Problem: your gadget/template html is shown on every page in your blog, unless you add some code to show it only on the first page, and this gets complicated.

Here is my gadget sticky post hack, with the latter problem solved. It may be a good solution for some blogs, so check it out, here's a demo.

Real sticky posts - excellent!

Sticky post should be a post, with normal publishing date, appearing in Blog feed. It should be easy to make a post sticky, and make a sticky post normal. Sticky posts should have a way to look different from normal posts.

My solution fulfills these requirements. Script pulls the sticky posts from the blog feed, so blog feed must be enabled in blog's settings. And also because blog feed is needed, my sticky posts hack don't unfortunately work in private blogs. You can control posts' sticky state simply by giving post a label, default is "sticky" but you can change that if you want. You can set how many sticky posts are shown at most, and if more "sticky" labels are found than this amount, then the newest posts are shown.

Installation

Edit template html. Put this code just before </body>.

Data provided by Pastebin.com - Download Raw

Normally posts posted in same day are grouped together in Blogger layout templates, into same div element. Because of this, if you post a sticky post and a normal post with same date, also the normal post is removed from the page when sticky post is removed and placed on top of the page. To prevent this, you may want to install a simple hack to show dates on all posts, which breaks down the "daily groups". But if you never post two posts in the same day, or edit the sticky posts' dates to be different from any other post, then it is not necessary.

Configuration

You may edit the CSS styles for stickies-container and sticky-post, and configure the following javascript variables:

stickyLabel: the label which turns a post into a sticky post
maxStickies: maximum number of posts displayed as sticky, 1-20 (don't overdo it)
showDate: show date or not, you may want to hide it
showTitle: show post title or not
showFooter: you may want to hide the whole footer
showPostedBy: show Posted By text in footer
showCommentLink: show link to comments in footer
showLabels: show post labels in footer
showStickyLabel: show also the sticky label in the labels list, or hide it
showEmailPost: show Email Post button
showShareButtons: show the sharebuttons group or not
showShareEmail: show email button in sharebuttons
showShareBlog: show blog button in sharebuttons
showShareTwitter: show twitter button in sharebuttons
showShareFacebook: show facebook button in sharebuttons
showSharePlusone: show plus one button in sharebuttons
widthPlusone: you may want to limit this, small enough and text disappears
txtComment: singular form, used in sentence "1 comment", just the text, without number
txtComments: plural form, used in sentence "# comments", just the text, without number
txtPostedBy: text in Posted by, can have variables [user] and [time]
txtLabels: text preceding the labels list
txtMore: "Read more »" text for posts with a jump break.
dynamicMore: if true, jump break text (after "more link") is revealed dynamically
txtHideMore: text of the link to hide "more text", if dynamicMore is used (true)

Using a jump break in a sticky post may be a good idea, so that the sticky post don't become too tall. With variable setting dynamicMore=true the rest of the sticky post is revealed dynamically, which looks great and is faster than a full page load.

You can move the CSS style declarations to body section of the template, if you want, and add more styles to style the sticky posts (know your way around).

Thursday, November 3, 2011

18

Return of the Better Recent Comments gadget

Update Dec 29th 2011. You might be interested of the newer version: Son of the better recent comments gadget.
---
Just few days ago I made a javascript gadget for Blogger that displays recent comments similarly to the Recent Comments in Gadget directory, but better. Also has some extra functionality, and bugs fixed, of course.

I did not stop there, I now present the newest "Return of the Better Recent Comments". Who would not like to have recent comments like these two examples? (right one is in Finnish, from my MS-potilas blog)


Features

- all options and features that my previous version had
+
- displays either anonymous (mystery man) icon, site favicon or blogger profile icon
- you can customize "header" and "footer" and tooltip text
- your (blog author) comments can be displayed differently (CSS styling)
- more options to make this suit also bigger blogs
- I think I forgot something...

To get the blogger avatars, I had to make a Python app with Google App Engine (here is the newer, current version), because it is not possible to get them by only javascript. Blogger avatars can be turned off to make gadget run faster, site favicons will then still be used (for example, B icon for Bloggers).

Here is the code. You can put this in HTML/Javascript gadget.

Data provided by Pastebin.com - Download Raw

Configuration

There is some CSS at first, it can be changed to your liking. After that there comes javascript block and configurable variables. Here is a list of them and a short explanation.

numRecentComments: how many comments you want displayed
numPerPost: how many comments per post max is the goal (will fallback when necessary)
maxCommentChars: how many chars max in excerpt of comment
maxPostTitleChars: how long post title can be, or 0 (=don't cut title)
txtWrote: header text, links to comment
txtMore: footer text, links to comment
txtToolTip: text to be shown when mouse hovers over comment
txtAnonymous: "Anonymous" username localized, or empty if English text "Anonymous" is to be used
getTitles: fetch titles from post feed; if false, titles are generated from url
trueAvatars: fetch blogger avatars from profile page, not just blogger favico
urlMyAvatar: especially if trueAvatars = false, set here the url to your avatar image. A bit faster, if set.
urlMyProfile: if you don't have a profile gadget on page, put your profile url here!
urlAnoAvatar: anonymous avatar, you can change from mystery man to a custom one, if you want
maxResultsPosts: can be empty or &max-results=### where ### is number of posts to get from posts feed to get titles
maxResultsComments: empty or &max-results=### where ### is number of comments to get from comments feed

txtWrote, txtMore and txtTooltip

These can be just normal text. If txtWrote is normal text, it is preceded by commenter name. So if txtWrote is "wrote..." the result would be Jason wrote..., if Jason was commenting.

All texts can also have simple variables, which are: [title], [user], [date], [time], [datetime] and [date format]. [title] is substituted by Post title, where comment belongs. [user] is substituted by commenter name. [date] displays date in current (user's computer's) locale, [time] displays time and [datetime] date and time in user's locale.

format in [date format]

In format some character combinations are substituted:

yyyy=long year, yy=short year, MM=month(01-12), dd=monthday,
hh=hour, mm=min, ss=sec (time/hours in 24-hour clock)

but format can contain also other text/characters (which are displayed as is).

"Written [date MM/dd/yyyy hh:mm]" could become "Written 11/03/2011 08:30".

Script has good configuration defaults, so if all this was too complicated for you, you don't have to care about it. If you don't have a profile gadget on your page, put the profile url in the code I provided, and you're ready to go. If you have a profile gadget, then you don't have to change anything, just copy and paste.

As usual, the gadget is installed on this blog.

Note: If you install this on a very high traffic blog (thousands of hits per day), I suggest you to make your own Google App Engine application to get Blogger avatars (see this article), as I'm using the free version and it might get slow on heavy load. I don't know if it will, we'll see. Or if it gets slow, just turn Blogger avatars off (trueAvatars = false), or use the newer version, which does not use the App Engine application.

Problems in Internet Explorer?

By default many Blogger templates have set Internet Explorer to use EmulateIE7. IE7 emulation has some bug with blog feeds in foreign languages that can make the gadget not show properly. You can fix this by editing the template, find line:
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
(or something similar with text "EmulateIE7"), and change it to:
<meta content='IE=EmulateIE8' http-equiv='X-UA-Compatible'/>

Update Dec 29th 2011. Newer version here: Son of the better recent comments gadget.
Update Jan 2nd 2012: Deleted comments (This post has been removed by the author.) no longer have "alternate" link in comment feeds, like they used to, which can cause the recent comments to disappear. I modified the script to prevent this: line 121 is modified and line 128 is new.

Wednesday, November 2, 2011

3

Google App Engine Python tool to get Blogger avatar

Blogger avatar, or Profile image, is hard or even impossible to get using javascript. In data feeds there is only profile page link, but not the image on that profile page.

To get the image, one should open the profile page, parse the html, find profile image url, and use/load it. This cannot be done in Javascript, because profile page is in different domain (blogger.com). So I did it with Google App Engine. That was quite a trip: completely new programming environment and I did not know much about Python, but I managed to get done what I wanted. Phew!

My profile page: http://www.blogger.com/profile/05137522196636058302
My avatar image: http://avafavico.appspot.com/?userid=05137522196636058302

You can try it on your user id (or any other's) in this post, if you like.
Blogger userid:  

I was going to use the avatar in javascript application as 16x16 picture, so I shrank the Profile pictures to 32x32 to minimize net traffic. Avafavico is just a name... First I thought it could also return favicons to urls that are not blogger profile, but then decided not to reinvent (http://www.google.com/s2/favicons?domain=) the wheel, after that the working name was BlogAva, but that domain was taken.

Here is my Python code. I don't write Python well, so any suggestions how to optimize or make the code better, are welcome! :) Thanks.

Data provided by Pastebin.com - Download Raw

A newer version of this Python application is here.

I've used this online application/tool in my newest recent comments gadget, which can be seen on this blog. I'll tell you another day how that is done.

Monday, October 31, 2011

23

How to autopost to Blogpost from RSS

Autoposting from RSS feed(s) is a much asked feature in Blogger. I will tell you here one way to accomplish this without third party services. You'll need some computing skills, I won't explain everything in detail, details can be found in other documentation.

First of all, you need the RSS feed or feeds, where the articles appear that you want to republish. You can combine multiple feeds into one using Google Reader, if you wish: group feeds together in a folder and make folder feed public and shared. But you don't have to combine feeds, multiple feeds are ok as is.

Don't steal other people's work. Before publishing content written by other's, you should ask permission for it, otherwise your blog may be reported and terminated. But maybe you want to aggregate your own posts from many blogs to one blog. And this can be done from other/mixed environments, like Wordpress.com, too, and to a hidden blog (visible only to you). Not from hidden blogs, though, because you need the feed. If you republish your own material, that is ok of course.

Blog settings and setting up rss2email

In the blog you want to publish, go to Settings | Email & Mobile. Set your secret email posting address by providing a secret word. Choose "Save emails as draft posts". You can change that to "Publish emails immediately" after you have directed feed(s) to blog and have everything working.

Rss2email is a free tool for delivering news from RSS feeds to email. Python is needed to run rss2email. Rss2email can be run in Windows and different UNIX systems.

Download, install and configure rss2email. I had to change the outgoing mail server settings and the email address of sender (DEFAULT_FROM) in config.py. I also configured rss2email to use html (HTML_MAIL = 1) and not to use stylesheet (USE_CSS_STYLING = 0).

In unix console, change to rss2email's directory, and execute commands:

./r2e new YOURNAME.YOURSECRETWORDS@blogger.com
./r2e add http://yourfeedurl.com
./r2e add http://yoursecondfeedurl.com
./r2e add http://yourthirdfeedurl.com

In Windows you would run r2e.bat instead of ./r2e. You need at least one feed url. Now you have your feed(s) ready for sending to blog.

Sending old (current) entries or not?

If you want to start feeding your blog with only new entries in the feed(s), run first:

./r2e run --no-send

That marks all current feed entries read. Afterwards run ./r2e in regular basis, for example from crontab.

If you want to send all entries, run "r2e run" already at the first time. But beware, there is a limit of about 30-50 posts you can send to Blogger in one day. One way to limit the posts is to add one new feed per day for the publishing email.

You can also publish single posts from a feed using Google Reader. View a post from the feed, select Send To, Blogger.

Double titles hacked away

To prevent "double titles" (first article title, then title with a link to the source) in the receiving blog, I did the following changes to rss2email.py (version 2.71), first around line 717, search for:
      content += '<h1'
      content += ' class="header"'
      content += '><a href="'+link+'">'+subjecthdr+'</a></h1>\n'
Add # in front of all 3 lines:
#      content += '<h1'
#      content += ' class="header"'
#      content += '><a href="'+link+'">'+subjecthdr+'</a></h1>\n'
and around line 748, search lines:
        content = ("<html><body>\n\n" + 
                  '<h1><a href="'+link+'">'+subjecthdr+'</a></h1>\n\n' +
                  entrycontent[1].strip() + # drop type tag (HACK: bad abstraction)
                  '<p>URL: <a href="'+link+'">'+link+'</a>' )
Add # in front of one line, like this:
       content = ("<html><body>\n\n" + 
#                  '<h1><a href="'+link+'">'+subjecthdr+'</a></h1>\n\n' +
                  entrycontent[1].strip() + # drop type tag (HACK: bad abstraction)
                  '<p>URL: <a href="'+link+'">'+link+'</a></p>' )

If you have different version, then you might have to change something else. The purpose of the changes is to remove <h1> title+link from the beginning of the email body.

Run rss2email automatically

And finally I added a crontab entry (crontab -e) to run the script once an hour (33 minutes past full hour), like this:

33 * * * * cd ~/rss2email-2.71/ && ./r2e run

In Windows you would use the Windows task scheduler and run r2e.bat. See more instructions in rss2email/getting-started-with-rss2email.

I have also subscribed the feeds to my Google Reader, so I decided not to publish the emailed articles immediately, but as a draft. This way I can also do some minor adjustments to the article before publishing, or choose not to publish the article at all.

Sunday, October 30, 2011

13

Better Recent comments gadget for Blogger

Update 12/29/11: A new recent comments gadget with avatars is installed on the blog, you might consider using it instead of this gadget.


Blogger Gadget directory has two recent comments gadgets, Top Comments by Ziyush and Recent Comments by Blogger Buster, but both suffer from same problems.

Bug: the anchor of the link to the comment is broken. It should be ...showComment=COMMENTID#COMMENTANCHOR but it is ...showComment=COMMENTID#comment-COMMENTANCHOR. When you have many comments, it would be really nice if the link took you to the right comment, not to the top of the page.

Bug: sometimes gadget does not show anything, sometimes load times are long. Annoying.

Bug/feature: Strings cannot be translated. I don't want in my Finnish blog to have texts "wrote..." and "Continue >>", but "kirjoitti:" and "Lue lisää >>" instead.

Bug/cosmetic: styles don't look good, not the same as in blog (for example all links are underlined).

Missing features: CSS cannot be modified. Post titles cannot be used. Customization very limited.

Missing feature: Always gets x number of chronologically latest comments, but what if you wanted the latest comments all from different posts, or if you wanted maximum of 2, or 3, comments per same post, to prevent one topic from "flooding" the recent comments?

Own gadget to the resque

Because of all this, I first used RSS feed gadget for displaying recent comments, until yesterday, when I started developing something better. My goal was to make a gadget, which has working link anchors, customizable CSS styles and allow translating the strings and allow other modifications, too.

Along the way I added the possibility to limit comments count per post to 1...[number of recent comments shown], and that is actually really great. You can also choose not to limit, when the 5 recent comments are fetched regardless of their posts. And, because I think no one had done it before in a javascript gadget, I also fetched the post titles for the comments :) Although I only use those in link titles (shown when user hovers over the link), but you can edit the code and show it in the link, for example, like "Gary commented on We're back in business!...".

Load times are way better and no "blank recent comments" have been detected with my gadged.

To use it, add HTML/Javascript gadget to your blog, and paste following code into it:

Data provided by Pastebin.com - Download Raw

This gadget is installed in this blog, too. In the gadget there are some easily configurable things, and of course you can change anything in the code, if you can...

You can configure CSS styles, number of recent comments (numRecentComments), length of comment excerpt (numCommentChars), maximum comments per post (numPerPost), texts (txtWrote and txtMore), and whether to load titles or not (getTitles; not loading them makes the gadget run yet a tiny bit faster).

If you want to customize the code, you can, but I hope you know your way around and can do it on your own.

Hope you like it! I do, but now I just cannot make up my mind, whether to set numPerPost to 1 or 2, with 5 recent comments... both good choices... Which would you use?
Update 11/02/11: This hack is no longer installed in this blog. I developed it further. I will post the new Recent comments in a while, stay tuned.
Update 11/03/11: A new gadget with avatars is installed on the blog.
Update 12/29/11: A new gadget with avatars (fetched differently) is installed on the blog.
Update Jan 2nd 2012: Deleted comments (This post has been removed by the author.) no longer have "alternate" link in comment feeds, like they used to, which can cause the recent comments to disappear. I modified the script to prevent this: line 69 is modified and line 76 is new.
See the hack
for this dynamic
views icon: