Skip to main content

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.

Comments

Popular posts from this blog

Embedded Comments And Main Page View

The option to display comments, embedded below the post, was made a blog option relatively recently. This was a long requested feature - and many bloggers added it to their blogs, as soon as the option was presented to us. Some blog owners like this feature so much, that they request it to be visible when the blog is opened, in main page view. I would like all comments, and the comment form, to be shown underneath the relevant post, automatically, for everyone to read without clicking on the number of comments link. And this is not how embedded comments work.

What's The URL Of My Blog?

We see the plea for help, periodically I need the URL of my blog, so I can give it to my friends. Help! Who's buried in Grant's Tomb, after all? No Chuck, be polite. OK, OK. The title of this blog is "The Real Blogger Status", and the title of this post is "What's The URL Of My Blog?".

With Following, Anonymous Followers Can't Be Blocked

As people become used to Blogger Following as just another tool to connect people, they start to think about the implications . And we see questions like How do I block someone who's been following my blog secretly? I couldn't see her in my Followers list (hence I couldn't use the "Block this user" link), but I have looked at her profile and could see that she's Following my blog. Following, when you look at the bottom line, is no more than a feed subscription and an icon (possibly) displayed on your blog, and linking back to the profile of the Follower in question. If someone Follows your blog anonymously, all that they get is a subscription to the blog feed. If you publish a feed from your blog, and if the feed is open to anybody (which, right now, is the case ), then it's open to everybody. If someone wants to use Following to subscribe to the feed, you can't stop this. You can't block it before, or after, the fact. You can't Block w