Turn a link into a button!

Here’s a demonstration:
Hover, press, release, and leave
and it works with tabover too! Go to my page to find out more and download the necessary files.

Patch for Archive Style (Hierarchy, Rounders template)

Do you use a Rounders Series template? How about a Hierarchy style archive list? If you answered both with "yes," chances are that you've noticed a slight difference in that list from other lists in your sidebar. No arrow bullets. No dotted lines. Boring! But check MY archive list. Go ahead. Scroll down the page and check the sidebar. See you soon!

Back? OK, notice anything different about my achive list? That's right. Nicely formatted. And now you can add this widget to your sidebar and get formatting that's taylor-made for your particular Rounders template. Select from the list below, click the button, and follow the instructions.

Rounders
Rounders 2
Rounders 3
Rounders 4
<style type="text/css">&#10;.sidebar ul.posts li {&#10; background:url("http://www.blogblog.com/rounders/icon_arrow_sm.gif") no-repeat 2px .25em !important;&#10; margin:0 !important;&#10; padding-top:0 !important;&#10; padding-right:0 !important;&#10; padding-bottom:3px !important;&#10; padding-left:16px !important;&#10; margin-bottom:3px !important;&#10; border-bottom:1px dotted #bbbbbb !important;&#10; line-height:1.4em !important;&#10; text-indent:0 !important;&#10; }&#10;.sidebar li.expanded, .sidebar li.expanded ul {&#10; margin-bottom: 0 !important;&#10; padding-bottom: 0 !important;&#10; }&#10;.sidebar li.collapsed {&#10; border-bottom:1px dotted #bbbbbb !important;&#10; }&#10;.sidebar ul a:first-child+a+span+ul {&#10; border-top:1px dotted #bbbbbb !important;&#10; }&#10;* html .sidebar ul ul {&#10; border-top:expression(this==this.parentElement.getElementsByTagName("ul")[0]?"1px dotted #bbbbbb":0);&#10; }&#10;</style>

How to Contact Blogger

For those of you who would rather talk to Blogger directly to report a bug or Terms of Service violation, unofficially there's still a way to do this, nicely hidden if you try to find it on the help page.

Contact Blogger Help

There's a small caveat to this: many of the topics have been redirected to help pages, so instead of a form at the end, as you would expect, you find a link to the Blogger Help Group, which simply dumps your gripe on the rest of us. Not to worry, though. There still are some forms that are still there: "Blogger is down" under "Report a bug" still works, and so do the forms under "Report a Terms of Service violation." The form for "Suggest a feature" also still works. If you try to access bug reporting under "I found a bug in Blogger," this too is another dead end. Use "Blogger is down" instead.

Examples for my tips

This template:

<b:includable id='main'>
<hr/>
<h2><data:title/></h2>
<hr/>
<data:content/>
<hr/>
<b:include name='quickedit'/>
</b:includable>

should always be enclosed in the underlined, bolded tags. A template without b:includable tags will not upload to Blogger.

Any "plus sign":

<a expr:href='data:blog.homepageUrl + "index.html"'>

should always be led and trailed by spaces, because the form handler doesn't know the difference between a plus sign and a space (which becomes a plus sign in the query string) and may change it to a space, rendering expressions unparsable and forcing your entire widget out of your blog! But if a leading and trailing space are included, " + " in the form variable becomes "+++" in the query string, which magically turns back into " + " when the string gets parsed.

Form data in the template:

<a href="http://not-a-domain.com/example.php?sample1=always&sample2=expand&sample3=ampersands">

should become, in the add-widget form:

<a href="http://not-a-domain.com/example.php?sample1=always&sample2=expand&sample3=ampersands">

The first amp; is to overcome a deficiency in the publishing engine. The second amp; is to ensure safe passage through the form handler. If you were hard-coding this example in Template edit, you would need only one amp;:

<a href="http://not-a-domain.com/example.php?sample1=always&amp;sample2=expand&amp;sample3=ampersands">

The publishing engine will automatically change & to & in your page.

I’ve already given the code for the quickedit icon, but here it is again:

<b:includable id='main'>
<hr/>
<h2><data:title/></h2>
<hr/>
<data:content/>
<hr/>
<b:include name='quickedit'/>
</b:includable>

Complete Blog Post List

I took what Vin did with his post list here and turned it into a widget! All you have to do is click on the button below, select a blog to add it to, and click their button, and, voila! a complete list of everything you ever posted, right in your sidebar! You may change the widget heading to anything you like, but please, don’t edit anything in the widget’s template, OK? Happy listing!

List heading:

Do not sort the posts.

Sort the posts alphabetically. (NEW!)

Check the sidebar of this blog for an example of this list.

Tips for including widget templates in add-widget forms

Here are a few tips that might help you avoid the posting mistakes that add-widget makes:

1. Always enclose your template code in <b:includable id='main'></b:includable> tags.
2. Always include a space before and after every plus (+) sign.
3. Always substitute & for every & in all your code. This is not a mistake. The extra amp; is actually necessary.

These tips, if followed religiously, will ensure a safe and successful upload of your widget! Oh, I almost forgot.

4. Always include the quickedit icon: <b:include name="quickedit"/>

That last one is because if you write your own widget template, the quickedit icon will not automatically be included.

Better-Looking Blogger Preview

As many of you already know, there is a bug in Blogger Preview. Fonts are two big, borders slam up against the left edge of the screen, widths are wrong... in short, the browser is operating in quirks mode when it should be operating in standards mode. I have informed Blogger Support of the problem, but until they fix it, here's a workaround. In your template's style sheet, after the body rule, if, for example, you have a font size value of "small":

body.0 {
   font-size: x-small;
}

In other words, choose the next smaller font-size value keyword (x-small for small, small for medium, medium for large, etc. You don't need to do this if you're using pt or px values, as these will not trigger a difference in visible size.(By the way, that's "dot zero", not "dot O".) Likewise, if you're having trouble in preview mode with alignment issues, insert this code after the #content rule:

.0 #content {
   width: 100%;
}

Now add a "zero" (0) class attribute to the <body> tag:

<body class="0">

If parts of your page still look strange on preview, or if borders aren't showing up in the right place, write the above rule for your #wrap or similar div that surrounds your #content and place it after your #wrap rule with a .0 #wrap selector.

You can usually tell which things to patch. Most templates have multiple declarations in some rules, and some of these have embedded empty comments. Go up to the first declaration without /* */ and clone it in your .0 rule.

God bless!

Edit: changed "% %" to correct comment syntax of "/* */"