Simple Edit / Removal Of Problem Blog Gadgets

Blog owners frequently have to edit or remove various blog gadgets - and sometimes need coaching, to edit or remove.

Editing or removing gadgets, normally, is pretty simple - when you know what you're looking for. Whenever you are logged in to Blogger, as a blog administrator, you can find the "Edit" link, on the dashboard Layout wizard - or the "Quick Edit" link on the blog (when "Quick Edit" is enabled), as displayed.

Sometimes, identifying a problem blog gadget, to another person, isn't easy. What happens, if someone misreads your instructions?

Even when identified, it may not be a simple task to locate a given gadget.

• The "Quick Edit" option may not be enabled, on a blog.
• Even when "Quick Edit" is enabled, a blog with lots of gadgets may be tedious to search, looking for the gadget in question.
• Mistakes can be made. What happens, if you click on the wrong link, and remove the wrong gadget?
• When a malicious or misbehaving gadget is involved, either loading the blog or the dashboard may produce unacceptable results.

Fortunately, with the right diagnostic work, we may not have to load either the blog, or the dashboard, to edit or remove an identified gadget.

Start by locating, and identifying, the gadget in question. As an example, I will use a gadget from my test blog. First extract the code, for gadget "HTML13" - my so called "Empty HTML Gadget".

<div·class='widget·HTML'·id='HTML13'>(LF)
<h2·class='title'>Empty·HTML·Gadget</h2>(LF)
<div·class='widget-content'>(LF)
This·is·a·(<span·style="font-weight:bold;">somewhat</span>)·empty·HTML·gadget.(LF)
</div>(LF)
<div·class='clear'></div>(LF)
<span·class='widget-item-control'>(LF)
<span·class='item-control·blog-admin'>(LF)
<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'>(LF)
<img·alt=''·height='18'·src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png'·width='18'/>(LF)
</a>(LF)
</span>(LF)
</span>(LF)
<div·class='clear'></div>(LF)
</div>

Look for "quickedit" - and extract the "href" value.

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

Be really careful here - extract the complete string, between the ' ... '.

Add "https:" to the front of the extracted value.

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

And there is the exact URL needed, to access the Edit wizard, for the gadget, "HMTL13".

Now, to point out the "obvious".

• The URL will work, for the gadget on any blog, even if "Quick Edit" is not enabled for the blog - for a blog administrator.
• The URL will not work, for the gadget on any blog, even if "Quick Edit" is enabled for the blog - for a non blog administrator.
• Disclosure / possession of the URL poses no security threat to your blog - nor any benefit to a hacker. Try the link below, and see for yourself.
• Even if you are logged in as an administrator, the URL may not work - if "third party" cookies are not enabled.

The URL is simply a tool, which can be extracted, by anybody - and can be used, by a blog administrator (and only by a blog administrator), when properly logged in to Blogger.

Having noted the "obvious", your life can be a bit simpler, when instead of having to instruct someone how to locate and use the correct "Quick Edit" or Layout Edit link, to remove a problem gadget, you simply instruct them.

Login to Blogger, and click on the link below:
https://www.blogger.com/rearrange?blogID=6231987187698503326&widgetType=HTML&widgetId=HTML13&action=editWidget§ionId=sidebar-right-1.
Then click "Remove".

Now, extract and try a link from your blog - and see for yourself. Isn't that simpler?

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.