Extracting Html / Javascript From A Rootage Listing

If you lot hit whatever guide house your blog, too the template, eventually you lot volition demand to extract gadget origin code.

The mightiness to extract origin code tin live on useful inwards diverse tasks.

• Identifying a work gadget, to others.
• Publishing a gadget on a split upwards page, yesteryear embedding the code inwards a page or post.
• Recovering the content of a deleted gadget.

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

Having produced the source listing, I must uncovering too extract the relevant code which represents the gadget inwards question.

Here is a rattling basic example, from my Template Laboratory blog. We'll expect at a gadget inwards the sidebar, which I labeled "Empty HTML Gadget".
HTML13
If I locate the gadget, when viewing the spider web log - too I am logged inwards equally an administrator, I tin purpose the Quick Edit icon (if Quick Edit is enabled), too position the gadget yesteryear the URL. I tin hit the same, amongst the "Edit" link inwards 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 guide keep this luxury, when I am able to stance the spider web log - or to stance the dashboard Layout wizard. If I am identifying a work gadget - perhaps a malicious accessory on someone else's blog, I won't guide keep that ability. Searching for a malicious gadget may require purpose of ii or to a greater extent than origin code listings - addition imagination or deductive reasoning.

But, in i lawsuit I position the gadget, inwards the origin listing, I tin start.
See "id='HTML13'"?
Here is the consummate department 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 demand is within the "widget-content" tags.

 <div class='widget-content'>  ... (Everything hither is the "widget content").  </div> <div class='clear'></div> <span class='widget-item-control'> 

And, inwards this case, what I need:

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

This is a rattling uncomplicated illustration - precisely you lot volition find, consistently, that you lot demand to expect for the proper tag set, starting amongst "<div class='widget-content'>", too ending amongst the corresponding "</div>".

Identifying the proper closing "</div>" tin live on tricky. Many gadgets guide keep nested "<div>" ... "</div>" pairs inwards the "widget content" - too hence I search for the "<span class='widget-item-control'>" tag, too move backwards from there.

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

And re-create the code, from within the tag set.

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

Once you lot practice, you'll uncovering it easily enough.

Now, accept the extracted gadget code, too publish the gadget to a specific spider web log page.

Share this post