What are Widgets? ~ The Blog Doctor.

What are Widgets?

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

UPDATE : The Add Page Element link is now replaced by the Add Gadget link on Layout----->Page Elements tab.

Page Element = Blogger Gadget.

Code for a Blogger Gadget = A Widget

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...]>



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]


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

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:, , ,


The Brothers K said...

Can I change the size of a photo I added with the photo widget? I added it fine under customize your header, but it is too tall?

I added it from my computer rather than using a URL if that matters. Thanks!

vin said...

The Brothers K,

You cannot change the size of a photo after it has been uploaded. You have to resize it on your PC and then upload it again. See :


Anonymous said...

How do I link the pic the another site?

vin said...


Get the image-link code from :

Making Image Links

Then paste it in a Html Page Element.

James Fish said...

I may not understand...not working for me yet. as an Amazon Associate i would liek to put books in my widget bar. i pasted the code in a new widget. teh widget title appears but not the content. i do have the "3 book widget" but i would like to add individual books (image only), up to 15 different titles. Can you help?

Vin said...


Did you generate the code correctly by clicking on "Build links' after login at the Amazon site?

Did you paste the code in a Html page element?

Anonymous said...

Hi i use make so here is the problem i am all new to this..to copy and paste you go in to edite high light it copy it and then how do i get the widjet into my blog i paste it where and how?

Vin said...


Have a look at : How to Add Widgets to Your Blog.

Anonymous said...

Hi Vin,
I have a Link List widget and I'd like to change some attributes such as line-height, letter-spacing, and maybe link colors. I'm not quite sure I understand how to implement this... is it doable? Thank you!

Vin said...


In CSS part of Template add the style codes under the id of the widget like this :

#LinkList1 (

Anonymous said...

Very Clear and useful!Thank you.

vanessa fried said...

How can I add a categorie section on the side my blog?
Is that considered a widget?


Vin said...

vanessa fried,

Add the Labels Gadget to sidebar.

vanessa fried said...

Thanks so much for your help,I tried pasting the code right under sidebar content and it didn't work.
I also replaced the link of ..... with my label.
Did I do something wrong?

vanessa fried said...

how do I see less of text on the ABOUT ME element?

Vin said...

vanessa fried,

I see your Categories section is up nicely. For the About Me add a HTML gadget to blog and put in just what you want.

FrancesFrancis said...

Hi Vin,
If you have time and if you are interested please could you take a look at my widget problem I have listed on the Help Group Forum: http://groups.google.com/group/blogger-help-howdoi/browse_thread/thread/cc7d8af7f4913128/c5ee8801692ca5ce#c5ee8801692ca5ce
Any thoughts would be welcomed, a solution would be miraculous !!
Many thanks

Vin said...


The easiest method would be to load a template having that feature.

The complicated method would involve creating a section and styling it so that it fits on top of the two sidebars and then to add widgets in it. Just like adding a third column to blog except that width should be larger.


Skip to top of post.

Search Blog Before Commenting


Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,


The Blog Doctor The Blog Doctor2 Blog Doctor Home


Tips On Blogger and Latest News.

Skip to top of post.