toolbar | System Admin/Developer's Blog

这个可是好东西啊，对于web设计来说，用处很大。现在终于到了beta2了：）

The Internet Explorer Developer Toolbar provides several features for exploring and understanding Web pages. These features enable you to:

— Explore and modify the document object model (DOM) of a Web page.
— Locate and select specific elements on a Web page through a variety of techniques.
— Selectively disable Internet Explorer settings.
— View HTML object class names, ID’s, and details such as link paths, tab index values, and access keys.
— Outline tables, table cells, images, or selected tags.
— Validate HTML, CSS, WAI, and RSS Web feed links.
— Display image dimensions, file sizes, path information, and alternate (ALT) text.
— Immediately resize the browser window to a new resolution.
— Selectively clear the browser cache and saved cookies. Choose from all objects or those associated with a given domain.
— Choose direct links to W3C specification references, the Internet Explorer team weblog (blog), and other resources.
— Display a fully featured design ruler to help accurately align and measure objects on your pages.

The Developer Toolbar can be pinned to the Internet Explorer browser window or floated separately.

This Beta 2 version of the toolbar contains functionality and stability enhancements over previous versions and includes the following improvements.

— You can now selectively enable and disable CSS parsing.
— The Misc menu contains a color picker.
— Several link reports are available.
— When you select an element in the DOM element tree list, the selected element scrolls into view if it is not already visible in the browser window.

With the recent release of the new version of Google’s toolbar for Internet Explorer on Windows, it’s now possible to make your own custom buttons for the popular browser extension. Once installed, the button gives you easy access to your most recent entries and provides you with a simple way to search your site for a word or phrase you highlight on any web page.

In addition to just being a cool feature for your own personal use, by providing it to your visitors, it’s also a great vehicle for promoting and increasing traffic to your Movable Type-powered blog.

Creating a Google Toolbar button for your site
So how do you do it? Easy. You can just make use of the template that Niall Kennedy created, which uses the power of Movable Type’s publishing engine to automatically generate the code for the button.

First, create a new index template. You might want to name it "Google Toolbar Button" and then set the Output File to toolbar_button.xml. Then, copy the following text and paste it in as the body of the template.

<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
<button>
    <title><$MTBlogName remove_html="1" encode_xml="1"$></title>
    <description><$MTBlogDescription remove_html="1" encode_xml="1"$></description>
    <site><$MTBlogURL$></site>
    <search><$MTCGIPath$><$MTSearchScript$>?search={query}&IncludeBlogs=<$MTBlogID$></search>
    <send><$MTCGIPath$><$MTSearchScript$>?search={selection}&IncludeBlogs=<$MTBlogID$></send>
    <feed refresh-interval="3600"><$MTBlogURL$>atom.xml</feed>
     <icon mode="base64" type="image/x-icon">AAABAAEAEBAAAAAAAABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAD///8A//f3APf39wD39+8A9+/vAO/v5wDv5+cA5+feAN7e1gDe3s4A3tbOAN7WxgDW1sYA
1s7GAM7GvQDOxrUAxr2tAMa9pQDGtaUAvbWlAL21nAC1rZQAtaWMAK2ljACllHsApZRzAJyMawCU
hGMAlHtaAIx7WgCMe1IAjHNSAIRzUgCEc0oAhGtKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHRoNGh0dHR0dHR0dIR0dHR0EECIdHSIdHR0dHR0d
HSIVABciHR0YHR0dHR0dHR0iDgAFHSIdBx0dHR0dHR0dHQUAAAcNBQkdHR0dHR0dIhMAAAAAAAUa
HR0dHSIdHRUAAAAFCRAcHR0dHR0UDQQAAAAQGiIiHR0dHRoIDQ4IAAAQIh0dIR0dHR0JDSIiGgUE
HR0dHR0dHR0dBBoiHSIQDSIdHR0dHR0dHQUXIh0dDRAhHR0dHR0dHR0VABodFQAaIh0dHR0dHR0d
HRUHAAkaHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=</icon>
</button>
</custombuttons>

Save the template, rebuild it (if necessary), and your new button code should be all set. By default, your output should look something like this. Then, your last step is to make a simple link to your new file. That should look like:

<a href="http://toolbar.google.com/buttons/add?url=[your blog URL]toolbar_button.xml">Add to Google Toolbar</a>

The results will give you a link that says Add to Google Toolbar. So what are you waiting for? Click the button! Then you’ll have a new toolbar button updating you on the latest Movable Type news, along with a new search function that lets you have direct access to the Movable Type knowledge base and help documentation. Then be sure to post your own button link on your blog.

Still not appeased the Googlebot enough? Be sure to check out Niall’s Sitemap instructions, which let you simply and easily make a Google Sitemap XML file, which lets you instruct Google’s spiders on how to crawl your site, while letting you as the site owner have access to more statistics and information about your site.

If you want to make your site as reader-friendly (and Google-friendly) as possible, it’s easy to start with Movable Type today and you’ll be button-making, sitemapping and blogging in no time.