Table of Contents

Globally Available Layout Data Tags
Live Widget Examples
Page Header Widget
Blog Archive Widget
Profile Widget
Feed Widget
Picture Widget
Labels Widget
Link List Widget
Previously Undocumented Live Widget Examples
Blog List Widget
Subscription Links Widget
Page List Widget
Blog Posts Widget
Blog Configuration
Page Navigation
System Messages
Blog Page Feed Links
Posts List
Live PageType Examples
Homepage
Index Page
Label Page
Search Page
Archive Page
Item Page
Static Page
Error Page

Globally Available Layout Data Tags

A Global Layout Data Tag can be used anywhere in your template, even the header.

Table of Contents | Top

Page Header Widget

  • widget.type: Header
  • widget.instanceId: Header1
  • title: blogger2ools: Data Tags Reference for Templates (2019 update)
  • widget.sectionId: documented-widgets
  • widget.actionUrl: //blogger2ools.mystady.com/2011/04/amazon-s3-hosted-jpeg.html?widgetType=Header&widgetId=Header1 π
  • widget.quickEditUrl: //www.blogger.com/rearrange?blogID=8769510562916278720&widgetType=Header&widgetId=Header1&action=editWidget§ionId=documented-widgets π
  • edit-link: Edit
  • description: Here the complete list of Blogger Layout Data Tags, Live Widgets, and PageType examples for your templates. Updated: 2019
  • useImage: true
  • sourceUrl: http://dl.mystady.com/blogger2ools/blogger2ools-logo-90x90.png π
  • height: 90px;
  • width: 90px;
  • imagePlacement: BEHIND (Values: "BEHIND", "REPLACE")
  • backgroundPositionStyleStr: left
  • widthStyleStr: width: 90px;
  • mobile: false

Notes

(3.28.10) - The value of the title attribute in your b:widget element will be ignored.

Table of Contents | Top

Blog Archive Widget

  • widget.type: BlogArchive
  • widget.instanceId: BlogArchive1
  • title: Blog Archive
  • widget.sectionId: documented-widgets
  • widget.actionUrl: //blogger2ools.mystady.com/2011/04/amazon-s3-hosted-jpeg.html?widgetType=BlogArchive&widgetId=BlogArchive1 π
  • widget.quickEditUrl: //www.blogger.com/rearrange?blogID=8769510562916278720&widgetType=BlogArchive&widgetId=BlogArchive1&action=editWidget§ionId=documented-widgets π
  • edit-link: Edit
  • style: FLAT (Values: "FLAT", "MENU", "HIERARCHY")
  • data: (list-type)
    • index: 0
    • name: Sep 18
    • post-count: 2
    • expclass: collapsed
    • url: https://blogger2ools.mystady.com/2015_09_18_archive.html π
    • toggleId:
    • index: 1
    • name: Sep 17
    • post-count: 1
    • expclass: collapsed
    • url: https://blogger2ools.mystady.com/2015_09_17_archive.html π
    • toggleId:
    • index: 2
    • name: Apr 12
    • post-count: 16
    • expclass: expanded
    • url: https://blogger2ools.mystady.com/2011_04_12_archive.html π
    • toggleId:
    • index: 3
    • name: Apr 11
    • post-count: 4
    • expclass: collapsed
    • url: https://blogger2ools.mystady.com/2011_04_11_archive.html π
    • toggleId:
    • index: 4
    • name: Apr 22
    • post-count: 2
    • expclass: collapsed
    • url: https://blogger2ools.mystady.com/2010_04_22_archive.html π
    • toggleId:
    • index: 5
    • name: Mar 23
    • post-count: 1
    • expclass: collapsed
    • url: https://blogger2ools.mystady.com/2010_03_23_archive.html π
    • toggleId:

Table of Contents | Top

Profile Widget

  • widget.type: Profile
  • widget.instanceId: Profile1
  • title: Profile
  • widget.sectionId: documented-widgets
  • widget.actionUrl: //blogger2ools.mystady.com/2011/04/amazon-s3-hosted-jpeg.html?widgetType=Profile&widgetId=Profile1 π
  • widget.quickEditUrl: //www.blogger.com/rearrange?blogID=8769510562916278720&widgetType=Profile&widgetId=Profile1&action=editWidget§ionId=documented-widgets π
  • edit-link: Edit
  • team: false
  • userUrl: https://www.blogger.com/profile/17782443978544199362 π
  • location:
  • showlocation: true
  • aboutme:
  • displayname: mystady.com
  • photo:
  • photo.url: π
  • photo.width:
  • photo.height:
  • photo.alt:
  • authors: (This list-type is only available on team blogs.)
    • displayname:
    • userUrl:

Table of Contents | Top

Feed Widget

The Feed Widget only works when a visitor has JavaScript enabled. It uses the Google AJAX Feed API to dynamically replaces the first element it finds with an id whose value matches widget.instanceId + "_feedItemListDisplay". So in this case the Feed Widget is looking for id="Feed1_feedItemListDisplay".

  • widget.type: Feed
  • widget.instanceId: Feed1
  • title:
  • widget.sectionId: documented-widgets
  • widget.actionUrl: //blogger2ools.mystady.com/2011/04/amazon-s3-hosted-jpeg.html?widgetType=Feed&widgetId=Feed1 π
  • widget.quickEditUrl: //www.blogger.com/rearrange?blogID=8769510562916278720&widgetType=Feed&widgetId=Feed1&action=editWidget§ionId=documented-widgets π
  • edit-link: Edit
  • feedUrl: https://mystady.com/feeds/posts/default/-/Anime π
  • loadingMsg: Loading...
  • showItemDate: true
  • showItemAuthor: true
  • numItemsShow: 5
  • openLinksInNewWindow: true

Code Snippets

The standard-issue Feed Widget (last checked 4.19.10), uses a single includable which contains the following code snippet:

    <h2><data:title/></h2>
    <div class='widget-content' expr:id='data:widget.instanceId + &quot;_feedItemListDisplay&quot;'>
      <span style='filter: alpha(25); opacity: 0.25;'>
        <a expr:href='data:feedUrl'><data:loadingMsg/></a>
      </span>
    </div>
    <b:include name='quickedit'/>

The following code snippet demonstrates the minmum code required to render the feed items:

<div expr:id='data:widget.instanceId + "_feedItemListDisplay"' />

I used quotation marks (") instead of the HTML character entity &quot; because it's smaller (one byte vs. six) and makes for easier reading. The code above won't work outside the Feed Widget. In fact, you could potentially get a bX error depending on where you try to use it. The following code snippet demonstrates a (very simple) workaround:

<div id="Feed1_feedItemListDisplay" />

The following code snippet will replace the entire page with the Feed Widget. I can't think of any use for this...

<body id="Feed1_feedItemListDisplay">

Use the following classes to style the Feed Widget items: item-title, item-date, item-author.

Table of Contents | Top

Picture Widget

  • widget.type: Image
  • widget.instanceId: Image1
  • title: Picture
  • widget.sectionId: documented-widgets
  • widget.actionUrl: //blogger2ools.mystady.com/2011/04/amazon-s3-hosted-jpeg.html?widgetType=Image&widgetId=Image1 π
  • widget.quickEditUrl: //www.blogger.com/rearrange?blogID=8769510562916278720&widgetType=Image&widgetId=Image1&action=editWidget§ionId=documented-widgets π
  • edit-link: Edit
  • sourceUrl: https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uh3-0rxmNnpducq9i4e2o36VU3Pey58rXDEFVlSX2USWwuQqZeQPi6glDkvH7EKlSWddrQjx5AWUMiRW-rAgQWtBFqK5yeByA3OdhJx0nsnzqcKSvzI8xHUFDEPaMkaAI=s0-d π
  • width: 90
  • height: 90
  • caption: The blogger2ools logo.
  • link: https://blogger2ools.mystady.com/ π

Table of Contents | Top

Labels Widget

  • widget.type: Label
  • widget.instanceId: Label1
  • title: Labels
  • widget.sectionId: documented-widgets
  • widget.actionUrl: //blogger2ools.mystady.com/2011/04/amazon-s3-hosted-jpeg.html?widgetType=Label&widgetId=Label1 π
  • widget.quickEditUrl: //www.blogger.com/rearrange?blogID=8769510562916278720&widgetType=Label&widgetId=Label1&action=editWidget§ionId=documented-widgets π
  • edit-link: Edit
  • display: list (Values: "list", "cloud")
  • showFreqNumbers: true
  • labels: (list-type)
    • index: 0
    • name: Images
    • count: 16
    • url: https://blogger2ools.mystady.com/search/label/Images π
    • cssSize: 5
    • index: 1
    • name: Amazon S3
    • count: 5
    • url: https://blogger2ools.mystady.com/search/label/Amazon%20S3 π
    • cssSize: 3
    • index: 2
    • name: Picasa
    • count: 4
    • url: https://blogger2ools.mystady.com/search/label/Picasa π
    • cssSize: 3
    • index: 3
    • name: Flickr
    • count: 3
    • url: https://blogger2ools.mystady.com/search/label/Flickr π
    • cssSize: 3
    • index: 4
    • name: One Fish
    • count: 3
    • url: https://blogger2ools.mystady.com/search/label/One%20Fish π
    • cssSize: 3
    • index: 5
    • name: Two Fish
    • count: 3
    • url: https://blogger2ools.mystady.com/search/label/Two%20Fish π
    • cssSize: 3
    • index: 6
    • name: YouTube
    • count: 3
    • url: https://blogger2ools.mystady.com/search/label/YouTube π
    • cssSize: 3
    • index: 7
    • name: Red Fish
    • count: 2
    • url: https://blogger2ools.mystady.com/search/label/Red%20Fish π
    • cssSize: 2
    • index: 8
    • name: Video
    • count: 2
    • url: https://blogger2ools.mystady.com/search/label/Video π
    • cssSize: 2
    • index: 9
    • name: Blue Fish
    • count: 1
    • url: https://blogger2ools.mystady.com/search/label/Blue%20Fish π
    • cssSize: 1
    • index: 10
    • name: Facebook
    • count: 1
    • url: https://blogger2ools.mystady.com/search/label/Facebook π
    • cssSize: 1
    • index: 11
    • name: Img Box
    • count: 1
    • url: https://blogger2ools.mystady.com/search/label/Img%20Box π
    • cssSize: 1
    • index: 12
    • name: Photobucket
    • count: 1
    • url: https://blogger2ools.mystady.com/search/label/Photobucket π
    • cssSize: 1
    • index: 13
    • name: TinyPic
    • count: 1
    • url: https://blogger2ools.mystady.com/search/label/TinyPic π
    • cssSize: 1

Identifying Label Pages

The standard-issue Labels Widget (last checked 4.19.10), uses the following conditional statement to check if you're on a label page:

<b:if cond='data:blog.url == data:label.url'>

Unfortunately, that code only works on the first page. Replace it (both instances), with the following code snippet to have it work on all Label Pages:

<b:if cond='data:label.name == data:blog.searchLabel'>

Label Pages and Search Pages function similarly. See also Customizing Blogger's Search Result Pages With searchQuery.

Table of Contents | Top

Blog List Widget

  • widget.type: BlogList
  • widget.instanceId: BlogList1
  • title: Blog List
  • widget.sectionId: undocumented-widgets
  • widget.actionUrl: //blogger2ools.mystady.com/2011/04/amazon-s3-hosted-jpeg.html?widgetType=BlogList&widgetId=BlogList1 π
  • widget.quickEditUrl: //www.blogger.com/rearrange?blogID=8769510562916278720&widgetType=BlogList&widgetId=BlogList1&action=editWidget§ionId=undocumented-widgets π
  • edit-link: Edit
  • showIcon: true
  • showItemThumbnail: true
  • showItemTitle: true
  • showItemSnippet: true
  • showTimePeriodSinceLastUpdate: true
  • numItemsToShow: 0
  • totalItems: 2
  • showNText: Show 2
  • showAllText: Show All
  • items: (list-item)
    • index: 0
    • displayStyle: display: block;
    • timePeriodSinceLastUpdate: 8 years ago
    • blogTitle: Blogger Buzz
    • blogUrl: http://blogger.googleblog.com/ π
    • blogIconUrl: https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uEUqPeQInXbglCKWzhcuaN0_U3sq6phOffNtxlpCysuAKdpmmU8mhJ0-EdleYbLfGpzhOOpSpQ8-vopSPnL4r0yuzo7_tQvXTbJoA=s16-w16-h16 π
    • itemTitle: An update to the Blogger post editor to help with mixed content
    • itemSnippet: Back in September, we announced that HTTPS support was coming to blogspot.com, making it possible for you to encrypt connections to your blog; since then,...
    • itemUrl: http://blogger.googleblog.com/2016/04/an-update-to-blogger-post-editor-to.html π
    • itemThumbnail:
    • itemThumbnail.height: 72
    • itemThumbnail.width: 72
    • itemThumbnail.url: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMKJqBiANT9FM4EsDjfdI99e3Anvl5CFMAvxnvOp3FLcOwkyAKGH1TB6P0XmEWo6ROgzv7URNxuCUpkr6O5Vu_fOZVMLibUrt3viWC7g83GVIZBvxw9uyggUDG0oqLLHp-DcPVXg/s72-c/mixed-content-warning-screenshot.png π
    • index: 1
    • displayStyle: display: block;
    • timePeriodSinceLastUpdate: 9 years ago
    • blogTitle: Blogger in Draft
    • blogUrl: http://bloggerindraft.blogspot.com/ π
    • blogIconUrl: https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_t1hORuNMWTE8XkTDRC--tQZUWuyCnDlBCNoSRGSCpvox_wAqFuCNxXObejcfaJJAd-rTt7_pQym-1oVaq2ExfOaHOMABAeIUSpY-eI6eeUyA=s16-w16-h16 π
    • itemTitle: Review Situs Agen Poker - Mencari Agen Poker Terpercaya
    • itemSnippet: *Review Situs Agen Poker *- Anda jangan khawatir tentang *Bandar Agen Poker* Penipu di karenakan kami Review Situs Agen Poker sudah menyiapkan sebuah ulasa...
    • itemUrl: http://bloggerindraft.blogspot.com/2015/10/review-situs-agen-poker-mencari-agen.html π
    • itemThumbnail:
    • itemThumbnail.height: 72
    • itemThumbnail.width: 72
    • itemThumbnail.url: http://3.bp.blogspot.com/-gApepE2m8ls/VhSrJIdiVKI/AAAAAAAAA14/HBgcySpMgmY/s72-c/DAFTAR%2BSITUS%2BAGEN%2BPOKER.PNG π

Warning: The following data tags will trigger a bX-1k6z5j error (last checked 4.20.10), if used when there's no thumbnail present: itemThumbnail.height, itemThumbnail.width, itemThumbnail.url. Always check for the presence of a thumbnail beforehand. The following code snippet will demonstrate how:

<b:if cond='data:item.itemThumbnail'>

Table of Contents | Top

Page List Widget

  • widget.type: PageList
  • widget.instanceId: PageList1
  • title: Pages
  • widget.sectionId: undocumented-widgets
  • widget.actionUrl: //blogger2ools.mystady.com/2011/04/amazon-s3-hosted-jpeg.html?widgetType=PageList&widgetId=PageList1 π
  • widget.quickEditUrl: //www.blogger.com/rearrange?blogID=8769510562916278720&widgetType=PageList&widgetId=PageList1&action=editWidget§ionId=undocumented-widgets π
  • edit-link: Edit
  • links: (list-type)
    • index: 0
    • isCurrentPage: false
    • href: https://blogger2ools.mystady.com/ π
    • title: Home
    • index: 1
    • isCurrentPage: false
    • href: https://blogger2ools.mystady.com/p/test-page-one.html π
    • title: Test Page One
    • index: 2
    • isCurrentPage: false
    • href: https://blogger2ools.mystady.com/p/test-page-two.html π
    • title: Test Page Two

Table of Contents | Top

Blog Posts Widget

  • widget.type: Blog
  • widget.instanceId: Blog1
  • title: blogger2ools: Data Tags Reference for Templates (2019 update)
  • widget.sectionId: blog-post-widget
  • widget.actionUrl: //blogger2ools.mystady.com/2011/04/amazon-s3-hosted-jpeg.html?widgetType=Blog&widgetId=Blog1 π
  • widget.quickEditUrl: //www.blogger.com/rearrange?blogID=8769510562916278720&widgetType=Blog&widgetId=Blog1&action=editWidget§ionId=blog-post-widget π
  • edit-link: Edit

Blog Configuration

  • showDummy false
  • dummyUrl
  • languageCode en
  • authorLabel: Posted by
  • showAuthor: true
  • timestampLabel:
  • showTimestamp: true
  • commentLabel: comments
  • commentLabelPlural: comments
  • backlinkLabel:
  • *backlinksLabel:
  • postLabelsLabel: Labels:
  • reactionsLabel:
  • showReactions: false
  • blogCommentMessage: *COMMENT FORM MESSAGE*
  • numPosts 1

Page Navigation

  • navMessage:
  • olderPageUrl: https://blogger2ools.mystady.com/2011/04/amazon-s3-hosted-jpg.html π
  • olderPageTitle: Older Post
  • newerPageUrl: https://blogger2ools.mystady.com/2011/04/amazon-s3-hosted-png.html π
  • newerPageTitle: Newer Post
  • homeMsg: Home

System Messages

  • blogTeamBlogMessage:
  • feedLinksMsg: Subscribe to:
  • emailPostMsg: Email Post
  • editPostMsg: Edit Post
  • postCommentMsg: Post a Comment
  • commentPostedByMsg: said...
  • deleteCommentMsg: Delete Comment
  • deleteBacklinkMsg:
  • feedLinks: (list-type)
    • index: 0
    • url: https://blogger2ools.mystady.com/feeds/posts/default π
    • name: Posts
    • feedType: Atom
    • mimeType: application/atom+xml

Posts List

  • posts: (list-type)
    • index: 0
    • allowComments: true
    • allowNewComments:
    • embedCommentForm: false
    • commentPagingRequired: false
    • showBacklinks:
    • hasJumpLink: false
    • isDateStart: true
    • isFirstPost: true
    • id: 3519214775995950214
    • dateHeader: Tuesday, April 12, 2011
    • timestamp: 4/12/2011
    • timestampISO8601: 2011-04-12T03:40:00-04:00
    • author: mystady.com
    • authorAboutMe:
    • authorProfileUrl: https://www.blogger.com/profile/17782443978544199362
    • authorPhoto.url:
    • authorPhoto.width:
    • authorPhoto.height:
    • authorPhoto.thumbUrl:
    • authorPhoto.thumbWidth:
    • authorPhoto.thumbHeight:
    • title: Amazon S3 Hosted JPEG
    • snippet: Hosted on Amazon S3 using my own domain name.
    • body:

      Hosted on Amazon S3 using my own domain name.
    • firstImageUrl: http://fap.mystady.com/jpeg.jpeg π
    • jumpText: Continue Reading →
    • numComments: 0
    • numBacklinks: 0
    • adminClass: blog-admin pid-1578374961
    • avatarIndentClass: avatar-comment-indent
    • link: π
    • url: https://blogger2ools.mystady.com/2011/04/amazon-s3-hosted-jpeg.html π
    • editUrl: π
    • emailPostUrl: https://www.blogger.com/email-post/8769510562916278720/3519214775995950214 π
    • reactionsUrl: π
    • addCommentUrl: https://www.blogger.com/comment/fullpage/post/8769510562916278720/3519214775995950214 π
    • commentFormIframeSrc: π
    • addCommentOnclick:
    • appRpcRelayPath: π
    • communityId:
    • commentRangeText:
    • oldLinkClass:
    • olderLinkText: ‹Older
    • olderLinkUrl:
    • oldestLinkText: «Oldest
    • oldestLinkUrl:
    • newLinkClass:
    • newerLinkText: Newer›
    • newerLinkUrl:
    • newestLinkText: Newest»
    • newestLinkUrl:
    • noNewCommentsText:
    • backlinksLabel:
    • commentLabelFull: No comments
    • createLinkUrl:
    • createLinkLabel:
    • commentSource: 0
    • showThreadedComments:
    • commentJso:
    • commentMsgs:
    • commentConfig:
    • commentHtml:
    • iframeCommentSrc:
    • cmtfpIframe:
    • iframeColorizer:
    • friendConnectJs:
    • feedLinks: (list-type)
      • index: 0
      • url: https://blogger2ools.mystady.com/feeds/3519214775995950214/comments/default π
      • mimeType: application/atom+xml
      • name: Post Comments
      • feedType: Atom
    • labels: (list-type)
      • index: 0
      • name: Amazon S3
      • url: https://blogger2ools.mystady.com/search/label/Amazon%20S3 π
      • isLast:
      • index: 1
      • name: Images
      • url: https://blogger2ools.mystady.com/search/label/Images π
      • isLast: true
    • enclosures: (list-type)
    • backlinks: (list-type)
    • comments: (list-type)

Table of Contents | Top