Music Is Personal - And Player Choice Will Be, Also

Some blog owners decide to include music, to accessorise their blogs - and the first thing they ask for is instructions.

Please give me step by step instructions, to add music.

They don't consider that adding music, for any blog, will be their personal choice - and a music player will be personal too.

The choice of music player needs to be based on the music library provided.

You will probably want your music choice to match the blog content.

Some one who wants to provide classical music won't want to add a music player, published by a disco / techno website. Similarly, if you want to decorate your blog with country music, you will not be pleased by a player provided with a jazz website.

Each music website will provide their own player, to accompany their music library - and their own installation instructions, to install their player. You will probably be provided HTML / JavaScript code, by the website - so you will want to add an HTML / JavaScript gadget.

Position the player so it is convenient and visible, to your readers.

You will want the player controls to be visible - so you should position the new gadget, in a convenient and visible location, on the blog.

The one suggestion, that is consistently provided, is that you should choose a player that lets your readers choose whether to listen to the music. Please, don't use any player that only provides "autoplay".

The choice of music will be yours - and some readers will choose to view your blog. But some will choose to not listen to your music - and unless you want to limit reader population to those who can listen as they view, you will want to make the music optional.

---

Some #Blogger blog owners want to decorate their blogs with music - and they request detailed instructions for adding a music player. Music players are individual to the website providing the music - and the smart blog owner will choose the website, for one offering an appropriate music library.

The "About Me" Gadget, And Google+

Some blog owners are accustomed to editing their Blogger profiles, from time to time.

Publishing a blog that presents oneself to ones readers, openly, is important to some blog owners. The Blogger profile becomes a blog component that is edited, periodically, to keep the blog reader friendly.

The Blogger profile editor produces content which is displayed in the "About Me" gadget, for single owner blogs. Multiple owner blogs, complementarily, display "About Us" - which provides a different display.

Google+ profiles are edited using the Google+ desktop - and Google+ desktop content does not display in "About Me", in Blogger.

"About Me" displays Blogger Profile content. Once you upgrade to a Google+ profile, you won't have access to the Blogger Profile Editor - and you'll have no way to edit Blogger Profile content.

If the blog has been upgraded, you won't be able to edit your Blogger profile.



If you can edit your Google+ profile, sufficiently, you'll be good. If not, you can work around the problem.

Just create your own custom "About Me" gadget, using a Blogger HTML or Text gadget. You can do this in under an hour.



Add an "HTML / JavaScript" gadget. That's how you start.



Use the Layout "Add a Gadget" page, add an "HTML" or "Text" gadget, and fill the gadget content with your profile. With a little work, you can make a gadget with as much detail as any Google+ page or profile.

• Desktop banner background / icon.
• Photos.
• Text.
• Video.
• Whatever interests you - and your readers.

With a little work and imagination, you can have a blog that looks like part of your Google+ desktop.

---

Owners of #Blogger blogs that use Google+ profiles want to edit their "About Me" gadgets - but find no way to do that. With a Google+ profile edited using the Google+ desktop, no "About Me" displayed content is produced.

Fortunately, it's not difficult to produce a custom "About Me" gadget.

https://productforums.google.com/forum/#!category-topic/blogger/Ifg3aW2yMrg

Blogger Magic - Add An HTML Gadget

Many popular accessories start with raw HTML / JavaScript code, from different third party services.

One of the advantages of publishing a Blogger blog is the abundance of available accessories. With Blogger being in the top 3 of Internet publishing platforms, every third party service wants customers who publish using Blogger.

There are plenty of abusive or malicious accessories, that should not be installed, even when offered - and there are ways to best install the accessories, that can be safely installed.

Most accessories, from third party services, will be provided as HTML / JavaScript.

To add HTML / JavaScript code, to a blog, you can use any of several techniques - though using a new HTML / JavaScript gadget is the smartest choice. Adding an HTML gadget, to a Blogger blog, is not difficult.

Add an HTML / JavaScript gadget, using "Add a Gadget" in Layout.

1. Start from the "Layout" dashboard menu page.
2. Click "Add a Gadget".
3. Click the "+" button, for "HTML/JavaScript".
4. Paste the code, given to you, into the "Content" box.
5. Click "Show HTML/JavaScript", if the option is provided.
6. Click "Save".
7. Position the new gadget anywhere in the Layout display.
8. Click on "Save arrangement".

Start from the dashboard Layout page, and select any convenient link to "Add a Gadget". Select "HTML/JavaScript" from the "Basics" tab, in the "Add a Gadget" wizard.

Select "HTML/JavaScript" in "Basics".



Paste the code, that you have to add, into the "Content" window, in the "Configure HTML/JavaScript" wizard. And if you wish, give your new gadget a Title.

Paste the code that you have, into "Content" - with the wizard in HTML mode ("Rich Text" displayed).



And select "Show HTML/JavaScript", if provided for this template - then click on "Save". Finally, click on "Save arrangement".

Avoid several well known mistakes, when adding gadgets.

There are mistakes, that you can avoid - if you know what to do.

• Be selective, when adding third party code.
• Add a gadget, using "Basics".
• Edit an HTML gadget, with "Rich Text" displayed as the caption (for HTML) - or with "Edit html" displayed as the caption (for Rich Text).
• With a dynamic template, attach or embed the content in a static page.
• With a mobile display, enable the gadget, if you want it to be viewed.
• With templates that have a disappearing sidebar, position the gadget in the footer.
• If "Show HTML/JavaScript" is provided for this template, select that option.

Be selective, when adding third party code.

It's your blog - and you are allowed to install any accessories and tweaks that interest you. For long term stability and success, though, you should try to only install code from reliable sources.

Your readers will be happier, with your blog using reliable accessories.

Add a gadget, using "Basics".

You'll start with an "Add a Gadget" link, on the dashboard Layout page - and the "Add a Gadget" wizard.

The "Add a Gadget" wizard has the "Basics" tab, with the "HTML / JavaScript" gadget in the list - and it has the "Add your own" tab. You should find the "HTML / JavaScript" gadget, in "Basics".

Edit an HTML gadget, with "Rich Text" / "Edit html" displayed as the caption.

The "HTML" / "Text" gadgets, intriguingly have the "Edit Html" / "Rich Text" tabs.

If you want to add / edit HTML or JavaScript, the caption should read "Rich Text".



The HTML gadget, in HTML mode.



Conversely, if you want to add / edit text, the caption should read "Edit html".

It's your choice. The "HTML / JavaScript" and "Text" gadgets are the same - just the captions ("Edit html" and "Rich Text") differ.

With a dynamic template, attach or embed the content in a static page.

Adding gadgets to dynamic templates is not a straightforward process. Gadgets have to be written specifically to support dynamic templates - and the HTML gadget is not written for this.

If you want an HTML gadget to work in a dynamic template, you'll need to attach or embed the gadget, in a static page.

With a mobile display, enable the gadget, if you want it to be viewed.

By default, the "HTML / JavaScript" gadget does not display, on a mobile browser. You will have to use the Template Editor, and enable the gadget to display, in mobile mode.

With templates that have a disappearing sidebar, position the gadget in the footer.

Some Responsive class templates have a sidebar that is hidden by default. To see the sidebar, you click on the "hamburger" icon in the header.

If you want your new gadget to work with the blog loaded - even without the sidebar showing - you need the gadget in a visible section. The footer is a better choice, in this case.

If "Show HTML/JavaScript" is provided for this template, select that option.

If the option to "Show HTML/JavaScript" is provided in the "Configure HTML/JavaScript" wizard, be sure to select that - if you want the gadget to operate, with the blog loaded. If the gadget should not be visible to the reader, but it needs to operate, you still must enable this option.

It's your blog.

There are ways to make an HTML gadget work, while ignoring the above advice. Long term success will be much more likely, though, with attention to the details.

---

One of the most common accessories, added to a #Blogger blog, starts with an HTML / JavaScript gadget. This is a very versatile gadget - and it's not difficult to install. There are several common sense details, however.

Add A Fixed Location "Subscribe" Button To Your Blog

To encourage email subscriptions, and other social connections, some blog owners provide gadget toolbars, with useful links.

Some blog owners would like to position their gadgets in fixed screen positions.

I want to have a subscribe button hover at the top of the page, while people read my blog.

This blog has a hovering AddThis toolbar, which provides selected social sharing options. And, it has a hovering "Top of Page" button.

Adding a custom subscription gadget, in a fixed screen location, is not complicated.

AddThis has a large library of social sharing gadgets, with their icons - but they don't have any email subscription selections. But you can add an icon based "subscribe" button, "hovering" at the top of the page.

An occasional request suggests using a popup window, containing a subscription form. We don't recommend using a popup window - but a subscription form, on a FeedBurner hosted page, will provide the same function.

1. Add FeedBurner "Subscribe by Email".
2. Add a "Subscribe by Email" FeedBurner hosted form, and a link.
3. Add a suitable icon, containing the FeedBurner subscription link.
4. Try It.

See below "See the code asssembled.", for the detailed procedure.

Add FeedBurner "Subscribe by Email".

Using the dashboard Layout page, and "Add a Gadget", add a "Subscribe by Email" gadget. This creates a blog posts FeedBurner hosted feed.

FeedBurner provides the "Subscribe by Email" gadget, with the choice to display either an on screen form - or a simple link to a FeedBurner hosted form page.

Add a "Subscribe by Email" FeedBurner hosted form, and a link.

Once a "Subscribe by Email" gadget has been added, get the gadget link from the FeedBurner dashboard, at Publicize - "Email Subscriptions" - "Subscription Management" - "Preview Subscription Link…".

Start from the dashboard, at Publicize - "Email Subscriptions" - "Subscription Management".

The "Preview Subscription Link…" window contains the code, that we need.



Add a suitable icon, containing the FeedBurner subscription link.

Choose an attractive icon to contain the FeedBurner supplied link. Add an HTML gadget using "Add a Gadget", containing the icon with the link to the FeedBurner form - and displayed in a fixed location.


Try It.

I added a button, and a new subscription, to my test blog, "Chucks Tech World".

See the icon, in the top right margin?

See how the new icon floats?

See how it floats from the top - and from the right?





See the code, assembled.

A floating subscription button is simply an "HTML / Javascript" gadget, containing button code, linking to a FeedBurner subscription form. I position my gadget, in the footer, out of sight. The code "top:40px;right:60px;" positions the button to display relative to the top right corner - regardless of where the HTML gadget is positioned.

1. Upload a suitable icon.
2. Add the FeedBurner Subscription link code.
3. Add the button code.

Start with an icon, uploaded:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii2fCZTJEcS0rg0NliF0abn3LvuRvBFczagaR3aJo66JQ2X2VzNScrxHothiYOgP83ZrrLHN7fFcFeA5ihXLTdIHu8oO7kaxaILeNXcICvNkVNwj2pVG86bXn2qyvJd13-luA-hoijps09/s1600/Subscribe+Icon.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii2fCZTJEcS0rg0NliF0abn3LvuRvBFczagaR3aJo66JQ2X2VzNScrxHothiYOgP83ZrrLHN7fFcFeA5ihXLTdIHu8oO7kaxaILeNXcICvNkVNwj2pVG86bXn2qyvJd13-luA-hoijps09/s320/Subscribe+Icon.png" /></a>

Here's the FeedBurner Subscription Link:

<a href="https://feedburner.google.com/fb/a/mailverify?uri=ChucksTechWorld&loc=en_US">Subscribe to Chucks Tech World by Email</a>

Here's the Floating Top Of Page Button:

<a style="display:scroll;position:fixed;bottom:20px;right:60px;" href="#" title="Top"><img border="0" height="60" width="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2eOcCRS3N1_JwNrk6zva82CQybo8TWCvgMs6lUtZhyl_6XrkbjWP8Ayf2eQLtg3KEaUMruYNMT3uHK7llf3gltPNd6PMaMEjSWXuTpPzCX-fAebzTg5xQTb9kdRRiRhVVm347DAyfZzdk/s320/Up+Arrow+4.jpg" /></a>

And put them all together:

<a style="display:scroll;position:fixed;top:40px;right:60px;" href="https://feedburner.google.com/fb/a/mailverify?uri=ChucksTechWorld&loc=en_US" title="Subscribe by Email" target="_blank"><img border="0" height="60" width="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii2fCZTJEcS0rg0NliF0abn3LvuRvBFczagaR3aJo66JQ2X2VzNScrxHothiYOgP83ZrrLHN7fFcFeA5ihXLTdIHu8oO7kaxaILeNXcICvNkVNwj2pVG86bXn2qyvJd13-luA-hoijps09/s320/Subscribe+Icon.png" /></a>

And that's it.

I now have a hovering subscription icon, in this blog. Given a collection of icons, carefully arranged, you can have a hovering toolbar - to maybe complement a social media button toolbar.

---

Some #Blogger blog owners would like a hovering button or toolbar, to provide an email subscription form. This is an accessory that is not difficult to add.

Add A FaceBook Gadget With FaceBook SDK Code

Some blog owners can't get their new FaceBook gadgets to work, on their blogs.

We see the occasional report, in Blogger Help Forum: Get Help with an Issue.

The blog won't accept the code that Facebook Developer generated for me.

Adding HTML gadgets - and HTML gadgets using FaceBook code - can be frustrating. But, it's possible.

Adding a FaceBook gadget, to your blog, is not difficult - but success is found, in the details.

• Add the gadget as a new HTML gadget.
• Add the FaceBook SDK code, to the first FaceBook gadget.

Add the gadget as a new HTML gadget.

Blog maintenance is far easier, with a FaceBook gadget - or any other HTML / JavaScript based accessory - added as content, in a new HTML gadget - far smarter than using Template Editor.

Add the FaceBook SDK code, to the first FaceBook gadget.

FaceBook instructs us to add SDK code to each page which will display a FaceBook gadget - but advises that we should only add the SDK code once / page.

Gadget code, as provided by FaceBook Developers:

<div class="fb-comments" data-href="http://ourladyofoutrage.blogspot.com/" data-numposts="5">
</div>

Gadget code, as added to a new HTML gadget:

<div id="fb-root">
</div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=528167400699401";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-comments" data-href="http://ourladyofoutrage.blogspot.com/" data-numposts="5">
</div>

A new FaceBook gadget, being added.



Just pay attention to the details, for best results.

---

Some #Blogger blog owners try to add accessories provided by FaceBook Developers, without success. They don't realise the importance of the details involved.

Adding A "Top Of Page" Button To The Blog

This week, I added a gadget that's been needed, on this blog, for some time.

You may see my new "Top" button, at the lower right corner of this blog. If you have a normally wide browser window, with wallpaper showing on either side of the posts / sidebar section, you'll see the new gadget floating on top of the wallpaper. If you have squeezed your browser window to save horizontal space, you may see the new gadget floating on top of the sidebar (but beneath the sidebar gadgets).

This is an extremely easy tweak to add. The hard part was finding - and sizing - the icon that I used.

To find a suitable icon for the button, Google for it.

To find the icon, Google Is Your Friend. Just look through the search listings, until you find one that fits with your blog.

free up arrow icon

Once you have found an icon that you like, download to your computer - then upload to your blog - politely. Don't hot link icons.

• Hotlinking is rude, and may abuse somebody's limited bandwidth.
• Hotlinking depends upon somebody's intention to host their icons, using their service, for eternity (however long you publish your blog, anyway).

Once your chosen icon is saved as a blog image, setup the button code.

Once you have your icon politely saved as part of your blog, add an HTML gadget - and add the gadget code, in the Content window of the HTML gadget.

<a style="display:scroll;position:fixed;bottom:20px;right:60px;" href="#" title="Top"><img border="0" height="60" width="60"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2eOcCRS3N1_JwNrk6zva82CQybo8TWCvgMs6lUtZhyl_6XrkbjWP8Ayf2eQLtg3KEaUMruYNMT3uHK7llf3gltPNd6PMaMEjSWXuTpPzCX-fAebzTg5xQTb9kdRRiRhVVm347DAyfZzdk/s320/Up+Arrow+4.jpg" /></a>

Here's the magic.

style="display:scroll;position:fixed;bottom:20px;right:60px;"

That positions the icon in a fixed location on the screen. The new HTML gadget contains the code - and can be located anywhere in the blog. The magic determines where the icon is displayed.

Adjust settings, to make the button appear in an acceptable screen position.

Adjust "Bottom" and "Right" values, to position your new icon in the desired location, for your blog. Resize the browser window a few times - make it narrower and wider - and get an idea how the final location of the icon may vary. Test in different browsers, too.

This is my icon:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2eOcCRS3N1_JwNrk6zva82CQybo8TWCvgMs6lUtZhyl_6XrkbjWP8Ayf2eQLtg3KEaUMruYNMT3uHK7llf3gltPNd6PMaMEjSWXuTpPzCX-fAebzTg5xQTb9kdRRiRhVVm347DAyfZzdk/s320/Up+Arrow+4.jpg

Your icon will have a different URL. Use your own icon, please!

Then sit back, and enjoy your blog, with its new navigational aid.

A caveat.

If you add your "Top Of Page" button code into a page or post, never switch between Compose and HTML modes, when editing that page or post.

Extracting HTML / JavaScript From A Source Listing

If you do any work on your blog, and the template, eventually you will need to extract gadget source code.

The ability to extract source code can be useful in various tasks.

• Identifying a problem gadget, to others.
• Publishing a gadget on a separate page, by embedding the code in a page or post.
• Recovering the content of a deleted gadget.

In each case, use of the proper text browser or source listing is where I start.

Having produced the source listing, I must find and extract the relevant code which represents the gadget in question.

Here is a very basic example, from my Template Laboratory blog. We'll look at a gadget in the sidebar, which I labeled "Empty HTML Gadget".
HTML13
If I locate the gadget, when viewing the blog - and I am logged in as an administrator, I can use the Quick Edit icon (if Quick Edit is enabled), and identify the gadget by the URL. I can do the same, with the "Edit" link in the dashboard Layout wizard.

http://www.blogger.com/rearrange?blogID=6231987187698503326&widgetType=HTML&widgetId=HTML13&action=editWidget§ionId=sidebar-right-1

In this case, I know to search for gadget "HTML13".

I have this luxury, when I am able to view the blog - or to view the dashboard Layout wizard. If I am identifying a problem gadget - maybe a malicious accessory on somebody else's blog, I won't have that ability. Searching for a malicious gadget may require use of two or more source code listings - plus imagination or deductive reasoning.

But, once I identify the gadget, in the source listing, I can start.
See "id='HTML13'"?
Here is the complete section of code, which this gadget produces.

<div class='widget HTML' id='HTML13'>
<h2 class='title'>Empty HTML Gadget</h2>
<div class='widget-content'>
This is a (<span style="font-weight:bold;">somewhat</span>) empty HTML gadget.
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=6231987187698503326&widgetType=HTML&widgetId=HTML13&action=editWidget§ionId=sidebar-right-1' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML13"));' target='configHTML13' title='Edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>

The code which I need is inside the "widget-content" tags.

<div class='widget-content'>

... (Everything here is the "widget content").

</div>
<div class='clear'></div>
<span class='widget-item-control'>

And, in this case, what I need:

This is a (<span style="font-weight:bold;">somewhat</span>) empty HTML gadget.

This is a very simple example - but you will find, consistently, that you need to look for the proper tag set, starting with "<div class='widget-content'>", and ending with the corresponding "</div>".

Identifying the proper closing "</div>" can be tricky. Many gadgets have nested "<div>" ... "</div>" pairs in the "widget content" - so I search for the "<span class='widget-item-control'>" tag, and work backwards from there.

<div class='widget-content'>

...

</div>
<div class='clear'></div>
<span class='widget-item-control'>

And copy the code, from inside the tag set.

This is a (<span style="font-weight:bold;">somewhat</span>) empty HTML gadget.

Once you practice, you'll find it easily enough.

Now, take the extracted gadget code, and publish the gadget to a specific blog page.

Publishing A Gadget To A Specific Page

Long before Blogger developed static pages, blog owners had wanted to have some accessories or gadgets visible only on specific pages.

Initially, we discovered that gadgets could be displayed conditionally, based upon the URL being displayed. This is a fairly simple task, when you get used to it - but it requires editing the template HTML - and can look a bit scary, to those inexperienced in template editing.

Recently, we realised that some gadgets can be embedded in a page or post, by editing in HTML mode - and accomplish the same. I demonstrated my custom "Contact Me" gadget, using that ability.

Both the technique of embedding a gadget in a page or post - and of conditionally displaying a gadget - have their advantages, and their disadvantages.

Embed A Gadget In A Page Or Post

My custom "Contact Me" gadget, which is provided by Google Docs as an IFrame embedded page, is published in my static page "Contact Me, Improved".

<iframe src="https://docs.google.com/forms/d/1JvoY2yf5aTChnvXlCgGsUerSCtI7RHpRdkq5SPBPm90/viewform?embedded=true" width="700" height="800" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>

That's the code for my gadget - you can make your own, in 10 - 15 minutes. You can use this technique with any Google Docs based file.

My expanded Followers gadget is part of my static page, "Followers". The code for that page was provided by Google Friend Connect, and is no longer available. You may now install the "Followers" / "Google Friend Connect" gadget, using "Add a Gadget".

The Followers gadget is JavaScript based, though - and the rendered gadget code can be extracted from the blog source, using any suitable text based browser. Having extracted the JavaScript, it can be added to any page or post, in HTML mode, just as I did to make "Contact Me, Improved".

Display A Gadget, Conditionally

Gadgets which are provided as XML, and do not provide convenient rendered JavaScript code, cannot be easily embedded in a page or post. These gadgets will still be added using "Add a Gadget", and will require the conditional template tweak. My Labels index page, "Topics", is an example of this technique.

Any BlogList or LinkList gadget can be found as rendered HTML, and the code can be extracted - again, from a blog source listing - but both bloglists and linklists are dynamic - and frequently long. If you extract the rendered source, you get a static copy - - which is fine, if you never plan to change your list.

The blog has half a dozen lists, of various types - and I like to add or remove list elements, whenever necessary. I enjoy the Quick Edit feature of the "Peer Resources" bloglist, for instance - and have no intention of publishing that bloglist as a static HTML based linklist. If I was to display "Peer Resources" on a specific static page, I would use the earlier technique of editing the template XML code, and adding a conditional.

It seems as if it should be possible to add XML code, directly, into a page or post. If I discover the appropriate technique for doing that, I will surely update this post.

Know The Alternatives

Just know the alternatives, and choose wisely.

Adding An HTML / JavaScript / Text Gadget?

An interesting bit of confusion is seen, occasionally, in Blogger Help Forum: Something Is Broken.

I added a gadget using code from a third party website - but the new gadget shows the code, instead of the gadget content, when I view my blog!

This is somebody who was confused by the options offered by the gadget setup wizard.

When you add an HTML / JavaScript, or a Text, gadget to a blog, you can get odd results.

"Add a Gadget" provides the "HTML / JavaScript" and "Text" gadgets - your choice.

The captions and labels in the "Configure HTML/JavaScript" or "Configure Text" wizard can be a bit confusing. From the "Add a Gadget" wizard, you can select either an "HTML/JavaScript" gadget ("Configure HTML/JavaScript") or a "Text" gadget ("Configure Text").

The "HTML / JavaScript" and "Text" gadgets are identical - excepting the title.

Both the "Configure HTML/JavaScript" and "Configure Text" wizards use the same code - the only difference between the two is the header.

• Configure HTML/JavaScript
• Configure Text

Everything else is the same. Either wizard can create an "HTML / JavaScript" gadget (in HTML mode) - or a "Text" gadget (in Text mode) - as you wish.

• When the wizard is in HTML mode, the caption at the upper right border of the Content window will read "Rich Text". Positioning the cursor over "Rich Text" (and noting that the cursor does not change to a pointer), and clicking on "Rich Text", brings up the Text mode of the wizard.
• When the wizard is in Text mode, the caption will read "Edit Html" - and clicking on "Edit Html" puts the wizard into HTML mode, again.

The title of the wizard does not change, when switching modes.

The header of the wizard - "Configure HTML/JavaScript" or "Configure Text" - will remain as it was when the wizard was opened, ignoring any mode changes. The caption, at the upper right border of the Content window, is what matters.

• If you want to add code (HTML / JavaScript), you will want the caption to read "Rich Text".
• If you want to add text (Rich Text), you will want the caption to read "Edit Html".

Being in the wrong mode will produce inconsistent and odd results.

If you're in the wrong mode, you'll be able to enter a limited amount of content - but with odd results.

• If you're in HTML mode (with "Rich Text" showing), you'll be able to enter text - to a limited degree. HTML is simply fancy text, with tags (special keywords and symbols).
• The HTML editor toolbar will lack a few buttons - and using special characters like ampersand ("&"), greater than (">") - and less than ("<"), will produce random and unpredictable results.
• If you're in Text mode (with "Edit html" showing), you'll be able to enter the HTML code - but when the blog is displayed, you'll see code (which is just text) in place of a working gadget.

If you just added a new gadget - and ended up with visible code, when you tried to setup an HTML gadget - now you know why. Similarly, if the "Save" button is now broken, and you are trying to add or update a Text gadget.

This is one of several possible causes of problems seen when adding / updating the HTML / JavaScript / Text gadgets.