Super Tech Fun Pak Too

MORE CODE-BASED HACKS

Where some bloggers embrace scripts and theme-code mods, I seek ways to use Blogger's native features to automate and add new things to the page.

After all, Blogger should deliver its functional goodness without requiring us to know about the code behind it all.

Yet here are three useful hacks including some that use code. I didn't invent these, just passing them along.

This is a sequel to another collection of code-based Blogger hacks.

I use these, so would feel a hypocrite if I withheld them while preaching the gospel of No Coding Is Better. It should be, but sometimes it isn't.

Perfect fit for images

There is a neat little modification that makes your blog resize photos to fill exactly 100% of the available column width.

That involves adding a snippet of code into your blog using the Customizer (on the Theme page of your dashboard).

Blogger Kate, at Designer Blogs, gives a step-by-step. She provides two versions.

One operates on images inserted at a size that is wider than the column width (such as "original size"). The other resizes all images.

Each is a "global" change that will apply retroactively to every image in every post.

I was not able to test fully the second of those, all images. Consequently I do not recommend it: there could be complications

Although Kate walks you through adding the code for this directly into your theme, I recommend using Blogger's Customizer (Theme > Customize > Advanced > Add CSS).

Note well: The original image (that you upload) has to be wider than column width, or it won't be resized. Of course if you do not want it to be resized, there's nothing wrong with that!

Recent comments

Blog comments show, and promote, lively engagement. They are a reward you get for blogging.

By showing recent comments in your sidebar, with direct links to each of them, you invite your readers to participate in ongoing conversations.

There are several ways to do this, and one of them is simple and straightforward: use the Feed widget to display the most recent comment in your comments feed.

That feed takes the form of your blog address + "/feeds/comments/default." For example the comments feed for this blog is

too-clever-by-half.blogspot.com/feeds/comments/default

Drop in your own blog url for your comments feed. (And remember: you can't read a feed without a specialized reader, but code can.)

You can configure this widget to show up to five comments, which is probably a good number. Bonus: No coding required. 

Enough about me

But there's a problem. Because I reply to most readers, most of the comments in the feed are mine!

I'd rather show five comments strictly from readers. If people care about what I had to say, or the context, they can click to read the whole exchange.

One solution could be to use the output from a feed-reading or similar service to exclude yourself from the feed. The service will produce a new url to use in the Feed widget.

Another is to use a script.

Recent Comments Too

If you don't mind getting your hands dirty with code, you can modify and paste a "recent comments" script into an HTML/JavaScript widget.

Because it's a script, you can edit it to exclude whomever you like. I tell you how to do that below.

Also because it is a script, it is configurable in other ways. You can, for example, show or suppress the comment date, or the title of the post where the comment appears.

I do not know who wrote this script, but Helplogger has a version that dates from 2012. There are full instructions at the website.

Pay attention to them, because this does not run right out of the box.

(Warning: You'll see some intrusive pop-ups.)

Helplogger details the edits that you must make to configure the widget, including where to substitute your website url.

Be sure to specify the https:// protocol if that is what you have enabled for your blog.

But in addition to that, here's how to exclude your comments from the widget.

Excluuuude me!

Three more edits to Helplogger's code will exclude your comment from the widget.

First, locate the following line of code, about 5 lines in:

var o_rc = 100;

On a new line right after that, add the following:

var authname="YOURNAME"

substituting your Blogger display name for "YOURNAME."

Then locate the following code fragment a bit further on:

var t, n = e.feed.entry[r];

Start a new line after that (hit "return" after the semicolon) and paste the following:

if (authname==n.author[0].name.$t) {

 a_rc = 1 + a_rc;

}

else {

(The line returns I include don't actually signify. They are just to keep things a bit straight in that solid block of code.)

Finally, towards the end of the code, there is a place where there are three closing brackets together: }}}.

Add a fourth bracket. Then save the widget to your sidebar.

This solution is more customizable than the feed-widget solution in other ways as well. Nonetheless I think the main reason to use it would be to exclude your own replies from the comments shown.

Speaking of customization: At the end of the code, inside the <style>...</style> tags, are formatting instructions using cascading style sheets.

If you know, or learn about, this basic web technology, you can change the appearance of the widget by editing this section.

Other scripts

There are other scripts like this online.

Helplogger in particular has some variants that promise more options. However, they include some errors and typos that make them useless without further explanation.

It's simpler to just share my code fragment.

Also, that is what I actually use on my blog, and I'm more comfortable pointing to a solution I can vouch for.

But if you find a better version that works, and is clearly documented, let us know in comments!

Ok, Google

These functionalities are all useful enough that Google should add them into Blogger natively.

In the meantime, here we are.

If you liked these ideas, I've got more.

The cartoon computer is from Free Clip Art (CC BY-SA 4.0). I assembled the other graphics from free-to-use sources online.