All Codes use for inserting text widgets Images and videos

Line breaks and blank lines
Plain text typed or pasted in a text widget flows in one continuous paragraph. For line breaks you need this:

<br />

For blank lines you can use this (you can adjust it by changing the number):

<div style="height:14px;"></div>

This code can also be used alone in a nameless text widget, as a spacer (to create more distance between other widgets).

Space around text

In some themes the text shows up too close to the widget borders; you create some space around it this way (you can change the number):

<div style="padding:8px;">
TEXT HERE
</div>

Text links

The plain code for a link to any webpage is this:

<a href="URL HERE">TEXT HERE</a>

In most cases it’s better to use this:

<a href="URL HERE" target="_blank">TEXT HERE</a>

This way the link opens in a new browser window or tab, so that visitors don’t really leave your blog when clicking on a link.
E-mail link:

<a href="mailto:YOUR EMAIL ADDRESS HERE">TEXT HERE</a>

To avoid spam, it’s usually wiser not to disclose your e-mail address. You can use the WP contact form instead (but in a page, not a text widget)

The content of several widgets (e.g. Categories, Links or Recent Posts) is unordered lists. The design of each theme presents unordered lists in its own way. If you want a list of items in a text widget to show up the same way, you use the code for unordered lists:

<ul>
<li>ITEM ONE HERE</li>
<li>ITEM TWO HERE</li>
[etc.]
</ul>

The code for nested lists (with indented sub-items) is like that:

<ul> <li>ITEM ONE HERE
<ul>
<li>SUB1 HERE</li>
<li>SUB2 HERE</li>
<li>SUB3 HERE</li>
</ul>
</li>
<li>ITEM TWO HERE
<ul>
<li>SUB4 HERE</li>
<li>SUB5 HERE</li>
<li>SUB6 HERE</li>
</ul>
</li>
</ul>

This is an example with only two main items and three sub-items to each, but it’s enough for demonstrating the structure of the code.

Items and sub-items can be plain words or phrases, or any kind of allowed html code (e.g. links and/or style formatting).
Text widgets with unordered lists can also be used instead of some of the other widgets (such as the links widget or the categories widget). This can be useful if you don’t like the default appearance of those widgets and want to change it using formatting for style, or if you want your links or your categories in a non-alphabetical order; or if you want to include images. The drawback, of course, is that each time you add a new link or category you’ll have to update the text widget manually.

Scrollbox

If you want to limit the length a text widget occupies in the sidebar, you can have its content in a (vertical) scroll box:

<div style="height:150px;white-space:pre-wrap;overflow:auto;padding:8px;">
CONTENT HERE
</div>

The height number is just a suggestion – you can change it (but there’s a downward limit: below 45px there’s no room for the scrollbar). “Padding” is the space between borders and text – you can change that too. If you write an unordered list in a scrollbox, omit the padding altogether: the design of the theme will take care of that.
Or you may need a horizontal scrollbox:

<div style="white-space:pre;overflow:auto;padding:8px;">
CONTENT HERE
</div>

In some themes it will look better if you create a visible border around the box; in that case add this right after the opening quotation mark:

border:solid 1px #999;

Images

The code for a plain image is this:

<img src="IMAGE URL HERE" alt="DESCRIPTIVE TEXT HERE" />

For an image that links to a webpage:

<a href="WEBPAGE URL HERE" target="_blank"><img src="IMAGE URL HERE" alt="DESCRIPTIVE TEXT HERE" /></a>

Of course the image has to be narrow enough to fit in the sidebar (in most themes, sidebars are around 150 to 200 pixels wide

<img style="width:150px;" src="IMAGE URL HERE" alt="DESCRIPTIVE TEXT HERE" />

But it’s better to use properly sized images: gives you faster loading, better quality, and no issues with Internet Explorer.
Also, it’s better to use images uploaded to your own blog. If you use the URL of an image hosted in another site, you get the delay of that site loading as well, plus you run the risk of losing the image if it gets relocated or removed. So, to get the right URL for an image, you upload it to your blog via Media > Add New, and then you click Edit and copy the File URL from the Save module.
In some browsers you get a (blue) border around images. If you don’t want that, add this after “img” (with a space inbetween):

style="border:none;"

If you want a simple thin border around the image, you can add this after “img” (with a space before and a spacer after):

style="border:1px solid #HEX NUMBER HERE;"

Various sorts of borders are possible

Update : Putting an image in your sidebar or bottombar has now become easier, thanks to the Image widget launched today. Minor drawbacks: a) doesn’t work correctly in all themes; b) a linking image can’t be made to open in a new browser window/tab.

Image plus text

If you want a left-aligned image, with text wrapping around it, you need to add this after “img” (with a space before and a space after):

class="alignleft" style="margin-right: 8px;"

In some themes this may not work. For all kinds of combinations of image plus text, a more surefire way is coding for tables. (But that’s for a future post…)
If you’re having trouble placing text below an image, an easy alternative is using a second, untitled, text widget. (Note: when you add new widgets, you can rearrange them by dragging them into new positions.)