Creating a Blogger theme from scratch : Widgets

A widget is a small plastic ball used to introduce nitrogen into beer to provide....wait wrong widget. A widget is an element on the page that provides interaction with the site. Blogger has a limited number of widgets to choose from. Widgets can only be defined inside sections. The attributes permitted on widgets are listed below.

<b:widget>


Attribute Description Required?
id Unique identifier for the widget.
type Needs to be one of the defined Blogger widget types, these are listed below the table.

locked Boolean all widgets are unlocked by default. Prevents users from moving or deleting the widget from the Layouts tab.
title Displays at the top of the widget, if none is assigned the type will be used with an instance number appended.
pageType Options of 'all','archive','item' or 'main'. Will define which pages the widget will be shown. 'item' pages are posts. 'main' will only appear on the home page. 'all' is used by default.

Widget Types
Below is a list of acceptable blogger widget types.
  • Attribution - Copyright notice, usually used at the bottom of the page
  • BlogArchive - List of all your old posts
  • BlogProfile - Your user profile on Blogger
  • BlogSearch - Search field for your blog
  • ContactForm - A contact form, e-mails are sent to the account the Blogger profile is attached to
  • Feed - RSS Feed links
  • Followers - A number count of the list of followeds on the page
  • Header - Top section of the page, normally used for banner images and intros
  • HTML - For entering raw html into your site
  • LinkList - A list of links, useful for contact links at the bottom of the page
  • List - A configurable list, settings for max items etc.
  • Logo - Logo for your site
  • Navbar - Navigation bar
  • NewsBar - A list of news
  • PageList - A list of the pages on your site
  • ReportAbuse - An element used to provide a contact link to report abuse on the site
  • SingleImage - An image element
  • Translate - Offer users teh option to translate your page
  • VideoBar - A list of videos with links to view
  • Wikipedia - A link to a wikipedia page
Example Code
 
<b:section class='content' id='main' showaddelement='yes' />
  <b:widget id='HTML1' locked='false' title='Some Title' type='HTML' version='1'>
    <b:widget-settings>
      <b:widget-setting name='content'>
        <p>Hello World!</p>
      </b:widget-setting>
    </b:widget-settings>
  </b:widget>
</b:section>
Tags: , ,