The Ultimate Guide to Creating Blogger Widgets

Although WordPress is the preferred CMS for bloggers, one cannot undermine the popularity of Google's blogger platform that powers millions of blogs around the world. One of the common elements that every blogger user is aware of is the use of widgets. Blogger widgets help you add custom content sections at the desired place within the theme. You can either use ready-made widgets from the collection or you can create one for you from scratch. The latter option may sound a daunting task but fortunately, it's not that hard. If you have a working knowledge of HTML and CSS, you can easily create custom blogger widgets for yourself and for the blogger community. This guide will cover all the basics of creating blogger widgets in different ways and how you can place or embed then at the desired place with custom content.

Brushing Up the Basics

Before we dive into widget creating code snippets, let's get familiar with some of the common terminologies and concepts that I'll be using throughout this tutorial. Primarily, every blogger template is divided into sections. Each of these sections contains widgets. If you want to add additional code to sections, you're free to do so.

Remember, a widget cannot exist independently outside a section. It must be encapsulated within a section. While creating a section, you can ensure whether it will support 'Add a Gadget' page element tab or not. If enabled, users can easily embed available widgets through the layout mode as shown below.


So there are two ways to add widgets to your blogger blog. Either you create a widget enabled section so that you get 'Add a gadget' page element tab in the layout mode or you hard code widgets within the section at the desired place. We will see both these approaches one by one.

Creating Widget Enabled (Drag 'n' Drop support) Sections

If a particular section is not enabled for showing 'Add a Gadget' tab in the layout mode that doesn't mean that it is not widget-ready. The only shortcoming is that in such cases you have to hardcode widgets within that section instead of using the layout mode drag 'n' drop support.

So first let's see how to recognize existing sections or create a new one for your template.

/* Skeleton of a typical section declaration */
<b:section id='optinbox' class='customoptinbox' maxwidgets="5" showaddelement="yes" growth="horizontal">
</b:section>

Now let's dissect each part of this declaration to understand it in a better way. As the name implies, b:section keyword is used for declaring sections. Each section must have a corresponding closing b:section tag.

Now let's take a look at the attributes that can be assigned to a typical blogger section.

• (id) - This is the only one mandatory attribute that must be present in every section. It's used to simply give a name to your section and you must use alphabets and letters while specifying the name. No special characters are allowed for section names. Remember, all the sections and widgets are turned into <div> sections while delivering the page to the browser so you can use this attribute to stylize the section in your CSS code. For example, the above section can be referenced as div#optinbox { } in your template's CSS section.
• (class) - This optional attribute can be used to assign a class to the section. You can use this class too to stylize the section through custom CSS code. In other words, if you're declaring this attribute, the section can be stylized both through id and class reference.
• (maxwidgets) - You can specify the limit on the number of widgets a section can support. By default, there's no limit for the same. In case, you're creating a custom section that should only support a certain number of widgets, you can specify that limit through this attribute.
• (showaddelement) - And this is the important attribute that can be used to enable or disable support for 'Add a Gadget' tab in the layout mode. By default, a new section supports adding new widgets to the layout mode. If you're designing a custom section such that you want to restrict inclusion of additional widgets through the layout mode, you must set this attribute's value to "no".
• (growth) - And last but not the least, this optional attribute governs the positioning of widgets within the section. This attribute can take two values viz., horizontal and vertical. The default value is always vertical. If you specify the horizontal value, all the widgets are aligned beside each other rather than stacking on top of one another.

To demonstrate the creation of widgets, I'm using the default 'Simple' blogger template that can be selected easily while creating a new blogger blog. I'm assuming you're testing your widget creation skills on the same template using a brand new test blog.

Widget Creation Basics

As I mentioned before, widgets reside in sections and the anatomy of a typical section has already been discussed above. Now we'll understand the anatomy of a blogger widget. Once you get familiar with it, we'll move on to a practical example to create a sample widget for us.

So here's how a typical blogger widget declaration looks within a blogger template.

/* Example #1: Widget placeholder syntax */
<b:widget id='mywidget' type='HTML' locked="yes"/>

/* Example #2: Expanded Widget skeleton */
<b:widget id='HTML1' locked='true' title='Sample Widget' type='HTML'>
   <b:includable id='main'>
   [Widget content goes here.....]
   </b:includable>
</b:widget>

There are two examples shown above that presents two different ways to declare a widget. The first method simply acts as a placeholder to render the content widget at the desired place.

We're more interested in the second example as it lets us include custom content within the widget with almost infinite flexibility. You must use <b:widget> tag for creating a blogger widget. Apart from placeholder widget declaration (Example #1 shown above), every widget declaration must have a corresponding </b:widget> closing tag.

All the content of a typical blogger widget is populated within <b:includable> tag. It must have a corresponding </b:includable> closing tag. A widget can have more than one <b:includable> tag. In simple words, these tags are simple content containers within a widget.

But before we go ahead, there's an important thing to note. Every blogger widget must have at least one <b:includable> section with an id='main'. Other <b:includable> content sections within the same widget can have custom ids, but the presence of one such section with 'main' as the 'id' is mandatory. Here's an example that shows it.

/* Widget with multiple <b:includable> sections */
<b:widget id='HTML1' locked='true' title='Sample Widget' type='HTML'>
   <b:includable id='main'>
   <b:include name='optinboxdata'/>
   <b:include name='formcode'/>
   [Additional widget content goes here.....]
   </b:includable>

   <b:includable id='optinboxdata'>
   [Widget content goes here.....]
   </b:includable>

   <b:includable id='formcode'>
   [Widget content goes here.....]
   </b:includable>
</b:widget>

If you carefully look at the code above, you will find that there are three <b:includable> sections within a single widget. In most cases, a single <b:includable> section is good enough to house all the content, but in case you're making a complex widget, you can declare additional <b:includable> sections to break the code and content in different sections.

Upon further close examination of the code, you can see there's one <b:includable> section that has the 'id' as 'main'. There are two more <b:includable> sections which are called (executed) within the 'main' <b:includable> section. Look at the syntax of calling or executing other <b:includable> sections within the main section. For that we use <b:include> tag along with the name attribute that is given the 'id' of the <b:includable> section we want to call.

Now it's time to take a look at the attributes that can be applied to a widget. Out of all these attributes, two are mandatory while others are optional. These attributes are as follows.

• (id) - Quite similar to section declaration, this attribute is used to give an identifiable name to the widget. It can also be used to stylize the widget in your CSS section. For example, the widget created in the sample code above can be stylized through the following CSS reference → div#HTML1.
• (type) - Every widget has a predefined 'type' associated with it that tells what kind of widget it is. Blogger supports over a dozen widget types (BlogArchive, Blog, Feed, Header, HTML, SingleImage, LinkList, List, Logo, BlogProfile, Navbar, VideoBar, NewsBar) that can be used by the users. Quite similar to the previous attribute, this one is also a mandatory attribute. The rest of the attributes mentioned below are optional.
• (locked) - This attribute takes two values viz., yes or no. If enabled, general users can drag and shift the widget to different sections of the theme through the layout mode. If it's disabled, the widget remains intact at its place and cannot be moved to the other parts of the template.
• (title) - This attribute is often used by template designers to give a human-readable name to the widget. This way, you can easily recognize the widget in the layout mode and arrangement of multiple widgets is easy.
• (pageType) - This is a very useful attribute that is often used by developers to limit the rendering of widget on selective blogger pages (all, archive, main, item). For example, if you want that a widget should only appear on single post pages, set this attribute's value to 'item'.
• (mobile) - This optional attribute decides whether a widget will appear in mobile browsers or not. It is rarely used when you're designing an advanced and responsive blogger template.

To keep things simple, I've omitted details about the use of variables and data exchange mechanism between different <b:includable> sections within a single widget. So now let's move to the next step of creating a sample widget to conclude this blogger widget creation guide.

Creating A Sample Widget

So let's create a demo widget from scratch. This widget will simply display the URL of the current web page on your blogger blog in a colored box. Although you can do the same very easily through a simple <div> declaration, we are doing it through a widget to understand the whole concept of widget creation.

Instead of using an existing section for our sample widget, we'll create a new section which will encapsulate our demo widget. So here's the entire code for the same.

/* Sample widget code for displaying current web page URL in a colored box */
<b:section class='mysection' id='mysection' maxwidgets='1' showaddelement='no'>
    <b:widget id='HTML10' locked='true' title='Box for displaying current Page URL' type='HTML'>

        <b:includable id='main'>
        <b:include name='showpageurl'/>
        </b:includable>

        <b:includable id='showpageurl'>
        Current web page URL is: <data:blog.url/>
        </b:includable>

    </b:widget>
</b:section>

Make sure you also add the following CSS code to stylize the widget color box that will display the current web page URL. You can see how I'm referencing the widget declared above through the combination of its id and the div tag.

div#HTML10 { 
      background: #f7f3e2;
      border: .1em solid #e5e597;
      padding: 0.833em 0.467em;
      text-align: center;
      font-weight: bold;
      font-size: 18px;
}

Now let's dissect the code of our demo widget to better understand its anatomy and the control flow. One can easily observe that we've created a custom <section> to encapsulate our widget. I've named that section 'mysection' which can be changed as per your preferences.

You can also see that I've ensured that no other widget can be added to this section by supplying the value '1' to the attribute maxwidgets. I've also disabled the 'Add a Gadget' tab so that no user can add extra widgets to this section from the layout mode. To disable this functionality, I've set the attribute showaddelement value to 'no'.

Now, let's move on to the widget declaration and see the applied attributes one by one. You can see, I've given a unique id to this widget and it is locked. I've already explained about this attribute in the previous sections of this guide. The title is self-explanatory and helps you identify the widget very easily in the layout mode. And lastly, I've specified the widget-type as HTML. This ensures that I can freely add JavaScript or custom HTML code within <b:includable> sections.

Within the widget there are two content sections. First one is the primary and mandatory content section having the id as 'main'. This primary section also calls or executes the second content section through the <b:include> tag. The second content section does the actual work of fetching the current web page URL through <data:blog.url/> tag. You can absorb this complete list of blogger data tags which can be used within widgets for accessing blog related information. In our example, we simply fetch the current page URL and display it as it is.

Do not try creating this widget on your primary or business blog. This widget is very elementary and is shown here simply to understand the concept of blogger widget creation. You can experiment and can create a useful widget for your blog that displays relevant information for your visitors.

Hope this guide will help you understand blogger widgets in a much better way.