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".
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-1In 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.
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.