• Posted: 8:17 e pasdites
  • |
  • Author: Mizake

this is test for bloggar tools
This is test for write and post foto through the wbloggar toos. This line is paraghraph example line 1
And this is example for line sentence when enter keyboard is pressed.

  • This is sample for li line 1

  • This is sample for li line 2

  • This is sample for li line 3

  1. This is sample for ol line 1

  2. This is sample for ol line 2

  3. This is sample for ol line 3

Incredibly easy step to Remove the Blogger Navbar

This step is incredibly easy. Simply copy and paste the following piece of code directly above the #header-wrapper line in the ‘Edit HTML’ view of your blog:

#navbar-iframe {

height: 0px;

visibility: hidden;

display: none;

}


Save the template and you’re done!

Note: Removing the Navbar is possibly against the Blogger Terms of Service. On their site, they state that the Navbar may be removed for those publishing via FTP to their own server. They do not explicitly state that other users can not do it too. Furthermore, the fact that they allow you to edit the HTML of your blog gives the impression that you can display your blog as you wish. But there is no definitive answer. You’ve been warned!

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='5' showaddelement='yes'>

<b:widget id='Header1' locked='false' title='blogtitle (Header)' type='Header'/>

</b:section>

</div>
Save it and you’re done! You should now be able to add a picture to the header. Be careful with the size of your picture. I’ve found that if the picture is too big, it won’t display. If your picture doesn’t display, try reducing the size.

That’s how easy it is!

Guide to HTML - HTML TAGS (part 1)

This Tutorial will explain any details about how to use the various tags in your blog. You can use the HTML script here in your blog with make standard step.

It is try to design to be as concise as possible. Nevertheless in order to make you comfort read them, I divide this tutorial into 5 parts.

HTML script will you need if you want to make some creation in your post or to modify your template

NOTE: Use the link within HTML Guide Tag in the left-side bar in this page. Use following navigator tag to go to the link preferred by you

BASIC ELEMENTS

Document Type

<HTML></HTML>

(beginning and end of file)

Title

<TITLE></TITLE>

(must be in header)

Header

<HEAD></HEAD>

(descriptive info, such as title)

Body

<BODY></BODY>

(bulk of the page)



STRUCTURAL DEFINITION

Heading

<H?></H?>

(the spec. defines 6 levels)

Align Heading

<H? ALIGN=LEFT|CENTER|RIGHT></H?>


Division

<DIV></DIV>


Align Division

<DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>

4.0

Defined Content

<SPAN></SPAN>


Block Quote

<BLOCKQUOTE></BLOCKQUOTE>

(usually indented)

4.0

Quote

<Q></Q>

(for short quotations)

4.0

Citation

<Q CITE="URL"></Q>


Emphasis

<EM></EM>

(usually displayed as italic)

Strong Emphasis

<STRONG></STRONG>

(usually displayed as bold)

Citation

<CITE></CITE>

(usually italics)

Code

<CODE></CODE>

(for source code listings)

Sample Output

<SAMP></SAMP>


Keyboard Input

<KBD></KBD>


Variable

<VAR></VAR>


Definition

<DFN></DFN>

(not widely implemented)

Author's Address

<ADDRESS></ADDRESS>


Large Font Size

<BIG></BIG>


Small Font Size

<SMALL></SMALL>


4.0

Insert

<INS></INS>

(marks additions in a new version)

4.0

Time of Change

<INS DATETIME=":::"></INS>


4.0

Comments

<INS CITE="URL"></INS>


4.0

Delete

<DEL></DEL>

(marks deletions in a new version)

4.0

Time of Change

<DEL DATETIME=":::"></DEL>


4.0

Comments

<DEL CITE="URL"></DEL>


4.0

Acronym

<ACRONYM></ACRONYM>


4.0

Abbreviation

<ABBR></ABBR>


Guide to HTML : INTRODUCTORY MATERIAL

Several people have created excellent HTML guides and made them available on the Web -- who needs another one?

The Guide is designed to be as concise as possible, and therefore it doesn't go into any detail about how to use the various tags. A few tags link to notes that address frequently-asked questions. If you're looking for more detailed step-by-step information

XML Beginner's Guide : Where I can find XML FAQ, Tutorials, and Articles?

  • Posted: 6:27 e paradites
  • |
  • Author: Mizake
  • |
  • Filed under: Basic, XML Guide

These following links contain XML Beginner's Guide, including XML FAQ, XML Tutorials, and XML Article.

XML FAQ, Tutorials, and Articles


XML Specifications

Blogger Widget : Page Elements Tags for Layouts

The <body> section of a Layouts template will be made up primarily of sections and widgets. Sections mark out areas of your page, such as the sidebar, the footer, etc. A widget is an individual page element such as a picture, a blogroll, or anything else you can add from the Page Elements tab. You can include any HTML you like around the sections in your template.

Each section in your template will have an opening and a closing tag, looking something like this:

<b:section id='header' class='header' maxwidgets="1" showaddelement="no">

</b:section>

A <b:section> tag can have the following attributes:

  • id - (Required) A unique name, with letters and numbers only.
  • class - (Optional) Common class names are "navbar," "header," "main," "sidebar," and "footer." If you switch templates later, these names help Blogger determine how best to transfer over your content. However, you can use different names, if you like.
  • maxwidgets - (Optional) The maximum number of widgets to allow in this section. If not specified, then there is no limit.
  • showaddelement - (Optional) Can be "yes" or "no," with "yes" as the default. This determines whether the Page Elements tab will show the "Add a Page Element" link in this section.
  • growth - (Optional) Can be "horizontal" or "vertical," with "vertical" as the default. This determines whether widgets within this section are arranged side-by-side or stacked.

In your published blog, all <b:section> tags will be replaced with <div> tags, which will have the specified ID. So you are welcome to refer to, for example, div.header in your CSS if you want to.

A section can only contain widgets; it cannot contain other sections or other code. If you need to insert extra code between or around certain widgets within a section, you'll need to split the section into two or more new sections.

In its simplest form, a widget is represented by a single tag, which is basically just a placeholder indicating how the widget should be handled in the Page Elements tab. The actual data for any given widget is stored in the Blogger database and only accessed when the widget needs to be displayed. Some examples of widgets (one for a page header and one for a list) are the following:

<b:widget id="header" type='HeaderView' locked="yes"/>

<b:widget id="myList" type='ListView' locked="no" title="My Favorite Things"/>

A widget may have the following attributes:

  • id - (Required) This may contain letters and numbers only, and each widget ID in your template should be unique. A widget's ID cannot be changed without deleting the widget and creating a new one.
  • type - (Required) This indicates what kind of a widget it is, and should be one of the valid widget types listed below.
  • locked - (Optional) Can be "yes" or "no," with "no" as the default. A locked widget cannot be moved or deleted from the Page Elements tab.
  • title - (Optional) A display title for the widget. If none is specified, a default title such as "List1" will be used.
  • pageType - (Optional) Can be "all," "archive," "main," or "item," with "all" as the default. The widget will only display on the designated pages of your blog. (All widgets display on the Page Elements tab, regardless of their pageType.)

The types of widgets you can specify are:

  • BlogArchive
  • Blog
  • Feed
  • Header
  • HTML
  • SingleImage
  • LinkList
  • List
  • Logo
  • BlogProfile
  • Navbar
  • VideoBar
  • NewsBar

Each widget can also be written out in an expanded form, detailing the complete layout and contents for that widget. This is what you'll see, for instance, if you download your template from the Edit HTML tab to make a backup. Usually, you won't need to work with widgets in this mode, since it's simpler to just modify them from the Page Elements tab. However, if you want to know more, you can read about the detailed widget tags.

Note: In your published blog, all <b:section> and <b:widget> tags will be replaced with <div> tags, which will have the specified ID. So you are welcome to refer to, for example, div#header or div#myList in your CSS if you want to.

Layouts Data Tags

As mentioned in the Widget Tags for Layouts article, there are many different tags you can use to include specific pieces of data in your template. They will all be formatted as <data:name/> or <data:name1.name2/>, where name is the name of the particular piece of data you want to use. In the name1.name2 example, name2 is a particular item within a set of data called name1, e.g. photo.url.

This is a master list of all such available data. It is divided into sections by page element, because different types of widgets use different data.


Globally Available Data

This information applies to the entire page, so you can use it anywhere, unlike other data which can only be used in a specific widget. These should be referenced as part of the overall "blog" data, e.g. as <data:blog.title/>, etc.


  • title: The blog's title.

  • pageType: The type of the current page. One of 'item', 'archive', or 'index'.

  • url: The URL of the current page.

  • homepageUrl: The homepage of the blog.

  • pageTitle: The title of the current page. This is often the blog title, but may contain additional information on archive or post pages.

  • encoding: The encoding to use for the blog, e.g. UTF-8.

  • feedLinks: The autodiscovery feed links for the page header.

Back to the top.

Page Header

This is a simple widget with just two pieces of data. They can be referenced simply as <data:title/> and <data:description/>.


  • title: The blog's title.

  • description: The blog's description.
Back to the top.

Blog Posts

This is the central part of any blog, and the most complex. You should definitely consider simply making modifications to one of the default templates before writing a blog posts widget from scratch. But however you want to do it, here's all the data available in this widget.

  • feedLinks: A list of feeds for this page. On the main page, this will contain the main blog feeds; on item pages, this will also contain comments feeds. Each item in this list contains the following:

    • url: The feed URL.
    • name: The feed name (i.e. 'Posts' or 'Comments').
    • feedType: The type of feed (Atom or RSS).
    • mimeType: The mime type of the feed.

  • olderPageUrl: If there are older posts than the ones on the current page, this is a URL to those posts. Context-sensitive for page type. (Not all pages will have this link.)
  • olderPageTitle: Title of the link to the older page of posts.
  • newerPageUrl: The newer equivalent of olderPageUrl.
  • newerPageTitle: The newer equivalent of olderPageTitle.
  • commentLabel: The phrase to use to show the number of comments, e.g. "comments."
  • authorLabel: The phrase to use to indicate who wrote the post, e.g. "posted by."
  • timestampLabel: The phrase to use to indicate when the post was written, e.g. "posted at."
  • postLabelsLabel: Phrase to introduce the list of post labels, e.g. "labels for this post."
  • backlinksLabel: Phrase to describe backlinks to this post, e.g. "links to this post."
  • posts: A list of all posts for this page. Each post contains the following:

    • dateHeader: The date of this post, only present if this is the first post in the list that was posted on this day.

    • id: The numeric post ID.

    • title: The post's title.

    • body: The content of the post.

    • author: The display name of the post author.

    • url: The permalink of this post.

    • timestamp: The post's timestamp. Unlike dateHeader, this exists for every post.

    • labels: The list of the post's labels. Each label contains the following:
      • name: The label text.
      • url: The URL of the page that lists all posts in this blog with this label.
      • isLast: True or false. Whether this label is the last one in the list (useful for placing commas).

    • allowComments: 'True' if this post allows comments.

    • numComments: The number of comments on this post.

    • showBacklinks: Whether to show backlinks for this post.

    • numBacklinks: Number of backlinks for this post.

    • addCommentUrl: The URL of the 'add a comment' form for this post.

    • emailPostUrl: The URL of the 'email this post' form for this post.

    • editUrl: The URL of the edit form for this post.

    • feedLinks: A list of feeds specific to this post. (This is different from the overall blog feedLinks, as it may contain a feed for the post's comments, for instance.) Each contains the following:
      • url: The feed URL.
      • name: The feed name (e.g. 'Posts' or 'Comments').
      • feedType: The type of feed (Atom or RSS).
      • mimeType: The mime type of the feed.

    • comments: A list of all comments for this post (on item pages only). Each contains the following:
      • id: The numeric ID of the comment.
      • body: The body of the comment.
      • timestamp: The time the comment was created.
      • author: The display name of the comment's author, or 'Anonymous'.
      • authorUrl: URL of the comment author's profile, if the comment is not anonymous.
      • deleteUrl: The URL for deleting this comment.
      • isDeleted: Whether this comment has been deleted. (The text of deleted comments is replaced with a placeholder.)
Back to the top.

Blog Archives

The different styles provided here are for the different default options on the Page Elements tab. If you're designing a new version, it's easiest to use 'FLAT' as the style, and then manipulate the rest of the data as desired.

  • title: The title of the widget.

  • style: One of 'MENU', 'FLAT', or 'HIERARCHY'.

  • data: A list of each archive unit, each of which contains:

    • name: The name of this archive interval, e.g. "August 2006."

    • url: The link to the page containing posts from this interval.

    • post-count: How many posts there are in this interval.
Back to the top.

Profile Widget

For a blog with a single author, the profile widget contains the following information. Note that to access different parts of the photo data, you'll use notation such as <data:photo.url/>.


  • title: The title of the widget.

  • userUrl: The author's profile URL.

  • location: The location from the author's profile.

  • aboutme: The "About Me" information from the profile.

  • displayname: The author's display name.

  • photo: The user's profile photo, made up of the following:

    • url: The photo URL.

    • width: The photo's width, in pixels.

    • height: The photo's height, in pixels.

    • alt: The "alt" text for the photo.


On team blogs, the profile widget contains less information about more authors, as follows.

  • title: The title of the widget.

  • authors: The list of all authors, each of which contains the following:

    • displayname: The author's display name.

    • userURL: The author's profile URL.

If you want to design your template to handle both single- and multiple-author blogs, you can use the data:team variable to distinguish between the two cases. E.g. <b:if cond='data:team=="true"'> (display multiple authors) </b:if>

Back to the top.

Text / HTML / JavaScript Widget

The Text widget and the HTML/JavaScript widget work the same way and have the same two pieces of data.


  • title: The widget's title.

  • content: The content of the widget.
Back to the top.

Feed Widget

A feed widget contains, in addition to its own information, a list called feedData, which contains all the items in the feed. Each of those items in turn contains various pieces of information about themselves. When referencing this kind of data, you'll need to loop through each item in the list, with something like <b:loop var="i" values="feedData.items">. Then use notation such as <data:i.title/> or <data:i.alternate.href/> to get the information for each item.


  • title: The widget's title.

  • feedUrl: The URL of the feed.

  • feedData: The items in the feed, each of which contains:


    • title: the item title.

    • str_published: When the item was published (nicely formatted in blog's timezone).

    • published: When the item was published (in seconds since epoch).

    • str_updated: When the item was last updated (nicely formatted in blog's timezone).

    • updated: When the item was last updated (in seconds since epoch).

    • author: The item's author.

    • summary: A snippet from the item, if available.

    • alternate: Where to get more information about this item, which contains:

      • href: The permalink of this item.

      • type: The content-type of this item.
Back to the top.

Picture Widget

A picture widget contains a single image, and provides all the relevant data for that image.


  • title: The title of the widget.

  • sourceUrl: The URL of the image.

  • width: The image's width, in pixels.

  • height: The image's height, in pixels.

  • caption: The image caption.
Back to the top.

Labels Widget

The labels widget includes a list of all labels that are in use on the blog.


  • title: The widget title.

  • labels: The list of labels, each of which contains:

    • name: The text of the label.

    • count: How many posts have this label.

    • url: A link to a page displaying posts with this label.

Back to the top.

List Widget

The simplest form of a list. Each item is just a single piece of text, without any different types of data within it.

  • title: The widget title.

  • items: The list of items.
Back to the top.

Link List Widget

A slightly fancier list, where each item has two parts to it: the text and the link.

  • title: The widget title.

  • links: The list of links, each of which contains:

    • name: The link's text.

    • target: The link's URL.
Back to the top.

Logo Widget

It doesn't get any simpler than this one. Just one piece of data here.

  • fullButton: The URL of the Blogger button you've selected.
Back to the top.

Widget Tags for Layouts

The basic tags for creating widgets are described in Page Element Tags for Layouts. If you just want to use the Page Elements tab to work with everything, then that's all you need to know. However, if you want more fine-grained control, this article describes what you can put inside a widget, if you're working in the "Expand Widget Templates" mode of the Edit HTML page.

The first thing to do is to add a closing tag. So this:

<b:widget [...attributes...] />

becomes this:

<b:widget [...attributes...]>

</b:widget>

Includes

Widget content is contained in "includable" sections, which have this format:

<b:includable id='main' var='thiswidget'>

[insert whatever content you want here]

</b:includable>

The attributes are as follows:

  • id: (Required) A unique identifier made up of letters and numbers.
  • var: (Optional) An identifier made up of letters and numbers, for referencing data within this section. (See the data section below.)
Each widget must have one includable with id='main'. This will usually contain most or all of the content that will display for this widget, and in many cases it will be all you need. If you make more includables with different IDs, they will not be displayed automatically. However, if you make an includable with id='new',then you can reference it in your main includable with <b:include name='new' /> and it will display that way. The attributes for the b:include tag are as follows:
  • name: (Required) An identifier made up of letters and numbers. It must match the ID of an existing b:includable in the same widget.
  • data: (Optional) An expression or peice of data to pass on to the includable section. This will become the value of the var attribute in the includable.
Here is a simple example demonstrating the use of b:includable and b:include. Loops and data are described later in this article. The main thing to understand here is how the "main" section includes the "post" section within it. It passes along a post that it calls "i" and the included section references it as its var "p", then prints the title.

<b:includable id='main'>

<b:loop var='i' values='posts'>

<b:include name='post' data='i'/>

</b:loop>

</b:includable>


<b:includable id='post' var='p'>


Title: <data:p.title/>

</b:includable>

Includes are most useful if you have a section of code that you want to repeat multiple times in different places. You can just write the code once, put it inside a b:includable, then use b:include wherever you want it to appear. If you don't need to do that, then you can just stick with the single main includable and not worry about the rest. (Note that the main includable is included automically -- <b:include name='main'/> is unnecessary.)

Data

The data: tag is arguably one of the most important ones, since it's the avenue that brings in all of your actual content. Some examples of this tag are:

<data:title/>

or

<data:photo.url/>

The first example is simplest, and will work in most widgets, since most widgets have titles. All it does is print out the title of the widget. The second example shows a more complex variable, from which we select a particular component. A photo, say in the context of a profile widget, may have components such as url, height, and width. Using the "." notation indicates that we want the URL for this photo, rather than a URL from something else.

There is a great deal of data that you can access with the data: tag, and it varies depending on which widget you're working with. We've got a comprehensive list to help you find the data you need.

Loops

The b:loop tag lets you repeat a section of content multiple times. This is most commonly used for printing out each post in a list of posts for a given page, or each comment, or each label, etc. The general format for using loops is this:


<b:loop var='identifier' values='set-of-data'>

[repeated content goes here]

</b:loop>


The 'identifier' part can be any name you choose, and will be used to stand in for each new item in the list, each time through the loop. A common convention is to simply call this "i". The set of data you specify for the values can be any piece of data described in the data tags article as being a list of items. For instance, in the blog posts widget, posts is a list. Code like the following will loop through each post, printing out the title for each one, with header tags around it.


<b:loop var='i' values='data:posts'>

<h2><data:i.title/></h2>


</b:loop>


Notice how "i" takes on the value of each post in turn, so you can get the title from each one.


If / Else

You can use the b:if and b:else tags to display content in some places but not others. The general format is this:


<b:if cond='condition'>

[content to display if condition is true]

<b:else/>

[content to display if condition is false]

</b:if>


The b:else tag is optional. Without it, the result will be either the content listed in the b:if section or nothing. The closing </b:if> is required in each case, however.

For "condition" you can put in anything that evaluates to either true or false. Some data tags are simply true/false values on their own, e.g. allowComments on a post. With other pieces of data, you can compare them with specific values to get a true or false. Here are some examples:


  • <b:if cond='data:post.showBacklinks'> True if the current post is set to show backlinks.

  • <b:if cond='data:blog.pageType == "item"'> True if the current page is an item page (post page).

  • <b:if cond='data:displayname != "Fred"'> True if this is not Fred's display name.

  • <b:if cond='data:post.numComments > 1'> True if the current post has more than one comment.


How do I create new widgets for other people to add to their layouts?

This is still from blogger support guiding about adding new widget in blogger template.

The Layouts feature of Blogger opens up all sorts of new possibilities for people to customize their blogs in interesting ways. And even better, you can design new widgets or modules for others to add to their own blogs.

Here's the general concept:

First, design your widget. Then, on your website, create a form that sends its results to Blogger. In that form you include the content of the widget you've created, and maybe some other optional information. When someone clicks the "submit" button on your form, they'll be taken to Blogger where they can add your widget into their blog's layout (like this).

Let's look at a simple example to start with. The following code provides the user with a single button, labeled "Add Blogger Buzz Widget." Clicking that will let them add a widget to their layout that links to the official Blogger Buzz blog.

<form method="POST" action="http://www.blogger.com/add-widget"> <input type="hidden" name="widget.title" value="Blogger Buzz"/> <input type="hidden" name="widget.content" value="<a href='http://buzz.blogger.com/'>Read the Latest Blogger News!</a>"/> <input type="hidden" name="widget.template" value="<data:content/>" /> <input type="hidden" name="infoUrl" value="http://buzz.blogger.com"/> <input type="hidden" name="logoUrl" value="http://www.blogger.com/img/icon_logo32.gif"/> <input type="submit" name="go" value="Add Blogger Buzz Widget"/> </form>

You'll notice that blogger used hidden input fields here, because blogger don't want the user to change any of the information; blogger want everyone to get the same widget. You could have easily used other kinds of form fields if, for instance, you wanted the user to enter a title for the widget themselves. It's the name attributes of the form fields that are important, rather than the type attributes.

The important parts of the form are the following:

  • form action="http://www.blogger.com/add-widget" - (Required) Your form must submit its information to this URL in order for it to be handled properly by Blogger. Blogger recommend using the POST method to submit, but GET also works, if you don't have too much data in your widget.
  • widget.title - (Optional) The title you specify will display in the user's Page Elements tab when they edit their layout. It will also be shown as part of the default widget template. The title can be up to 100 characters long, and may contain well-formed HTML.
  • widget.content - (Required) This is the actual content of your widget, which will be displayed on the user's blog. It can include almost any well-formed code that you want, except for <html> and <body> tags. Note, however, that you will need to escape the code, as in the example above (e.g. <a> becomes &lt;a>)./ul>
  • widget.template - (Optional) This should follow the widget tag guidelines. You can also use any of the globally available data tags. If no template is specified, it uses as a default.
  • infoURL - (Optional) You can use this to specify a page on your site that describes your widget or gives other information about it. It will be used as a "more info" link on the setup page people see when adding your widget.
  • logoURL - (Optional) You can add an image URL here, and the image will be displayed next to the "more info" link. It should be thumbnail sized (i.e. less than 100x100 pixels).

Now that Blogger has got the basic idea, let's take a look at a more interesting example.

<form method="post" action="http://www.blogger.com/add-widget"> <input type="hidden" name="infoUrl" value="http://flickr.com"/> <input type="hidden" name="logoUrl" value="http://www.flickr.com/images/flickr_logo_gamma.gif"/> <input type="hidden" name="widget.title" value="Puppies!"/> <textarea name="widget.content" style="display:none;"> &lt;/a><div id='flickr_badge_wrapper'> <script type='text/javascript' src='http://www.flickr.com/badge_code_v2.gne?show_name=1& count=3&display=latest&size=t&layout=x&source=all_tag&amp; tag=puppy'></script&gt; <span id='flickr_badge_source_txt'&gt;More <a href='http://www.flickr.com/photos/tags/puppy/'&gt; Flickr photos tagged with puppy&lt;/a></span&gt; <br clear='all' /></div> </textarea> <input type="hidden" name="widget.template" value="&lt;data:content/> /> <input type="submit" name="go" value="Add Puppy Photos"/> </form>

In this case, Blogger went to Flickr.com to browse photos tagged with "puppy." Then blogger made a Flickr Badge out of it so blogger could display a stream of recent photos in the collection on blogger blog. Ordinarily, blogger would just take the badge code and put it in an HTML/Javascript widget on blogger own blog and blogger should be done. However, here blogger decided to help out other people who might want to do the same thing. So blogger put the badge code into the widget.content section of this form, and added the Flickr logo and link. Now, anyone else can use this form to easily add puppy photos to their blog with the click of a button.

And that's just the tip of the iceberg. From here, you can design anything else you like. Just be creative, have fun, and see what you can come up with!

P.S. If you want a nice little button to use on your form, try one of these:

http://www.blogger.com/img/add/add2blogger_sm_w.gif



http://www.blogger.com/img/add/add2blogger_sm_b.gif



http://www.blogger.com/img/add/add2blogger_lg.gif

How do I add third-party page elements to my layout?

This Guide about how to create new page element in layout that we want can share wiith other user. I have try to find this guide. Fortunately, thanks to Blogger support, they have ready this in blogger help. You can find also this guide if you write " layout" keyword in blogger support text box.

Blogger allows people to create new page elements for their layouts that they can then share with other users. So if you're on another site and enounter a button that says [+Blogger] or [Add to Your Blog] then that's what it's all about.

If you click on such a button, you should be prompted to log in to Blogger (if you aren't already logged in) and then you can select one of your blogs. You'll also see the title, content and template for the new page element, which you can edit if you want. A logo and "more info" link may also be present to tell you more about where this page element comes from, who created it, and what it does.

By clicking the [Add Page Element] button on this screen, you will be adding code to your blog. So it's important to make sure you either trust the source of this code, or have reviewed it to make sure it's something you're willing to have on your blog.

Once you've added the page element, it will appear on the Template | Page Elements tab for your blog, where you can edit, move, or delete it, just like the other parts of your page.



Relate Link:

How do I create new widgets for other people to add to their layouts?

Blogger Widget ; Installing the API Google Search types (video, text, and map) to your blog

Looking for guide to installing Google API Search???. Loking for Blogging Widget???. Below is instruction on how to install the API Google Search types (video, text, and map) to your blog. This point instruction is provide by Hoctro's Place, one of Blogger Masterpieces.

Oke, this is the widget;

Step 1: Get the API key from http://code.google.com/apis/ajaxsearch/signup.html. It's quite simple to get one, really.

Step 2: Add the CSS and code to the header, right after the ] ] > tag.
Replace the text in bold in 2 places with you own API key.

To make your installation/test easier, download the template here, aftr download to your Pc, then upload it to your blog in Edit HTML->Upload, and safely skip step 2->4. (But you still have to replace the key to your own.) :

<script

src='http://www.google.com/maps?file=api&v=2&key=wW9cday6o7K3g' type='text/javascript'/>
<script

src='http://www.google.com/uds/api?file=uds.js&v=1.0&key=wW9cday6o7K3g' type='text/javascript'/>
<link href='http://www.google.com/uds/css/gsearch.css' rel='stylesheet' type='text/css'/>
<link href='http://www.google.com/uds/css/gsearch_darkgrey.css' rel='stylesheet' type='text/css'/>

<!-- video search solution -->
<script src='http://www.google.com/uds/solutions/videosearch/gsvideosearch.js' type='text/javascript'/>
<link href='http://www.google.com/uds/solutions/videosearch/gsvideosearch.css' rel='stylesheet' type='text/css'/>

<!-- videoBar solution -->
<script src='http://www.google.com/uds/solutions/videobar/gsvideobar.js' type='text/javascript'/>
<link href='http://www.google.com/uds/solutions/videobar/gsvideobar.css' rel='stylesheet' type='text/css'/>

<!-- map search solution -->
<script src='http://www.google.com/uds/solutions/mapsearch/gsmapsearch.js' type='text/javascript'/>
<link href='http://www.google.com/uds/solutions/mapsearch/gsmapsearch.css' rel='stylesheet' type='text/css'/>

<style type='text/css'>
/* primary colors */
.app_gsvsc { color : rgb(153, 170, 221); }
.search-form-complete_gsvsc div.search-form-save_gsvsc { color : rgb(170, 221, 153); }
div.search-form-save_gsvsc { color : #202020; }

/* selected tag */
div.tag-selected_gsvsc { color : rgb(170, 221, 153); }

/* hover colors */
div.more_gsvsc:hover { color : rgb(170, 221, 153); }
div.tag-control_gsvsc:hover { color : rgb(170, 221, 153); }
.search-form-complete_gsvsc div.search-form-save_gsvsc:hover { color : rgb(170, 221, 153); }
.footerBox_gsvsc a:hover { color : rgb(170, 221, 153); }
.playerBox_gsvsc a.title_gsvsc:hover { color : rgb(170, 221, 153); }

/* secondary colors */
div.more_gsvsc { color : rgb(204, 204, 204); }
div.tag-control_gsvsc { color : rgb(204, 204, 204); }
.searchForm_gsvsc { color : rgb(204, 204, 204); }
.search-form-input_gsvsc { color : rgb(204, 204, 204); }
td.edit-form-input_gsvsc input { color : rgb(204, 204, 204); }
div.edit-form-submit-box_gsvsc { color : rgb(204, 204, 204); }
.footerBox_gsvsc a { color : rgb(204, 204, 204); }
.playerBox_gsvsc a.title_gsvsc { color : rgb(204, 204, 204); }
div.edit-tag_gsvsc { color : rgb(204, 204, 204); }

/* special settings, not called out in standard color overrides */
.tiny-results_gsvsc div.tiny-video-result_gsvsc { border-color : #000000; }
.results_gsvsc div.video-result_gsvsc { border-color : #000000; }
.search-form-input_gsvsc {
color : #676767;
background-color : #e0e0e0;
}

/* mapsearch styles */
#mapsc { width : 100%; }
#mapsc .gsmsc-idleMapDiv { height : 260px; }
#mapsc .gsmsc-mapDiv { height : 260px; }
#mapsc .gs-localResult { color : #676767; }

#mapsc a:link,
#mapsc a:visited { color : #0000cc; }

#hotspots {
padding-left : 8px;
}

#hotspots ul.hotspots {
margin : 0px;
margin-bottom : 4px;
padding : 0px;
}

#hotspots ul.hotspots li {
text-indent : 0px;
font:bold 70%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
display : inline;
padding : 0px;
margin-right : 8px;
cursor : pointer;
}

#hotspots ul.hotspots li:hover {
text-decoration : underline;
}

h3.sidebar-subtitle {
margin:.25em 0 .25em;
font:bold 75%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#777;
}

/* center column search stuff */
#searchform { width : 100%; margin-bottom : 8px;}
#searchControl .gs-result .gs-title,
#searchControl .gs-result .gs-title * {
color : rgb(153,170,221);
}

#searchControl .gsc-resultsHeader {
border-bottom-color : rgb(99,99,99);
}

#searchControl .gsc-control {
width : 100%;
}

#searchControl .gsc-tabHeader.gsc-tabhActive {
border-left: 1px #636363;
border-right: 1px solid #636363;
border-top: 2px solid rgb(153,170,221);
background: #e9e9e9;
}

#searchControl .gsc-tabHeader.gsc-tabhInactive {
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 2px solid #636363;
background: black;
}
</style>
 <script type='text/javascript'>
 var mapSearch;
 var videoSearch;
 var coreSearch;
 var videoBar;

 function SolutionLoad() {

 var videoOptions = {
 twoRowMode : true,
 startupDelay : 150
 }
 videoSearch = new GSvideoSearchControl(
 document.getElementById("videosc"), // container
 defaultTags, // default tag array
 null, // optional load function
 null, // optional save function
 videoOptions // optional options
 );


 // video bar
 var vbOptions = {
 largeResultSet : true,
 master : videoSearch
 }
 videoBar = new GSvideoBar(document.getElementById("videoBarDiv"), null, vbOptions);
 videoBar.execute("mac vs pc ad");

 // set title to the Googleplex and the link to
 // the Google corporate information page
 // set the hotspot list to the list above
 var mapOptions = {
 title : "Hoctro's Hangout Place",
 url : "http://en.wikipedia.org/wiki/Huntington_Beach,_California",
 hotspots : hotspotsList
 };

 // create the map search control
 mapSearch = new GSmapSearchControl(
 document.getElementById("mapsc"),
 "Huntington Beach, CA",
 mapOptions
 );


 var controlRoot = document.getElementById("searchControl");

 // create the search control
 coreSearch = new GSearchControl();
 coreSearch.setLinkTarget(GSearch.LINK_TARGET_SELF);
 coreSearch.setResultSetSize(GSearch.LARGE_RESULTSET);

 // prep for decoupled search form
 var searchFormElement = document.getElementById("searchform");
 var drawOptions = new GdrawOptions();
 drawOptions.setSearchFormRoot(searchFormElement);
 drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);

 // populate - web, this blog, all blogs
 var searcher = new GwebSearch();
 searcher.setUserDefinedLabel("The Web");
 coreSearch.addSearcher(searcher);

 searcher = new GblogSearch();
 searcher.setUserDefinedLabel("Blogsphere");
 coreSearch.addSearcher(searcher);

 searcher = new GblogSearch();
 searcher.setSiteRestriction("http://googleajaxsearchapi.blogspot.com/");
 searcher.setUserDefinedLabel("Ajax Search Blog");
 coreSearch.addSearcher(searcher);

 searcher = new GblogSearch();
 searcher.setSiteRestriction("http://googleblog.blogspot.com/");
 searcher.setUserDefinedLabel("Google Blog");
 coreSearch.addSearcher(searcher);

 searcher = new GwebSearch();
 searcher.setSiteRestriction("http://www.blogger.com/");
 searcher.setUserDefinedLabel("Blogger");
 coreSearch.addSearcher(searcher);

 coreSearch.draw(controlRoot, drawOptions);

 }

 function doCoreSearch(q) {
 coreSearch.execute(q);
 }

 function doMapSearch(q) {
 mapSearch.newSearch(q);
 }

 function doVideoSearch(q) {
 videoSearch.vsf.input.value = q;
 videoSearch.searchByString(videoSearch.vsf);
 }

 registerLoadHandler(SolutionLoad);

 function registerLoadHandler(handler) {
 var node = window;
 if (node.addEventListener) {
 node.addEventListener("load", handler, false);
 } else if (node.attachEvent) {
 node.attachEvent("onload", handler);
 } else {
 node['onload'] = handler;
 }
 return true;
 }
 </script>

Step 3: Add these new 5 widgets to your blog, following instructions here, section B.4.


<b:widget id='HTML31' locked='false' title='Search Bar' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='searchform'>Loading...</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='HTML32' locked='false' title='Video Bar' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='videoBarDiv'>Loading...</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='HTML33' locked='false' title='Search Results' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='searchControl'>Loading...</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='HTML34' locked='false' title='Map Search' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='mapsc'>Loading...</div>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='HTML35' locked='false' title='Google Video Search' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='videosc'>Loading...</div>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Step 4: Move around the widgets in Page Elements so that it looks like this. This is how we have a little freedom in moving the search widgets around if need be.


Notice sometimes you'll see this prompt, don't worry, just click OK.


To enhance our flexibilities in changing search items for the map and the video bars, two more steps are required.

Step 5: Adding contents to the Map Widget: cut and paste this code to the content of the Map Search widget :

<font color="brown">
<h3 class="sidebar-subtitle">A few great places</h3>
<div id="hotspots">
<ul class="hotspots">
<li id="hs01">Sushi</li>
<li id="hs02">Pho</li>
<li id="hs03">Book store</li>
<li id="hs04">Italian Food</li>
<li id="hs05">Jeannine's</li>
<li id="hs06">Cava</li>
<li id="hs07">SanYsidroRanch</li>
<li id="hs08">Sunstone</li>
<li id="hs09">Melville</li>
<li id="hs10">PhysicalFocus</li>
</ul>
</div>
<script type="text/javascript">
var hotspotsList = [
{ element : document.getElementById("hs01"), query : "Sushi" },
{ element : document.getElementById("hs02"), query : "Pho" },
{ element : document.getElementById("hs03"), query : "Book Stores" },
{ element : document.getElementById("hs04"), query : "Italian Food" },
{ element : document.getElementById("hs05"), query : "Jeannine's" },
{ element : document.getElementById("hs06"), query : "Cava Restaurant & Bar" },
{ element : document.getElementById("hs07"), query : "San Ysidro Ranch" },
{ element : document.getElementById("hs08"), query : "Sunstone Winery" },
{ element : document.getElementById("hs09"), query : "Melville Winery" },
{ element : document.getElementById("hs10"), query : "Physical Focus" }
];
</script>
</font>

Step 6: Adding contents to the Video Widget: cut and paste this code to the content of the Video Search widget

<font color="brown">
<script type="text/javascript">
var defaultTags = [
{query : "feed:top100",label : "itshot"},
{ query : "feed:top100new",label : "itsnew"},
{ query : "monkey boy ballmer", label : "steveb"},
{query : "mac pc ads",label : "mac"},
{query : "mtv"},
{ query : "big wave surfing",label : "waves"},
{query : "christina aguilera type:music_video",label : "christina"},
{ query : "jessica simpson",label : "jessica"},
{query : "vw gti"},
{query : "ferrari f1",label : "f1"},
{ query : "abba",label : "abba"},
{ query : "type:gpick",label : "picks"
}
];
</script>
</font>

That's it! We're done!

Here's the test site with the new search widgets: http://hoctro-stretchminima.blogspot.com/