Make a custom Profile widget

Profile widget, stripped-down edition

Blogger provides an excellent ID widget for your sidebar.

It pulls your photo and, if you want, other information from your Blogger (or Google+) profile page.

The widget is connected to the profile page, so if you change the page information the widget revises
automatically.

If you add an author or three, the title changes, automatically, to "Contributors" and the content becomes a clickable list of all authors, each linked to its profile.

You can change the default title to whatever you want, and elect to omit or include the small amount of profile information to which it is hard wired.

This is an altogether admirable gadget, one of only two that Blogger puts in your sidebar by default. (The other is the Archive gadget.) But if it is not right for you, you can remove it and write your own using Blogger's generic HTML/Javascript widget.

Why might you chose to do so? I think you'd know if the default gadget isn't working out for you. Perhaps you want to have multiple authors on your blog, but only feature one of them.

Maybe you want to feature not your profile but the name of a business or organization.

Perhaps you'd like to write a blog-specific profile page, and link to that. Maybe you'd like to customize that widget in other ways.

Below I provide the HTML code to reproduce your profile widget. Just substitute your information for the matter in red (code edits) and in blue (content edits) and paste the code into the HTML/Javascript gadget.

<a href="http://www.blogger.com/profile/06245776593991049317"><img alt="My Photo" class="profile-img" height="70" src="http://3.bp.blogspot.com/_QWPl_ePs3uk/S4lrxvBhNgI/AAAAAAAAAAM/FoBwtgN5veA/S220/Opalescent.jpg" width="80" /></a>
<dl class="profile-datablock">
<dt class="profile-data">
<a class="profile-name-link g-profile" href="http://www.blogger.com/profile/06245776593991049317" rel="author" style="background-image: url(//www.blogger.com/img/logo-16.png);">
Adam
</a>
</dt>
<dd class="profile-textblock">Your information here.</dd> </dl>
<a class="profile-link" href="http://www.blogger.com/profile/06245776593991049317" rel="author">View my complete profile</a>

The code edits are as follows:

• The long digit 06245776593991049317, which appears 3 times, is my blogger ID number. Replace it with yours.
• Your Blogger ID is the long digit at the end of the web address for your Blogger profile page. If you use a Google+ profile instead, or if you'd like to link to another page as a profile, replace the entire url (not just the long digit) with the entire url of the page you want to use. Do so in all 3 places.
• If you use the Blogger profile today but switch to your Google+ profile tomorrow, the widget will still be good. The link to your Blogger profile will forward to your G+ profile.
• The www.blogger.com web address ending in .jpg is the link to a generic profile image. Replace it with yours, or that of any photo you want. (To find the url for your actual profile image, click on the image on your profile page.)

The content edits, in blue above, are as follows:

• My name; change it to yours.
• "Your information here." Put anything you like here, or leave it blank. Brevity is good.

Shortcut: If you know HTML, it is not too hard to find the code generated by your actual profile widget in a code view of your page, which includes the you-specific code and content. (Search for things like "About Me" or class="profile-name-link g-profile.") If you copy this correctly you can paste it into an HTML gadget without further edits.

The description, from my profile page, would be confusing for this blog. I could use a custom widget to make a blog-specific version.

Either approach mimics the appearance of your Profile widget.

Unlike that widget, however, the custom HTML's connection to your profile page is strictly one way. Changes you make to that page, for instance to the description or profile photo, are not automatically reflected in the widget.

Of course you don't need to use this code to make a profile-type widget in your sidebar, but this approach will ape the appearance of a "real" Profile gadget.

Summary Workflow
Shortcut if you know HTML: View the source page of your blog and copy the code for your Profile widget.

Paste that into a Javascript/HTML widget and save. Done.

Otherwise: Copy the above code and paste it into a Javascript/HTML widget.

Edit the code as indicated and save. Done.