Home | About | View All Posts

30 Jun 2014

Blogger widget tags code list

Widgets are basic an individual page element in Blogger template design which can be added or deleted from the Page Element Tab via Blogger admin under layout. Widget data is stored in the Blogger database. Widget tag <b:widget> is replaced with html <div>tag automatically at html page interface in the web browser.

Blogger specified widgets are - Blog, BlogArchive, Feed, Header, HTML, SingleImage, LinkList, List, Logo, BlogProfile, Navbar, VideoBar, NewsBar.

Following attributes are used in widget -
Attribute Description
id It is required and unique attribute in the widget. All details is stored in Blogger database with this 'id' reference.
type It is also required attribute which represents type of widget as specified above like - blog, blog archive, feed etc.
locked It is optional attribute which uses 'yes' or 'no' option. Locked widget can not be deleted or moved.
title It is optional attribute and shows title of the widget.
pageType It is optional attribute which sets widget visibility at page like - 'all,' 'archive,' 'main,' or 'item'.
mobile It also optional one and uses 'yes' or 'no' option. It sets widget visibility at mobile interface.

Widget tags list has been written below as per Blogger coding. Each widget name can be identified by its 'id' attribute. -
Blogger Widget Tags List
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' />
<b:widget id='BlogArchive1' locked='false' mobile='yes' title='Blog Archive' type='BlogArchive'/>
<b:widget  id='Feed1'  locked='false'  title='Latest Posts'  type='Feed' />
<b:widget id='header' type='HeaderView' locked='yes'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='Image1' locked='false' title='Ads 200x200' type='Image'/>
<b:widget id='myList' type='ListView' locked='no' title='My Favorite Blog List'/>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'/>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
<b:widget id='Header1' locked='true' title='Your site description' type='Header'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'/>
<b:widget  id='Feed1'  locked='false'  title='Latest Posts'  type='Feed' />

How to implement above widgets in template:
Widget code can not be used directly at template as per Blogger template guidelines. Widget code must be preceded by a section tag with specific id as like below code -
<b:section class='footerad' id='footerad' showaddelement='yes'>
<b:widget id='HTML7' locked='false' title='' type='HTML' />
If you don't want to place widget code directly at template, use only section tag with specific id and 'showadelement=yes' as below code.

It renders a 'add gadget' link which can be viewed at layout(Layout link) mode of the template. You can add single or multiple widget at layout mode by clicking at 'add gadget' link.
<b:section class='footerad' id='footerad' showaddelement='yes' />

View Full Image

The link 'add gadget' can be viewed at aboveimage printshot of Blogger admin.
Tags :


  1. Hi friends, This is Victoria from Chennai. I am a technology freak. I have read your blog. It was really a wonderful article and I was really impressed by reading this blog. Thanks for sharing this informative blog. I did HTML5 Training at FITA academy, Its really useful for me to make a bright future.