Blogger Widget : Page Elements Tags for Layouts

Posted: 5:12 e paradites
|
Author: Mizake
|
Filed under: Layout, Page Element, Tangging Data, Widget

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.

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

Posted: 3:16 e paradites
|
Author: Mizake
|
Filed under: Blogger Hack, Layout, Page Element, Widget

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 <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?

Posted: 3:07 e paradites
|
Author: Mizake
|
Filed under: Blogger Hack, Layout, Page Element, Widget

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: