Floating Widgets in a Blogger Post

(Note: Those of you using ad blockers will need to turn them off to see examples in this post.)

In my last post, I explained what to do if your JavaScript widgets, added to the body of a post in your Blogger blog, weren't displaying. But doing that didn't solve all my problems and may not solve all yours. If your widgets are aligned to the left (or right if you write in a right-to-left language) and put an ugly break in all but one line of text beside them, this tutorial is for you. While I've only tried this with Amazon widgets, it should work with any copy-and-paste widgets with a preview page.

This   is what an Amazon widget looks like when it's an inline element, which the MP3 Clips widget is by default. It's fine for small images that are used as icons or to display foreign scripts that the user may not have fonts for, but it's ugly for images of any significant size, as well as for video embeds and most Amazon widgets.

For a narrow widget to look good, it has to be on one side of the main panel, with the text wrapping around it. I choose the left side, since the sidebar is on the right and it makes the layout more balanced overall. For a wider widget, it's best to center it with no text on either side.

The ideal solution would be if widgets up to, say, 500 pixels wide had text wrap around them, while wider widgets didn't. Unfortunately, CSS selectors can't affect widgets less than or greater than a specified width, only those exactly equal to a specified width. Worse, widgets come in so many forms — some are <embed>s, some <object>s, some <div>s — that no one simple selector can catch all of them and only them.

Thus, you'll need a separate CSS rule for each new type and size of widget, and to build it, you'll need Mozilla Firefox with the DOM Inspector (both free downloads). Open Firefox and navigate to your widget setup page. Set up the widget the way you want it, then open the DOM Inspector (in the Tools menu or Ctrl-Shift-I).

In the View menu, uncheck Show Whitespace Nodes. This isn't essential, but it reduces the amount of clutter you have to deal with. Also remove the ID and Class columns; they're redundant and will get in the way. To remove columns, click the icon in the upper-right corner of the left panel.

Near the Inspector window's upper left corner, you'll see the toolbar icon . Click it, then go back to the Firefox window with your widget preview. Because of a long-standing bug in the DOM Inspector, you may not be able to select the widget itself this way, so instead click a point just outside the widget.

Maximize the Firefox window, then switch back into the DOM inspector. Resize the DOM Inspector window (you'll usually want it short and wide) so that the widget is visible. Widen the nodeName column if necessary until you see a name on the highlighted row and a little triangle pointing to it. This represents the HTML tag that contains the widget. Click the triangle. It should now point down, and some new rows should appear below the highlighted one; these are the selected tag's children (that is, tags and blocks of text inside it). One of these children, or one of their descendants that can be revealed by clicking more arrows, will be the widget. Click on them until you get a blinking red rectangle lined up with the widget's borders. This is the widget.

Now look in the right-hand pane. You should see a Local Name and some properties listed under nodeName and nodeValue. Each nodeName is the name of a property, and each nodeValue is its value. For the rest of this tutorial, when I say for example "the class", I mean the nodeValue in the row where the nodeName is class.

It's time to build your CSS rule. You'll need a property that will be unique in the page where you put the widget, except for other widgets that you want to format the same way.

If one of the properties is named "class", then this will make the job easiest. Your CSS selector is

x.y

where x is the Local Name and y is the nodeValue that appears under "class".

If it's "id", that's another good choice, but make sure the id isn't the same for any other widgets on the same page even if they are to be formatted identically. The id has to be unique to be usable. If you do have a unique id, your selector is

x#y

where x is the Local Name and y is the id.

If you can't use id or class, use a different property such as width. Your selector is

x[y="z"]

where x is the Local Name, y is the chosen property's name and z is its value.

Now to add the CSS rule to your stylesheet. If you're using Blogger, log into your blog and click Layout, then Edit HTML. Search (you can use your browser's find-on-page function for this, usually by pressing Ctrl-F) for <b:skin> (including the angle brackets) then for a curly bracket { after the b:skin tag. Then, back up to the blank line before it and insert two new blank lines. In the screenshot below, the highlighted line is where you want to add your new rule.

First, add the selector you came up with above. Then, below it, if you want your widget to be on the left side of your post, add the following:

{
  float: left;
  padding-right: 1em;
  padding-bottom: 1em;
}

If you want it on the right side, add "right" instead of "left." And if you have a widget you want centered, add the following:

{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  display: block; 
}

If you have several widgets that use different selectors but the same formatting, make them part of the same rule and separate them by commas, like so:

embed[width="250"], div#amzn_widget, object.widget_20
{
...
}

Save your changes, and your widgets should now be laid out properly!

Floating Widgets in a Blogger Post