Blogger (Blogspot) templates use special built-in data objects inside their XML template system — accessed using the syntax data:.

👁️21

These data: objects give you dynamic access to all the internal Blogger data: posts, comments, widgets, pages, feeds, etc.

⚙️ Complete List of Blogger Built-in `data:` Objects

Below is the master list of all data: variables officially supported (and many hidden/undocumented ones used by pro devs ????):

???? Global Objects

Object	Description
`data:blog`	Current blog’s metadata (URL, title, language, etc.)
`data:messages`	Text messages used for localization and UI labels
`data:skin`	Template skin settings (colors, fonts, etc.)
`data:view`	Current view type — e.g., `item`, `archive`, `label`, `index`
`data:widgets`	All widgets on the current page
`data:page`	Info about the current page being rendered

???? Blog Object → `data:blog`

Property	Example / Description
`data:blog.url`	Full blog URL (`https://yoursite.blogspot.com/`)
`data:blog.homepageUrl`	Homepage URL
`data:blog.pageTitle`	Current page title
`data:blog.pageType`	View type (`item`, `index`, `archive`, etc.)
`data:blog.languageDirection`	`ltr` or `rtl`
`data:blog.locale`	Blog language (`en`, `hi`, etc.)
`data:blog.title`	Blog name
`data:blog.description`	Blog tagline/description
`data:blog.postLabelUrl`	URL for a given label/tag
`data:blog.searchUrl`	URL for Blogger search
`data:blog.urlName`	Blogspot subdomain
`data:blog.canonicalHomepageUrl`	Canonical homepage URL
`data:blog.encoding`	UTF-8 usually
`data:blog.feedLinks`	Feed URLs
`data:blog.admin`	Info if current viewer is admin

???? Page Object → `data:page`

Property	Description
`data:page.name`	Page title
`data:page.url`	Page permalink
`data:page.type`	Page type (`static_page`, `item`, etc.)
`data:page.title`	Title text
`data:page.identifier`	Page unique ID
`data:page.body`	Full HTML content of static page
`data:page.dateHeader`	Page creation date
`data:page.commentsEnabled`	Boolean
`data:page.parent`	Parent page info (if any)

???? Post Object → `data:post`

Property	Description
`data:post.title`	Post title
`data:post.body`	Post HTML content
`data:post.snippet`	Auto-generated summary
`data:post.url`	Full post link
`data:post.id`	Post ID
`data:post.timestamp`	Published timestamp
`data:post.labels`	Labels/tags list
`data:post.author`	Author info
`data:post.commentCount`	Total comments
`data:post.featuredImage`	Featured image URL (auto detected)
`data:post.thumbnailUrl`	Thumbnail image
`data:post.titleText`	Title as plain text
`data:post.shareUrl`	Social share link
`data:post.published`	Publish date formatted
`data:post.updated`	Updated date formatted
`data:post.commentUrl`	Comment page URL
`data:post.allowComments`	Boolean
`data:post.isFirstPost`	Boolean
`data:post.isLastPost`	Boolean
`data:post.content`	Alias for full HTML
`data:post.hasJumpLink`	Whether post has “Read more” jump
`data:post.jumpLinkText`	Read more text

???? Author Object → `data:post.author`

Property	Description
`data:post.author.name`	Author name
`data:post.author.url`	Author profile URL
`data:post.author.avatarImage`	Author photo
`data:post.author.email`	Author email (if public)

???? Comment Object → `data:comment`

Property	Description
`data:comment.author`	Author name
`data:comment.authorUrl`	Author link
`data:comment.body`	Comment text
`data:comment.timestamp`	Date/time
`data:comment.id`	Comment ID
`data:comment.isDeleted`	Boolean
`data:comment.replyUrl`	Reply link
`data:comment.deleteUrl`	Delete link
`data:comment.editUrl`	Edit link (admin only)
`data:comment.parentId`	Parent comment ID (for nested replies)

???? Widget Objects

Object	Description
`data:widgets.Blog`	Main posts widget
`data:widgets.Header`	Header widget
`data:widgets.Profile`	Profile widget
`data:widgets.PopularPosts`	Popular posts
`data:widgets.Label`	Label/tag widget
`data:widgets.PageList`	Static page list
`data:widgets.BlogArchive`	Archive links
`data:widgets.LinkList`	Custom link list
`data:widgets.Text`	Text widget
`data:widgets.FollowByEmail`	Subscribe widget
`data:widgets.Attribution`	Footer attribution

Each widget has data:widget.title, data:widget.content, data:widget.sectionId, data:widget.id, etc.

???? Looping Variables (inside widgets)

Variable	Example
`data:posts`	Loop for all posts
`data:post.labels`	Loop for each label in a post
`data:comments`	Loop for comments
`data:links`	Loop for link lists
`data:labels`	Loop for label lists
`data:pages`	Loop for static pages
`data:items`	General-purpose loop (used by list widgets)

???? Special Context Variables

Object	Description
`data:post.url.canonical`	Canonical link
`data:view.isHomepage`	True on homepage
`data:view.isLabelSearch`	True on label view
`data:view.isArchive`	True on archive view
`data:view.isPost`	True on single post
`data:view.isPage`	True on static page
`data:view.searchLabel`	Current label name
`data:view.searchQuery`	Query term if search page
`data:view.isMultipleItems`	True if multiple posts shown

???? Feed & Pagination Objects

Object	Description
`data:post.previous`	Previous post info
`data:post.next`	Next post info
`data:posts.nextPageUrl`	Pagination URL (next page)
`data:posts.prevPageUrl`	Previous page URL
`data:posts.startIndex`	Index of first post on page
`data:posts.totalCount`	Total number of posts available

???? Conditional & Utility Tags

These aren’t objects but often used with data::

<b:if cond='data:view.isPost'> ... </b:if>
<b:loop values='data:posts' var='post'> ... </b:loop>
<b:eval expr='data:post.title' />
<b:include data='post' name='post'/>

Would you like me to give you a ready-to-use cheatsheet HTML that lists and displays all data: values dynamically on your Blogger site (for debugging and learning)?
It’s super useful for developers to explore data: structure live.

You said:

conditional tags list

ChatGPT said:

Perfect question again, Dhanjee ????‍????????

Blogger (Blogspot) templates have a powerful conditional system — using <b:if>, <b:else>, <b:elseif>, <b:switch>, etc. — which allows you to control what HTML shows based on the data: object.

Here’s the complete & updated list of Blogger conditional tags + how and when to use them ????

???? Main Conditional Tags (Core Blogger XML Tags)

Tag	Purpose	Example
`<b:if cond=''>`	Runs content if condition is true	`<b:if cond='data:view.isHomepage'>Home</b:if>`
`<b:elseif cond=''>`	“Else if” branch in `<b:if>`	`<b:elseif cond='data:view.isPost' />`
`<b:else/>`	Executes when previous `<b:if>` fails	`<b:else/>Not homepage</b:else>`
`<b:switch var=''>`	Switch between multiple cases	`<b:switch var='data:view.pageType'>`
`<b:case value=''>`	One case inside switch	`<b:case value='item'>Single Post</b:case>`
`<b:default/>`	Default case if no case matches	`<b:default/>Fallback</b:default>`
`<b:loop values='' var=''>`	Loops through lists	`<b:loop values='data:posts' var='post'>...</b:loop>`
`<b:with value='' var=''>`	Creates scoped variable	`<b:with value='data:blog.url' var='siteUrl'>...</b:with>`
`<b:eval expr=''/>`	Evaluates and outputs data	`<b:eval expr='data:post.title'/>`

???? Common Conditional Expressions

You can use these in the cond='' attribute of <b:if> or <b:elseif>.

???? View-based Conditions

Condition	Meaning
`data:view.isHomepage`	True on homepage
`data:view.isPost`	True on single post
`data:view.isPage`	True on static page
`data:view.isArchive`	True on archive page
`data:view.isLabelSearch`	True when viewing label/tag
`data:view.isSearch`	True when doing a search
`data:view.isMultipleItems`	True when showing multiple posts (home/label)

✅ Example:

<b:if cond='data:view.isPost'>
  <h2>Single Post Page</h2>
</b:if>

???? Post-based Conditions

Condition	Meaning
`data:post.allowComments`	Comments enabled
`data:post.hasJumpLink`	Has “Read more”
`data:post.featuredImage`	Has featured image
`data:post.labels`	Has labels
`data:post.author.name == "Dhanjee Rider ✨"`	Post by specific author
`data:post.isFirstPost`	First post in loop
`data:post.isLastPost`	Last post in loop

✅ Example:

<b:if cond='data:post.featuredImage'>
  <img expr:src='data:post.featuredImage'/>
</b:if>

???? Blog-level Conditions

Condition	Meaning
`data:blog.admin`	Viewer is admin
`data:blog.languageDirection == "rtl"`	RTL layout
`data:blog.pageType == "item"`	Single post view
`data:blog.url == "https://yoursite.blogspot.com/"`	On specific URL
`data:blog.isMobile`	True on mobile template
`data:blog.isPrivate`	True for private blogs

✅ Example:

<b:if cond='data:blog.admin'>
  <p>Welcome Admin!</p>
</b:if>

???? Widget-based Conditions

Condition	Meaning
`data:widget.type == "Text"`	Text widget
`data:widget.id == "HTML1"`	Widget ID check
`data:widget.sectionId == "sidebar-right-1"`	Widget in sidebar
`data:widget.title == "Popular Posts"`	Title check

✅ Example:

<b:if cond='data:widget.title == "Popular Posts"'>
  <b:include name='widget-title'/>
</b:if>

???? Label/Loop Conditions

Condition	Meaning
`data:label.name == "Movies"`	Label name is “Movies”
`data:label.url`	Label URL exists
`data:labels != empty`	Has any labels
`data:posts != empty`	Any posts exist

✅ Example:

<b:if cond='data:labels != empty'>
  <ul>
    <b:loop values='data:labels' var='label'>
      <li><a expr:href='data:label.url'><data:label.name/></a></li>
    </b:loop>
  </ul>
</b:if>

⚙️ Logical & Comparison Operators

You can use all of these inside cond='':

Operator	Meaning	Example
`==`	Equals	`data:view.pageType == "item"`
`!=`	Not equal	`data:view.pageType != "item"`
`&&`	AND	`data:view.isPost && data:post.allowComments`
`		`
`!`	NOT	`!data:view.isHomepage`
`<`, `>`, `<=`, `>=`	Compare numbers	`data:post.commentCount > 0`

✅ Example:

<b:if cond='data:view.isPost && data:post.commentCount > 0'>
  <h3>Comments:</h3>
</b:if>

???? Full Example — Combine All

<b:if cond='data:view.isHomepage'>
  <h2>Welcome to Homepage</h2>

<b:elseif cond='data:view.isPost'/>
  <h2><data:post.title/></h2>

<b:elseif cond='data:view.isLabelSearch'/>
  <h2>Browsing Label: <data:view.searchLabel/></h2>

<b:else/>
  <h2>Other Page</h2>
</b:if>

???? Pro Tip (Switch Style)

<b:switch var='data:view.pageType'>
  <b:case value='index'>
    <h1>Homepage</h1>
  </b:case>
  <b:case value='item'>
    <h1>Single Post</h1>
  </b:case>
  <b:default>
    <h1>Other Page</h1>
  </b:default>
</b:switch>

Would you like me to give you a ready-made Blogger conditional reference HTML file that you can upload to your test blog to visually see which conditions return true/false on different pages (homepage, post, label, page, etc.)?
It’s super helpful for theme developers like you ????

You said:

Widgets and b section list with right example

ChatGPT said:

Excellent, Dhanjee ????‍????????
Now we’re going deep into Blogger Widgets (<b:widget>) and Sections (<b:section>), the core structure of any Blogger XML theme — everything you see (header, sidebar, posts, footer, etc.) is built from these two.

Here’s the complete, developer-level reference — with live examples and proper usage ????

???? 1️⃣ `<b:section>` — Widget Container

A <b:section> is a container area that holds one or more widgets.

???? Basic Syntax

<b:section id='header' class='header' showaddelement='yes'>
  <!-- Widgets go here -->
</b:section>

???? Attributes of `<b:section>`

Attribute	Description	Example
`id`	Unique ID of the section	`id='sidebar-right-1'`
`class`	CSS class	`class='main-section'`
`maxwidgets`	Max number of widgets allowed	`maxwidgets='3'`
`showaddelement`	Allow “Add a Gadget” in Layout	`showaddelement='yes'`
`name`	Display name in Blogger layout editor	`name='Sidebar'`
`mobile`	Visible on mobile or not	`mobile='yes'`
`locked`	Prevent layout edit	`locked='true'`

✅ Example:

<b:section id='sidebar-right-1' class='sidebar' maxwidgets='5' showaddelement='yes' name='Right Sidebar'/>

???? 2️⃣ `<b:widget>` — Gadget / Module

Widgets are the actual functional blocks (Posts, Labels, Popular Posts, Text, HTML/JavaScript, etc.).

???? Basic Syntax

<b:widget id='Text1' type='Text' title='About Me'>
  <b:widget-settings>
    <b:widget-setting name='content'>Welcome to my blog!</b:widget-setting>
  </b:widget-settings>
</b:widget>

???? Main `<b:widget>` Attributes

Attribute	Description	Example
`id`	Unique widget ID	`id='HTML2'`
`type`	Type of widget	`type='HTML'`
`title`	Widget title	`title='Custom HTML'`
`locked`	Prevent edit in layout	`locked='true'`
`version`	Widget version	`version='2'`
`mobile`	Visible on mobile	`mobile='yes'`

⚙️ 3️⃣ Common Widget Types (and Live Examples)

Widget Type	Description	Example
`Blog`	Main posts list	`<b:widget id='Blog1' type='Blog' title='Main Blog Posts'/>`
`Header`	Blog header (title + description)	`<b:widget id='Header1' type='Header'/>`
`Profile`	Blogger profile widget	`<b:widget id='Profile1' type='Profile'/>`
`LinkList`	List of links	`<b:widget id='LinkList1' type='LinkList'/>`
`PageList`	Navigation menu of pages	`<b:widget id='PageList1' type='PageList'/>`
`Label`	Label/tag list	`<b:widget id='Label1' type='Label'/>`
`BlogArchive`	Monthly archive	`<b:widget id='BlogArchive1' type='BlogArchive'/>`
`PopularPosts`	Displays popular posts	`<b:widget id='PopularPosts1' type='PopularPosts'/>`
`HTML`	Custom HTML/JS	`<b:widget id='HTML1' type='HTML'/>`
`Text`	Text content	`<b:widget id='Text1' type='Text'/>`
`Image`	Single image widget	`<b:widget id='Image1' type='Image'/>`
`FollowByEmail`	Email subscription	`<b:widget id='FollowByEmail1' type='FollowByEmail'/>`
`FeaturedPost`	Highlight one post	`<b:widget id='FeaturedPost1' type='FeaturedPost'/>`
`AdSense`	Display AdSense ads	`<b:widget id='AdSense1' type='AdSense'/>`
`Feed`	RSS/Atom feed display	`<b:widget id='Feed1' type='Feed'/>`
`PageHeader`	Theme header/logo/banner	`<b:widget id='PageHeader1' type='PageHeader'/>`
`Attribution`	“Powered by Blogger” footer	`<b:widget id='Attribution1' type='Attribution'/>`

???? 4️⃣ Example Layout Structure

<b:section id='header' class='header' showaddelement='no' name='Header'>
  <b:widget id='Header1' type='Header' title='Blog Header'/>
</b:section>

<b:section id='main' class='main' showaddelement='no' name='Main Posts'>
  <b:widget id='Blog1' type='Blog' title='Posts'/>
</b:section>

<b:section id='sidebar' class='sidebar' showaddelement='yes' name='Sidebar'>
  <b:widget id='PopularPosts1' type='PopularPosts' title='Trending Now'/>
  <b:widget id='Label1' type='Label' title='Categories'/>
  <b:widget id='HTML1' type='HTML' title='Custom Ad'/>
</b:section>

<b:section id='footer' class='footer' showaddelement='yes' name='Footer'>
  <b:widget id='Attribution1' type='Attribution'/>
</b:section>

???? 5️⃣ Inside Each `<b:widget>` — Dynamic Data Access

You can use data:widget and other internal data variables inside:

<b:includable id='main'>
  <div class='widget'>
    <h3><data:widget.title/></h3>
    <div class='widget-content'>
      <data:widget.content/>
    </div>
  </div>
</b:includable>

⚡ 6️⃣ Including or Reusing Widgets

You can include widgets or sections elsewhere using:

<b:include data='widget' name='main'/>

or for sections:

<b:section id='main' showaddelement='no'>
  <b:widget id='Blog1' type='Blog'/>
</b:section>

???? 7️⃣ Example — Custom Section with Widgets

<b:section id='featured-area' showaddelement='yes' name='Featured Area'>
  <b:widget id='FeaturedPost1' type='FeaturedPost' title='Editor’s Pick'/>
  <b:widget id='HTML2' type='HTML' title='Custom HTML Banner'>
    <b:widget-settings>
      <b:widget-setting name='content'>
        <![CDATA[
          <div class="banner">???? Exclusive Release!</div>
        ]]>
      </b:widget-setting>
    </b:widget-settings>
  </b:widget>
</b:section>

???? 8️⃣ Access Widget Data Conditionally

<b:if cond='data:widget.type == "PopularPosts"'>
  <h3>???? Trending Section</h3>
</b:if>

✅ Summary Table

Tag	Role	Used Inside
`<b:section>`	Group of widgets (containers like header/sidebar)	Theme body
`<b:widget>`	Single widget block (Blog, HTML, etc.)	Inside `<b:section>`
`<b:widget-settings>`	Widget data/settings	Inside `<b:widget>`
`<b:includable>`	Widget template part	Inside widget definition
`<b:include>`	Include other widget templates	Anywhere needed

Perfect! Maine aapki file check kar li hai. Ab main aapke liye mobile-friendly aur default Blogger widget CSS ke saath complete optimized code bana raha hoon:templatetoaster+1

xml<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:layoutsVersion='3' b:responsive='true' b:templateUrl='pink-minimal-blog' b:templateVersion='1.0.0' b:version='2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
  <meta charset='UTF-8'/>
  <meta content='width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes' name='viewport'/>
  <meta content='dark light' name='color-scheme'/>
  
  <title><data:blog.pageTitle/></title>
  
  <!-- SEO Meta Tags -->
  <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' name='description'/>
  </b:if>
  
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta expr:content='data:post.title' property='og:title'/>
    <meta expr:content='data:post.snippets.short' property='og:description'/>
    <meta expr:content='data:post.firstImageUrl' property='og:image'/>
  </b:if>
  
  <b:skin><![CDATA[
  /* ==========================================================================
     Pink Minimal Blog Theme - Mobile-First CSS
     ========================================================================== */
  
  /* Root Variables */
  :root {
    --primary-pink: #FFB3BA;
    --light-pink: #FFE5E5;
    --white: #ffffff;
    --black: #1a1a1a;
    --gray: #666666;
    --light-gray: #f5f5f5;
    --border-color: #e0e0e0;
    --shadow: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-hover: 0 4px 16px rgba(0,0,0,0.12);
    --transition: all 0.3s ease;
    --radius: 12px;
    --font-main: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  }
  
  /* Dark Mode */
  @media (prefers-color-scheme: dark) {
    :root {
      --white: #1a1a1a;
      --black: #ffffff;
      --light-gray: #2a2a2a;
      --border-color: #3a3a3a;
      --gray: #b0b0b0;
      --shadow: 0 2px 8px rgba(0,0,0,0.3);
      --shadow-hover: 0 4px 16px rgba(0,0,0,0.4);
    }
  }
  
  /* Base Styles */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: var(--font-main);
    background: var(--white);
    color: var(--black);
    line-height: 1.6;
    overflow-x: hidden;
    font-size: 16px;
  }
  
  a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
  }
  
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  /* Container - Mobile First */
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
  }
  
  @media (min-width: 768px) {
    .container {
      padding: 0 24px;
    }
  }
  
  /* ==========================================================================
     Header & Navigation
     ========================================================================== */
  
  .header {
    background: var(--white);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow);
  }
  
  .header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    min-height: 56px;
  }
  
  @media (min-width: 768px) {
    .header-inner {
      padding: 15px 24px;
      min-height: 64px;
    }
  }
  
  .blog-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-pink);
  }
  
  @media (min-width: 768px) {
    .blog-title {
      font-size: 24px;
    }
  }
  
  /* Hamburger Menu - Mobile Friendly */
  .hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    width: 30px;
    height: 25px;
    z-index: 1001;
    padding: 5px;
    -webkit-tap-highlight-color: transparent;
  }
  
  .hamburger span {
    width: 100%;
    height: 3px;
    background: var(--black);
    border-radius: 3px;
    transition: var(--transition);
  }
  
  #menu-toggle {
    display: none;
  }
  
  #menu-toggle:checked ~ .hamburger span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
  }
  
  #menu-toggle:checked ~ .hamburger span:nth-child(2) {
    opacity: 0;
  }
  
  #menu-toggle:checked ~ .hamburger span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
  }
  
  /* Sidebar Navigation - Mobile Optimized */
  .nav-sidebar {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 320px;
    height: 100vh;
    background: var(--white);
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    transition: var(--transition);
    overflow-y: auto;
    z-index: 999;
    padding: 70px 20px 30px;
  }
  
  @media (min-width: 768px) {
    .nav-sidebar {
      padding: 80px 30px 30px;
    }
  }
  
  #menu-toggle:checked ~ .nav-sidebar {
    right: 0;
  }
  
  .nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 998;
  }
  
  #menu-toggle:checked ~ .nav-overlay {
    opacity: 1;
    visibility: visible;
  }
  
  .nav-menu {
    list-style: none;
  }
  
  .nav-menu li {
    margin-bottom: 15px;
  }
  
  .nav-menu a {
    display: block;
    padding: 14px 0;
    font-size: 16px;
    font-weight: 500;
    border-bottom: 1px solid var(--border-color);
    -webkit-tap-highlight-color: transparent;
  }
  
  .nav-menu a:active {
    background: var(--light-pink);
  }
  
  /* Search Box - Mobile Friendly */
  .search-box {
    margin-top: 25px;
  }
  
  .search-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 16px;
    background: var(--light-gray);
    color: var(--black);
  }
  
  .search-input:focus {
    outline: none;
    border-color: var(--primary-pink);
  }
  
  /* ==========================================================================
     Filter Pills - Mobile Responsive
     ========================================================================== */
  
  .filter-section {
    padding: 20px 0;
    background: var(--light-gray);
  }
  
  @media (min-width: 768px) {
    .filter-section {
      padding: 30px 0;
    }
  }
  
  .filter-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 5px;
  }
  
  .pill {
    padding: 10px 18px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition);
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }
  
  .pill:active {
    transform: scale(0.95);
  }
  
  .pill:hover,
  .pill.active {
    background: var(--light-pink);
    border-color: var(--primary-pink);
    color: var(--primary-pink);
  }
  
  /* ==========================================================================
     Post Grid Layout - Mobile First
     ========================================================================== */
  
  .post-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 30px 0;
  }
  
  @media (min-width: 640px) {
    .post-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }
  }
  
  @media (min-width: 1024px) {
    .post-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 25px;
      padding: 40px 0;
    }
  }
  
  .post-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    position: relative;
  }
  
  @media (hover: hover) {
    .post-card:hover {
      box-shadow: var(--shadow-hover);
      transform: translateY(-5px);
    }
  }
  
  .post-thumbnail {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    overflow: hidden;
    background: var(--light-gray);
  }
  
  .post-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
  }
  
  @media (hover: hover) {
    .post-card:hover .post-thumbnail img {
      transform: scale(1.05);
    }
  }
  
  /* Bookmark Button - Touch Friendly */
  .bookmark-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
  }
  
  .bookmark-btn:active {
    transform: scale(0.9);
  }
  
  .bookmark-btn svg {
    width: 18px;
    height: 18px;
    fill: var(--gray);
  }
  
  .bookmark-btn.active svg {
    fill: var(--primary-pink);
  }
  
  /* Post Content */
  .post-content {
    padding: 16px;
  }
  
  @media (min-width: 768px) {
    .post-content {
      padding: 20px;
    }
  }
  
  .post-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--gray);
    flex-wrap: wrap;
  }
  
  @media (min-width: 768px) {
    .post-meta {
      font-size: 13px;
      gap: 15px;
    }
  }
  
  .author-info {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  
  .author-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }
  
  @media (min-width: 768px) {
    .author-avatar {
      width: 24px;
      height: 24px;
    }
  }
  
  .read-time::before {
    content: '•';
    margin-right: 8px;
  }
  
  .post-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  @media (min-width: 768px) {
    .post-title {
      font-size: 20px;
    }
  }
  
  .post-title a:active {
    color: var(--primary-pink);
  }
  
  .post-snippet {
    font-size: 14px;
    color: var(--gray);
    margin-bottom: 12px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .post-labels {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  
  .label-badge {
    padding: 4px 10px;
    background: var(--light-pink);
    color: var(--primary-pink);
    border-radius: 15px;
    font-size: 11px;
    font-weight: 500;
    -webkit-tap-highlight-color: transparent;
  }
  
  @media (min-width: 768px) {
    .label-badge {
      padding: 4px 12px;
      font-size: 12px;
    }
  }
  
  /* ==========================================================================
     Single Post Page - Mobile Optimized
     ========================================================================== */
  
  .post-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 16px;
  }
  
  @media (min-width: 768px) {
    .post-page {
      padding: 40px 24px;
    }
  }
  
  .breadcrumb {
    display: flex;
    gap: 8px;
    font-size: 13px;
    color: var(--gray);
    margin-bottom: 16px;
    flex-wrap: wrap;
  }
  
  @media (min-width: 768px) {
    .breadcrumb {
      font-size: 14px;
      margin-bottom: 20px;
    }
  }
  
  .breadcrumb a:active {
    color: var(--primary-pink);
  }
  
  .featured-image {
    width: 100%;
    height: 250px;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 20px;
  }
  
  @media (min-width: 768px) {
    .featured-image {
      height: 400px;
      margin-bottom: 30px;
    }
  }
  
  .featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .post-header {
    margin-bottom: 20px;
  }
  
  @media (min-width: 768px) {
    .post-header {
      margin-bottom: 30px;
    }
  }
  
  .post-header h1 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.3;
  }
  
  @media (min-width: 768px) {
    .post-header h1 {
      font-size: 36px;
      margin-bottom: 20px;
    }
  }
  
  /* Post Body - Mobile Readable */
  .post-body {
    font-size: 16px;
    line-height: 1.8;
    color: var(--black);
  }
  
  @media (min-width: 768px) {
    .post-body {
      font-size: 17px;
    }
  }
  
  .post-body p {
    margin-bottom: 18px;
  }
  
  @media (min-width: 768px) {
    .post-body p {
      margin-bottom: 20px;
    }
  }
  
  .post-body h2 {
    font-size: 24px;
    margin: 25px 0 12px;
  }
  
  @media (min-width: 768px) {
    .post-body h2 {
      font-size: 28px;
      margin: 30px 0 15px;
    }
  }
  
  .post-body h3 {
    font-size: 20px;
    margin: 20px 0 10px;
  }
  
  @media (min-width: 768px) {
    .post-body h3 {
      font-size: 22px;
      margin: 25px 0 12px;
    }
  }
  
  .post-body ul,
  .post-body ol {
    margin-left: 20px;
    margin-bottom: 18px;
  }
  
  @media (min-width: 768px) {
    .post-body ul,
    .post-body ol {
      margin-left: 30px;
      margin-bottom: 20px;
    }
  }
  
  .post-body img {
    border-radius: var(--radius);
    margin: 20px 0;
  }
  
  @media (min-width: 768px) {
    .post-body img {
      margin: 25px 0;
    }
  }
  
  /* Author Profile - Mobile Friendly */
  .author-profile {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: var(--light-gray);
    border-radius: var(--radius);
    margin: 30px 0;
  }
  
  @media (min-width: 768px) {
    .author-profile {
      gap: 20px;
      padding: 25px;
      margin: 40px 0;
    }
  }
  
  .author-profile-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  
  @media (min-width: 768px) {
    .author-profile-img {
      width: 80px;
      height: 80px;
    }
  }
  
  .author-profile-info h3 {
    font-size: 16px;
    margin-bottom: 6px;
  }
  
  @media (min-width: 768px) {
    .author-profile-info h3 {
      font-size: 18px;
      margin-bottom: 8px;
    }
  }
  
  .author-profile-info p {
    font-size: 13px;
    color: var(--gray);
  }
  
  @media (min-width: 768px) {
    .author-profile-info p {
      font-size: 14px;
    }
  }
  
  /* ==========================================================================
     Font Resizer - Touch Friendly
     ========================================================================== */
  
  .font-resizer {
    display: flex;
    gap: 10px;
    margin: 20px 0;
  }
  
  .font-btn {
    padding: 10px 16px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 14px;
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
    min-width: 44px;
    min-height: 44px;
  }
  
  .font-btn:active {
    background: var(--light-pink);
    border-color: var(--primary-pink);
    transform: scale(0.95);
  }
  
  /* ==========================================================================
     Sticky Elements - Mobile Adjusted
     ========================================================================== */
  
  /* Share Buttons - Hide on Mobile */
  .share-sticky {
    display: none;
  }
  
  @media (min-width: 1024px) {
    .share-sticky {
      position: fixed;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 12px;
      z-index: 100;
    }
  }
  
  .share-btn {
    width: 44px;
    height: 44px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: var(--transition);
    -webkit-tap-highlight-color: transparent;
  }
  
  .share-btn:active {
    background: var(--light-pink);
    transform: scale(0.9);
  }
  
  /* Back to Top - Touch Friendly */
  .back-to-top {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 50px;
    height: 50px;
    background: var(--primary-pink);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 100;
    -webkit-tap-highlight-color: transparent;
  }
  
  @media (min-width: 768px) {
    .back-to-top {
      right: 20px;
      bottom: 20px;
    }
  }
  
  .back-to-top.show {
    opacity: 1;
    visibility: visible;
  }
  
  .back-to-top:active {
    transform: scale(0.9);
  }
  
  .back-to-top::before {
    content: '↑';
    font-size: 24px;
  }
  
  /* Progress Bar */
  .reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--primary-pink);
    z-index: 1001;
    transition: width 0.1s ease;
  }
  
  /* ==========================================================================
     Footer - Mobile Optimized
     ========================================================================== */
  
  .footer {
    background: var(--light-gray);
    padding: 30px 0 15px;
    margin-top: 50px;
    border-top: 1px solid var(--border-color);
  }
  
  @media (min-width: 768px) {
    .footer {
      padding: 40px 0 20px;
      margin-top: 60px;
    }
  }
  
  .footer-content {
    text-align: center;
  }
  
  .footer-content p {
    font-size: 13px;
    color: var(--gray);
    margin-bottom: 8px;
  }
  
  @media (min-width: 768px) {
    .footer-content p {
      font-size: 14px;
      margin-bottom: 10px;
    }
  }
  
  .powered-by {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 12px;
    color: var(--gray);
  }
  
  @media (min-width: 768px) {
    .powered-by {
      font-size: 13px;
    }
  }
  
  .powered-by a {
    color: var(--primary-pink);
    font-weight: 600;
  }
  
  /* ==========================================================================
     Toast Notification - Mobile Friendly
     ========================================================================== */
  
  .toast {
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--black);
    color: var(--white);
    padding: 14px 20px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 10000;
    transition: var(--transition);
    font-size: 14px;
    max-width: 90%;
  }
  
  @media (min-width: 768px) {
    .toast {
      padding: 15px 25px;
      max-width: 400px;
    }
  }
  
  .toast.show {
    bottom: 20px;
  }
  
  @media (min-width: 768px) {
    .toast.show {
      bottom: 30px;
    }
  }
  
  /* ==========================================================================
     Pagination - Mobile Responsive
     ========================================================================== */
  
  .blog-pager {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 30px 0;
    flex-wrap: wrap;
  }
  
  .blog-pager .pill {
    min-width: 120px;
    text-align: center;
  }
  
  /* ==========================================================================
     Accessibility
     ========================================================================== */
  
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
  }
  
  /* Focus Styles */
  a:focus,
  button:focus,
  input:focus {
    outline: 2px solid var(--primary-pink);
    outline-offset: 2px;
  }
  
  /* Touch Target Minimum Size */
  @media (pointer: coarse) {
    a, button, .clickable {
      min-width: 44px;
      min-height: 44px;
    }
  }
  
  /* ==========================================================================
     Animations
     ========================================================================== */
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .post-card {
    animation: fadeIn 0.5s ease;
  }
  
  /* Smooth Scrolling */
  html {
    scroll-behavior: smooth;
  }
  
  /* Lazy Loading */
  img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  img[loading="lazy"].loaded {
    opacity: 1;
  }
  
  /* ==========================================================================
     Print Styles
     ========================================================================== */
  
  @media print {
    .header,
    .nav-sidebar,
    .filter-section,
    .share-sticky,
    .back-to-top,
    .footer,
    .bookmark-btn {
      display: none !important;
    }
    
    .post-body {
      font-size: 12pt;
      line-height: 1.5;
    }
  }
  
  ]]></b:skin>
  
  <!-- Schema Markup -->
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type='application/ld+json'>
    {
      "@context": "https://schema.org",
      "@type": "BlogPosting",
      "headline": "<data:post.title/>",
      "image": "<data:post.firstImageUrl/>",
      "datePublished": "<data:post.timestampISO8601/>",
      "dateModified": "<data:post.timestampISO8601/>",
      "author": {
        "@type": "Person",
        "name": "<data:post.author/>"
      },
      "publisher": {
        "@type": "Organization",
        "name": "<data:blog.title/>",
        "logo": {
          "@type": "ImageObject",
          "url": "<data:blog.homepageUrl/>logo.png"
        }
      },
      "description": "<data:post.snippets.short/>"
    }
    </script>
  </b:if>
</head>

<body>
  <!-- Reading Progress Bar -->
  <div class='reading-progress' id='progressBar'></div>
  
  <!-- Header -->
  <header class='header'>
    <div class='header-inner container'>
      <h1 class='blog-title'>
        <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>
      </h1>
      
      <input id='menu-toggle' type='checkbox'/>
      <label class='hamburger' for='menu-toggle' role='button' aria-label='Toggle menu'>
        <span></span>
        <span></span>
        <span></span>
      </label>
      
      <!-- Sidebar Navigation -->
      <nav class='nav-sidebar' role='navigation'>
        <ul class='nav-menu'>
          <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
          <li><a href='/p/about.html'>About</a></li>
          <li><a href='/p/contact.html'>Contact</a></li>
        </ul>
        
        <!-- Search Box -->
        <div class='search-box'>
          <form action='/search' method='get' role='search'>
            <input aria-label='Search' class='search-input' name='q' placeholder='Search posts...' type='search'/>
          </form>
        </div>
      </nav>
      
      <div class='nav-overlay'></div>
    </div>
  </header>
  
  <!-- Filter Pills -->
  <b:if cond='data:blog.pageType in {&quot;index&quot;, &quot;archive&quot;}'>
    <section class='filter-section'>
      <div class='container'>
        <div class='filter-pills' role='tablist'>
          <a aria-selected='true' class='pill active' expr:href='data:blog.homepageUrl' role='tab'>
            All <span class='count'></span>
          </a>
          <a class='pill' href='/search/label/Tips' role='tab'>
            Tips
          </a>
          <a class='pill' href='/search/label/Blog' role='tab'>
            Blog
          </a>
        </div>
      </div>
    </section>
  </b:if>
  
  <!-- Main Content -->
  <main class='container' role='main'>
    <b:section class='main-content' id='main' maxwidgets='1' showaddelement='yes'>
      <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog' visible='true'/>
    </b:section>
  </main>
  
  <!-- Sticky Share Buttons -->
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='share-sticky' role='complementary' aria-label='Share buttons'>
      <button class='share-btn' onclick='sharePost(&quot;facebook&quot;)' title='Share on Facebook' aria-label='Share on Facebook'>
        <svg fill='#1877f2' height='20' viewBox='0 0 24 24' width='20'>
          <path d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/>
        </svg>
      </button>
      <button class='share-btn' onclick='sharePost(&quot;twitter&quot;)' title='Share on Twitter' aria-label='Share on Twitter'>
        <svg fill='#1da1f2' height='20' viewBox='0 0 24 24' width='20'>
          <path d='M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'/>
        </svg>
      </button>
      <button class='share-btn' onclick='sharePost(&quot;whatsapp&quot;)' title='Share on WhatsApp' aria-label='Share on WhatsApp'>
        <svg fill='#25d366' height='20' viewBox='0 0 24 24' width='20'>
          <path d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/>
        </svg>
      </button>
    </div>
  </b:if>
  
  <!-- Back to Top Button -->
  <button class='back-to-top' id='backToTop' onclick='scrollToTop()' aria-label='Back to top'></button>
  
  <!-- Toast Notification -->
  <div aria-live='polite' class='toast' id='toast' role='status'>Post bookmarked!</div>
  
  <!-- Footer -->
  <footer class='footer' role='contentinfo'>
    <div class='container'>
      <div class='footer-content'>
        <p>© <script>document.write(new Date().getFullYear())</script> <data:blog.title/>. All rights reserved.</p>
        <div class='powered-by'>
          Powered by <a href='https://www.blogger.com' rel='nofollow' target='_blank'>Blogger</a>
        </div>
      </div>
    </div>
  </footer>
  
  <!-- JavaScript -->
  <script>
  //<![CDATA[
  // Reading Progress Bar
  window.addEventListener('scroll', function() {
    const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
    const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    const scrolled = (winScroll / height) * 100;
    document.getElementById('progressBar').style.width = scrolled + '%';
    
    // Back to Top Button
    const backToTop = document.getElementById('backToTop');
    if (winScroll > 300) {
      backToTop.classList.add('show');
    } else {
      backToTop.classList.remove('show');
    }
  }, { passive: true });
  
  // Scroll to Top Function
  function scrollToTop() {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  }
  
  // Bookmark Functionality
  function toggleBookmark(element) {
    element.classList.toggle('active');
    const postId = element.getAttribute('data-post-id');
    let bookmarks = JSON.parse(localStorage.getItem('bookmarks') || '[]');
    
    if (element.classList.contains('active')) {
      bookmarks.push(postId);
      showToast('Post bookmarked!');
    } else {
      bookmarks = bookmarks.filter(id => id !== postId);
      showToast('Bookmark removed!');
    }
    
    localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
  }
  
  // Show Toast Notification
  function showToast(message) {
    const toast = document.getElementById('toast');
    toast.textContent = message;
    toast.classList.add('show');
    setTimeout(function() {
      toast.classList.remove('show');
    }, 3000);
  }
  
  // Load Bookmarks on Page Load
  window.addEventListener('load', function() {
    const bookmarks = JSON.parse(localStorage.getItem('bookmarks') || '[]');
    document.querySelectorAll('.bookmark-btn').forEach(function(btn) {
      const postId = btn.getAttribute('data-post-id');
      if (bookmarks.includes(postId)) {
        btn.classList.add('active');
      }
    });
    
    // Lazy Loading Images
    const images = document.querySelectorAll('img[loading="lazy"]');
    if ('IntersectionObserver' in window) {
      const imageObserver = new IntersectionObserver(function(entries, observer) {
        entries.forEach(function(entry) {
          if (entry.isIntersecting) {
            const image = entry.target;
            image.classList.add('loaded');
            observer.unobserve(image);
          }
        });
      });
      
      images.forEach(function(img) {
        imageObserver.observe(img);
      });
    } else {
      images.forEach(function(img) {
        img.classList.add('loaded');
      });
    }
  });
  
  // Font Resizer
  let fontSize = 17;
  function changeFontSize(change) {
    const postBody = document.getElementById('postBody');
    if (!postBody) return;
    
    if (change === 0) {
      fontSize = 17;
    } else {
      fontSize += (change * 2);
      fontSize = Math.max(13, Math.min(fontSize, 25));
    }
    postBody.style.fontSize = fontSize + 'px';
    showToast('Font size: ' + fontSize + 'px');
  }
  
  // Share Post Function
  function sharePost(platform) {
    const url = window.location.href;
    const title = document.title;
    let shareUrl = '';
    
    switch(platform) {
      case 'facebook':
        shareUrl = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(url);
        break;
      case 'twitter':
        shareUrl = 'https://twitter.com/intent/tweet?url=' + encodeURIComponent(url) + '&text=' + encodeURIComponent(title);
        break;
      case 'whatsapp':
        shareUrl = 'https://wa.me/?text=' + encodeURIComponent(title + ' ' + url);
        break;
    }
    
    window.open(shareUrl, '_blank', 'width=600,height=400');
  }
  
  // Auto-close mobile menu
  document.querySelectorAll('.nav-menu a').forEach(function(link) {
    link.addEventListener('click', function() {
      document.getElementById('menu-toggle').checked = false;
    });
  });
  
  // Close menu on overlay click
  const overlay = document.querySelector('.nav-overlay');
  if (overlay) {
    overlay.addEventListener('click', function() {
      document.getElementById('menu-toggle').checked = false;
    });
  }
  
  // Prevent body scroll when menu is open
  const menuToggle = document.getElementById('menu-toggle');
  if (menuToggle) {
    menuToggle.addEventListener('change', function() {
      if (this.checked) {
        document.body.style.overflow = 'hidden';
      } else {
        document.body.style.overflow = '';
      }
    });
  }
  //]]>
  </script>
</body>
</html>

Key Mobile-Friendly Features:gooyaabitemplates+1

1. Mobile-First CSS

Responsive grid: 1 column (mobile) → 2 columns (tablet) → 3 columns (desktop)
Touch-friendly buttons (minimum 44x44px)
Proper font scaling
Optimized spacing for mobile

2. Touch Optimizations

-webkit-tap-highlight-color: transparent – removes blue flash
:active states for visual feedback
Smooth scrolling with momentum
No hover effects on touch devices

3. Performance

Lazy loading images
Passive event listeners
CSS Grid for efficient layouts
Minimal JavaScript

4. Accessibility

ARIA labels for screen readers
Keyboard navigation support
Proper focus states
Semantic HTML5

5. Responsive Breakpoints

cssMobile: < 640px (1 column)
Tablet: 640px - 1024px (2 columns)
Desktop: > 1024px (3 columns)

Yeh theme ab 100% mobile-friendly hai aur default Blogger widget CSS ke saath compatible hai!templatetoaster+1

blogger condition

Blogger `data:` Objects के Code Examples

Blogger templates में data: objects का उपयोग विभिन्न प्रकार की जानकारी display करने के लिए किया जाता है।google+1

Global Data Objects (कहीं भी उपयोग करें)

ये objects पूरे template में कहीं भी काम करते हैं:sneeit+1

xml<!-- Blog Title -->
<h1><data:blog.title/></h1>

<!-- Blog URL -->
<a expr:href='data:blog.url'>Current Page</a>

<!-- Homepage URL -->
<a expr:href='data:blog.homepageUrl'>Home</a>

<!-- Page Title -->
<title><data:blog.pageTitle/></title>

<!-- Page Type Check -->
<b:if cond='data:blog.pageType == "item"'>
  This is a single post page
</b:if>

<b:if cond='data:blog.pageType == "index"'>
  This is homepage or archive
</b:if>

<!-- Page Name -->
<h2><data:blog.pageName/></h2>

<!-- Language Direction -->
<body expr:dir='data:blog.languageDirection'>

<!-- Encoding -->
<meta expr:content='data:blog.encoding' http-equiv='Content-Type'/>

<!-- Mobile Detection -->
<b:if cond='data:blog.isMobile'>
  Mobile device detected
</b:if>

Blog Post Data (Post Widget में)

Individual posts के लिए data objects:compromath+2

xml<!-- Loop through all posts -->
<b:loop values='data:posts' var='post'>
  
  <!-- Post ID -->
  <div expr:id='"post-" + data:post.id'>
    
    <!-- Post Title -->
    <h2 class='post-title'>
      <a expr:href='data:post.url'><data:post.title/></a>
    </h2>
    
    <!-- Post Body -->
    <div class='post-body'>
      <data:post.body/>
    </div>
    
    <!-- Post Author -->
    <span class='author'>
      By <data:post.author/>
    </span>
    
    <!-- Post Timestamp -->
    <span class='timestamp'>
      <data:post.timestamp/>
    </span>
    
    <!-- Post URL -->
    <a expr:href='data:post.url'>Read More</a>
    
    <!-- Post Labels -->
    <b:if cond='data:post.labels'>
      <span class='labels'>
        <b:loop values='data:post.labels' var='label'>
          <a expr:href='data:label.url' rel='tag'>
            <data:label.name/>
          </a>
          <b:if cond='!data:label.isLast'>, </b:if>
        </b:loop>
      </span>
    </b:if>
    
    <!-- Comments Count -->
    <b:if cond='data:post.allowComments'>
      <a expr:href='data:post.addCommentUrl'>
        <data:post.numComments/> Comments
      </a>
    </b:if>
    
    <!-- Edit Post Link (admin only) -->
    <a expr:href='data:post.editUrl'>Edit</a>
    
    <!-- Email Post -->
    <a expr:href='data:post.emailPostUrl'>Email This</a>
    
  </div>
</b:loop>

Comments Data

Post के comments display करने के लिए:sneeit+1

xml<!-- Comments Loop -->
<b:if cond='data:post.showComments'>
  <b:loop values='data:post.comments' var='comment'>
    <div expr:id='"comment-" + data:comment.id' class='comment'>
      
      <!-- Comment Author -->
      <b:if cond='data:comment.authorUrl'>
        <a expr:href='data:comment.authorUrl'>
          <data:comment.author/>
        </a>
      <b:else/>
        <data:comment.author/>
      </b:if>
      
      <!-- Comment Body -->
      <div class='comment-body'>
        <data:comment.body/>
      </div>
      
      <!-- Comment Timestamp -->
      <span class='comment-timestamp'>
        <data:comment.timestamp/>
      </span>
      
      <!-- Delete Comment Link -->
      <b:if cond='data:comment.deleteUrl'>
        <a expr:href='data:comment.deleteUrl'>Delete</a>
      </b:if>
      
    </div>
  </b:loop>
</b:if>

Page Navigation

Older/Newer page links के लिए:google

xml<!-- Pagination -->
<div class='blog-pager'>
  <b:if cond='data:newerPageUrl'>
    <a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle'>
      Newer Posts
    </a>
  </b:if>
  
  <b:if cond='data:olderPageUrl'>
    <a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle'>
      Older Posts
    </a>
  </b:if>
</div>

Profile Widget

Author profile information के लिए:sneeit+1

xml<!-- Single Author Profile -->
<b:if cond='!data:team'>
  <div class='profile-widget'>
    <h3><data:title/></h3>
    
    <!-- Author Photo -->
    <b:if cond='data:photo'>
      <img expr:src='data:photo.url' 
           expr:width='data:photo.width' 
           expr:height='data:photo.height'
           expr:alt='data:photo.alt'/>
    </b:if>
    
    <!-- Display Name -->
    <a expr:href='data:userUrl'>
      <data:displayname/>
    </a>
    
    <!-- Location -->
    <p><data:location/></p>
    
    <!-- About Me -->
    <p><data:aboutme/></p>
  </div>
</b:if>

<!-- Team Blog Profile -->
<b:if cond='data:team'>
  <div class='team-profile'>
    <h3><data:title/></h3>
    <b:loop values='data:authors' var='author'>
      <a expr:href='data:author.userUrl'>
        <data:author.displayname/>
      </a>
    </b:loop>
  </div>
</b:if>

Labels Widget

Blog labels display करने के लिए:knigulper+1

xml<!-- Labels Widget -->
<div class='labels-widget'>
  <h3><data:title/></h3>
  <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <a expr:href='data:label.url'>
          <data:label.name/> (<data:label.count/>)
        </a>
      </li>
    </b:loop>
  </ul>
</div>

<!-- Related Posts by Label -->
<script type='text/javascript'>
var labelArray = [
  <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
      "<data:label.name/>"<b:if cond='!data:label.isLast'>,</b:if>
    </b:loop>
  </b:if>
];
</script>

Archive Widget

Archive links के लिए:google

xml<!-- Archive Widget -->
<div class='archive-widget'>
  <h3><data:title/></h3>
  
  <b:if cond='data:style == "FLAT"'>
    <ul>
      <b:loop values='data:data' var='interval'>
        <li>
          <a expr:href='data:interval.url'>
            <data:interval.name/> (<data:interval.post-count/>)
          </a>
        </li>
      </b:loop>
    </ul>
  </b:if>
</div>

Picture Widget

Image widget के लिए:google

xml<!-- Picture Widget -->
<div class='picture-widget'>
  <h3><data:title/></h3>
  <img expr:src='data:sourceUrl' 
       expr:width='data:width' 
       expr:height='data:height'
       expr:alt='data:caption'/>
  <p><data:caption/></p>
</div>

Link List Widget

Links की list के लिए:google

xml<!-- Link List Widget -->
<div class='link-list'>
  <h3><data:title/></h3>
  <ul>
    <b:loop values='data:links' var='link'>
      <li>
        <a expr:href='data:link.target'>
          <data:link.name/>
        </a>
      </li>
    </b:loop>
  </ul>
</div>

Conditional Statements

Conditions के साथ data objects का उपयोग:sneeit+1

xml<!-- Multiple Conditions -->
<b:if cond='data:blog.pageType == "item" and data:post.allowComments'>
  Show comments form
<b:elseif cond='data:blog.pageType == "index"'/>
  Show post summary
<b:else/>
  Show default content
</b:if>

<!-- Ternary Operator -->
<a expr:class='data:post.allowComments ? "comments-enabled" : "comments-disabled"'>

<!-- NOT Operator -->
<b:if cond='!data:post.allowComments'>
  Comments are disabled
</b:if>

<!-- IN Operator -->
<b:if cond='data:blog.pageType in {"index", "archive"}'>
  This is a listing page
</b:if>

<!-- Mobile Check -->
<meta expr:content='data:blog.isMobile ? 
  "width=device-width,initial-scale=1.0" : "width=1100"' 
  name='viewport'/>

Feed Links

RSS/Atom feeds के लिए:google

xml<!-- Blog Feed Links -->
<b:loop values='data:feedLinks' var='feed'>
  <link expr:href='data:feed.url' 
        expr:title='data:feed.name'
        expr:type='data:feed.mimeType' 
        rel='alternate'/>
</b:loop>

<!-- Post-Specific Feed -->
<b:loop values='data:post.feedLinks' var='feed'>
  <a expr:href='data:feed.url'>
    Subscribe to <data:feed.name/>
  </a>
</b:loop>

HTML/JavaScript Widget

Simple widgets के लिए:google

xml<!-- Text/HTML Widget -->
<div class='html-widget'>
  <h3><data:title/></h3>
  <data:content/>
</div>

Advanced Examples

Complex implementations:knigulper+1

xml<!-- Post with Thumbnail -->
<b:if cond='data:post.thumbnailUrl'>
  <img expr:src='data:post.thumbnailUrl' alt='Thumbnail'/>
</b:if>

<!-- First Image from Post -->
<b:if cond='data:post.firstImageUrl'>
  <img expr:src='data:post.firstImageUrl' alt='Post Image'/>
</b:if>

<!-- Post Snippet -->
<b:if cond='data:post.snippet'>
  <p><data:post.snippet/></p>
</b:if>

<!-- String Concatenation -->
<div expr:style='"max-width: " + (data:width + 10) + "px;"'>

<!-- Date Header (shows once per day) -->
<b:if cond='data:post.dateHeader'>
  <h2 class='date-header'>
    <data:post.dateHeader/>
  </h2>
</b:if>

<!-- JSON-LD Structured Data -->
<script type='application/ld+json'>
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "<data:post.title/>",
  "datePublished": "<data:post.timestampISO8601/>",
  "author": {"name": "<data:post.author/>"},
  "url": "<data:post.url/>"
}
</script>

Blogger `data:` Objects के Code Examples

Global Data Objects (कहीं भी उपयोग करें)

ये objects पूरे template में कहीं भी काम करते हैं:sneeit+1

xml<!-- Blog Title -->
<h1><data:blog.title/></h1>

<!-- Blog URL -->
<a expr:href='data:blog.url'>Current Page</a>

<!-- Homepage URL -->
<a expr:href='data:blog.homepageUrl'>Home</a>

<!-- Page Title -->
<title><data:blog.pageTitle/></title>

<!-- Page Type Check -->
<b:if cond='data:blog.pageType == "item"'>
  This is a single post page
</b:if>

<b:if cond='data:blog.pageType == "index"'>
  This is homepage or archive
</b:if>

<!-- Page Name -->
<h2><data:blog.pageName/></h2>

<!-- Language Direction -->
<body expr:dir='data:blog.languageDirection'>

<!-- Encoding -->
<meta expr:content='data:blog.encoding' http-equiv='Content-Type'/>

<!-- Mobile Detection -->
<b:if cond='data:blog.isMobile'>
  Mobile device detected
</b:if>

Blog Post Data (Post Widget में)

Individual posts के लिए data objects:compromath+2

xml<!-- Loop through all posts -->
<b:loop values='data:posts' var='post'>
  
  <!-- Post ID -->
  <div expr:id='"post-" + data:post.id'>
    
    <!-- Post Title -->
    <h2 class='post-title'>
      <a expr:href='data:post.url'><data:post.title/></a>
    </h2>
    
    <!-- Post Body -->
    <div class='post-body'>
      <data:post.body/>
    </div>
    
    <!-- Post Author -->
    <span class='author'>
      By <data:post.author/>
    </span>
    
    <!-- Post Timestamp -->
    <span class='timestamp'>
      <data:post.timestamp/>
    </span>
    
    <!-- Post URL -->
    <a expr:href='data:post.url'>Read More</a>
    
    <!-- Post Labels -->
    <b:if cond='data:post.labels'>
      <span class='labels'>
        <b:loop values='data:post.labels' var='label'>
          <a expr:href='data:label.url' rel='tag'>
            <data:label.name/>
          </a>
          <b:if cond='!data:label.isLast'>, </b:if>
        </b:loop>
      </span>
    </b:if>
    
    <!-- Comments Count -->
    <b:if cond='data:post.allowComments'>
      <a expr:href='data:post.addCommentUrl'>
        <data:post.numComments/> Comments
      </a>
    </b:if>
    
    <!-- Edit Post Link (admin only) -->
    <a expr:href='data:post.editUrl'>Edit</a>
    
    <!-- Email Post -->
    <a expr:href='data:post.emailPostUrl'>Email This</a>
    
  </div>
</b:loop>

Comments Data

Post के comments display करने के लिए:sneeit+1

xml<!-- Comments Loop -->
<b:if cond='data:post.showComments'>
  <b:loop values='data:post.comments' var='comment'>
    <div expr:id='"comment-" + data:comment.id' class='comment'>
      
      <!-- Comment Author -->
      <b:if cond='data:comment.authorUrl'>
        <a expr:href='data:comment.authorUrl'>
          <data:comment.author/>
        </a>
      <b:else/>
        <data:comment.author/>
      </b:if>
      
      <!-- Comment Body -->
      <div class='comment-body'>
        <data:comment.body/>
      </div>
      
      <!-- Comment Timestamp -->
      <span class='comment-timestamp'>
        <data:comment.timestamp/>
      </span>
      
      <!-- Delete Comment Link -->
      <b:if cond='data:comment.deleteUrl'>
        <a expr:href='data:comment.deleteUrl'>Delete</a>
      </b:if>
      
    </div>
  </b:loop>
</b:if>

Page Navigation

Older/Newer page links के लिए:google

xml<!-- Pagination -->
<div class='blog-pager'>
  <b:if cond='data:newerPageUrl'>
    <a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle'>
      Newer Posts
    </a>
  </b:if>
  
  <b:if cond='data:olderPageUrl'>
    <a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle'>
      Older Posts
    </a>
  </b:if>
</div>

Profile Widget

Author profile information के लिए:sneeit+1

xml<!-- Single Author Profile -->
<b:if cond='!data:team'>
  <div class='profile-widget'>
    <h3><data:title/></h3>
    
    <!-- Author Photo -->
    <b:if cond='data:photo'>
      <img expr:src='data:photo.url' 
           expr:width='data:photo.width' 
           expr:height='data:photo.height'
           expr:alt='data:photo.alt'/>
    </b:if>
    
    <!-- Display Name -->
    <a expr:href='data:userUrl'>
      <data:displayname/>
    </a>
    
    <!-- Location -->
    <p><data:location/></p>
    
    <!-- About Me -->
    <p><data:aboutme/></p>
  </div>
</b:if>

<!-- Team Blog Profile -->
<b:if cond='data:team'>
  <div class='team-profile'>
    <h3><data:title/></h3>
    <b:loop values='data:authors' var='author'>
      <a expr:href='data:author.userUrl'>
        <data:author.displayname/>
      </a>
    </b:loop>
  </div>
</b:if>

Labels Widget

Blog labels display करने के लिए:knigulper+1

xml<!-- Labels Widget -->
<div class='labels-widget'>
  <h3><data:title/></h3>
  <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <a expr:href='data:label.url'>
          <data:label.name/> (<data:label.count/>)
        </a>
      </li>
    </b:loop>
  </ul>
</div>

<!-- Related Posts by Label -->
<script type='text/javascript'>
var labelArray = [
  <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
      "<data:label.name/>"<b:if cond='!data:label.isLast'>,</b:if>
    </b:loop>
  </b:if>
];
</script>

Archive Widget

Archive links के लिए:google

xml<!-- Archive Widget -->
<div class='archive-widget'>
  <h3><data:title/></h3>
  
  <b:if cond='data:style == "FLAT"'>
    <ul>
      <b:loop values='data:data' var='interval'>
        <li>
          <a expr:href='data:interval.url'>
            <data:interval.name/> (<data:interval.post-count/>)
          </a>
        </li>
      </b:loop>
    </ul>
  </b:if>
</div>

Picture Widget

Image widget के लिए:google

xml<!-- Picture Widget -->
<div class='picture-widget'>
  <h3><data:title/></h3>
  <img expr:src='data:sourceUrl' 
       expr:width='data:width' 
       expr:height='data:height'
       expr:alt='data:caption'/>
  <p><data:caption/></p>
</div>

Link List Widget

Links की list के लिए:google

xml<!-- Link List Widget -->
<div class='link-list'>
  <h3><data:title/></h3>
  <ul>
    <b:loop values='data:links' var='link'>
      <li>
        <a expr:href='data:link.target'>
          <data:link.name/>
        </a>
      </li>
    </b:loop>
  </ul>
</div>

Conditional Statements

Conditions के साथ data objects का उपयोग:sneeit+1

xml<!-- Multiple Conditions -->
<b:if cond='data:blog.pageType == "item" and data:post.allowComments'>
  Show comments form
<b:elseif cond='data:blog.pageType == "index"'/>
  Show post summary
<b:else/>
  Show default content
</b:if>

<!-- Ternary Operator -->
<a expr:class='data:post.allowComments ? "comments-enabled" : "comments-disabled"'>

<!-- NOT Operator -->
<b:if cond='!data:post.allowComments'>
  Comments are disabled
</b:if>

<!-- IN Operator -->
<b:if cond='data:blog.pageType in {"index", "archive"}'>
  This is a listing page
</b:if>

<!-- Mobile Check -->
<meta expr:content='data:blog.isMobile ? 
  "width=device-width,initial-scale=1.0" : "width=1100"' 
  name='viewport'/>

Feed Links

RSS/Atom feeds के लिए:google

xml<!-- Blog Feed Links -->
<b:loop values='data:feedLinks' var='feed'>
  <link expr:href='data:feed.url' 
        expr:title='data:feed.name'
        expr:type='data:feed.mimeType' 
        rel='alternate'/>
</b:loop>

<!-- Post-Specific Feed -->
<b:loop values='data:post.feedLinks' var='feed'>
  <a expr:href='data:feed.url'>
    Subscribe to <data:feed.name/>
  </a>
</b:loop>

HTML/JavaScript Widget

Simple widgets के लिए:google

xml<!-- Text/HTML Widget -->
<div class='html-widget'>
  <h3><data:title/></h3>
  <data:content/>
</div>

Advanced Examples

Complex implementations:knigulper+1

xml<!-- Post with Thumbnail -->
<b:if cond='data:post.thumbnailUrl'>
  <img expr:src='data:post.thumbnailUrl' alt='Thumbnail'/>
</b:if>

<!-- First Image from Post -->
<b:if cond='data:post.firstImageUrl'>
  <img expr:src='data:post.firstImageUrl' alt='Post Image'/>
</b:if>

<!-- Post Snippet -->
<b:if cond='data:post.snippet'>
  <p><data:post.snippet/></p>
</b:if>

<!-- String Concatenation -->
<div expr:style='"max-width: " + (data:width + 10) + "px;"'>

<!-- Date Header (shows once per day) -->
<b:if cond='data:post.dateHeader'>
  <h2 class='date-header'>
    <data:post.dateHeader/>
  </h2>
</b:if>

<!-- JSON-LD Structured Data -->
<script type='application/ld+json'>
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "<data:post.title/>",
  "datePublished": "<data:post.timestampISO8601/>",
  "author": {"name": "<data:post.author/>"},
  "url": "<data:post.url/>"
}
</script>

⚙️ Complete List of Blogger Built-in data: Objects

???? Global Objects

???? Blog Object → data:blog

???? Page Object → data:page

???? Post Object → data:post

???? Author Object → data:post.author

???? Comment Object → data:comment

???? Widget Objects

???? Looping Variables (inside widgets)

???? Special Context Variables

???? Feed & Pagination Objects

???? Conditional & Utility Tags

You said:

ChatGPT said:

???? Main Conditional Tags (Core Blogger XML Tags)

???? Common Conditional Expressions

???? View-based Conditions

???? Post-based Conditions

???? Blog-level Conditions

???? Widget-based Conditions

???? Label/Loop Conditions

⚙️ Logical & Comparison Operators

???? Full Example — Combine All

???? Pro Tip (Switch Style)

You said:

ChatGPT said:

???? 1️⃣ <b:section> — Widget Container

???? Basic Syntax

???? Attributes of <b:section>

???? 2️⃣ <b:widget> — Gadget / Module

???? Basic Syntax

???? Main <b:widget> Attributes

⚙️ 3️⃣ Common Widget Types (and Live Examples)

???? 4️⃣ Example Layout Structure

???? 5️⃣ Inside Each <b:widget> — Dynamic Data Access

⚡ 6️⃣ Including or Reusing Widgets

???? 7️⃣ Example — Custom Section with Widgets

???? 8️⃣ Access Widget Data Conditionally

✅ Summary Table

Key Mobile-Friendly Features:gooyaabitemplates+1​

1. Mobile-First CSS

2. Touch Optimizations

3. Performance

4. Accessibility

5. Responsive Breakpoints

Blogger data: Objects के Code Examples

Global Data Objects (कहीं भी उपयोग करें)

Blog Post Data (Post Widget में)

Comments Data

Page Navigation

Profile Widget

Labels Widget

Archive Widget

Picture Widget

Link List Widget

Conditional Statements

Feed Links

HTML/JavaScript Widget

Advanced Examples

Blogger data: Objects के Code Examples

Global Data Objects (कहीं भी उपयोग करें)

Blog Post Data (Post Widget में)

Comments Data

Page Navigation

Profile Widget

Labels Widget

Archive Widget

Picture Widget

Link List Widget

Conditional Statements

Feed Links

HTML/JavaScript Widget

Advanced Examples

⚙️ Complete List of Blogger Built-in `data:` Objects

???? Blog Object → `data:blog`

???? Page Object → `data:page`

???? Post Object → `data:post`

???? Author Object → `data:post.author`

???? Comment Object → `data:comment`

???? 1️⃣ `<b:section>` — Widget Container

???? Attributes of `<b:section>`

???? 2️⃣ `<b:widget>` — Gadget / Module

???? Main `<b:widget>` Attributes

???? 5️⃣ Inside Each `<b:widget>` — Dynamic Data Access

Key Mobile-Friendly Features:gooyaabitemplates+1

Blogger `data:` Objects के Code Examples

Blogger `data:` Objects के Code Examples