Dummies Guide to Google Blogger Beta

Widgets in Beta blogger are.............

individual page elements such as a picture, a blogroll, or anything else you can add from the Page Elements tab to a Section of your blog.

A Page Element is referred to as widget in Beta Template code.

A widget consists of code which forms the widget and the data which is added to it by the user. Multiple widgets are grouped together in Sections which are the areas of your page such as the Header, the LeftSidebar, the RightSidebar, the Main(posts) and the Footer. The whole Body of the webpage is made up of Sections containing widgets. A Section may contain none or many widgets. A Widget is also known as a Page Element. A widget corresponds to its real world alternative : gadget and has the same function. Each section and its corresponding widgets is included in the wrapper of that section. For example the sidebar wrapper contains the section 'Sidebar' which contains widgets/Page Elements like 'Profile', Links', 'Feed', 'Adsense Javascript', etc.


A widget is added by coding it in the Edit Html tab and after saving it appears in the Page Elements tab where data can be added to it.

Following types of data can be added in a widget :

1. Globally Available Data
2. Page Header
3. Blog Posts
4. Blog Archives
5. Profile
6. Text/HTML/Javascript
7. Feed
8. Picture
9. Labels
10. List
11. Link list
12. Logo

The complete widget code is hidden until you put a check in the Expand Widget Templates box at the top of the Edit Template text box under the Edit Html subtab which is under the Template tab.

Widget code is included between the following tags :

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

WIDGET CODE HERE

</b:widget>

Remember each widget is included in a Section which is included in a wrapper which is included within the body of the webpage.

The content within a widget is contained within 'includable' sections like this :

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

[insert whatever code 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.

For example :

<b:includable id='post' var='p'>
Title: <data:p.title/>
</b:includable>


This was to show how the widgets are coded and where they can be accessed. In the next post we will discuss how to give them colors. Thus inside widgets are includables and inside them you can put code.

Technorati Tags:page element, template, template parts, widgets