Create a Responsive Blogger Template

Ajay Kumar

25 Jun, 2025

How To Create a Responsive Blogger Template

Hello, dosto! Welcome to this super-exciting, masala-filled blog post where we’re diving into the world of blogging and web design with a proper desi twist. Today, we’re talking about something that every blogger dreams of: How to Create and Design a Responsive Blogger Template. Arre, don’t worry if this sounds like a big task. By the time you finish reading this guide, you’ll be saying, “Bhai, yeh toh ekdum easy hai!” (Brother, this is totally easy!)

Whether you’re a newbie blogger or a seasoned pro, having a responsive Blogger template is like having a perfect chai recipe—it works everywhere and makes everyone happy. A responsive template means your blog looks awesome on mobiles, tablets, laptops, and even those big desktop screens. So, grab your favorite snack (maybe some pakoras or vada pav), a cup of cutting chai, and let’s get started on this epic journey to create a stunning, responsive Blogger template. Chalo, shuru karte hain! (Let’s begin!)

What Is a Responsive Blogger Template?

Before we start coding and designing, let’s understand what a responsive Blogger template is. In simple words, it’s a blog layout that adjusts itself automatically to fit any screen size. Whether someone opens your blog on a tiny smartphone or a giant monitor, the template makes sure everything looks neat, readable, and user-friendly.

Think of it like a stretchy kurta—it fits perfectly no matter who wears it! A responsive template uses HTML, CSS, and sometimes JavaScript to make your blog’s design flexible. For Blogger (Google’s free blogging platform), templates are written in XML with special tags, but we’ll keep things simple and fun.

Why Do You Need a Responsive Template?

Arre, bhai, in today’s world, everyone’s scrolling blogs on their phones while sipping coffee or traveling in the metro. Here’s why a responsive template is a must:

Mobile Traffic: More than 60% of blog visitors come from mobile devices. If your blog looks wonky on phones, they’ll bounce off faster than you can say “samosa.”
SEO Boost: Google loves responsive websites. A mobile-friendly blog ranks higher in search results.
Better User Experience: A responsive design makes navigation easy, keeping readers on your blog longer.
Professional Look: A clean, adaptive design screams, “This blogger means business!”

Now that you know why it’s important, let’s dive into how to create one from scratch. Don’t worry, I’ll explain everything like I’m teaching my cousin who just started blogging about cricket.

Getting Started with Blogger Templates

To create a responsive Blogger template, you need to understand how Blogger works. Blogger templates are written in XML (Extensible Markup Language), which is like HTML but with special Blogger tags (called b:tags) that control things like posts, widgets, and comments.

Tools You’ll Need

Before we start, let’s gather our toolkit. It’s like preparing for a big Indian wedding—you need everything ready:

Blogger Account: Sign up at blogger.com if you don’t have one.
Text Editor: Use Notepad++, VS Code, or Sublime Text to write and edit code.
Web Browser: Chrome or Firefox with developer tools (right-click > Inspect) to test your design.
Basic Knowledge: A little HTML and CSS knowledge helps, but I’ll explain everything in simple language.
Backup Plan: Always back up your existing template before making changes. Go to Blogger Dashboard > Theme > Backup/Restore > Download Theme.

Setting Up Your Blogger Dashboard

Log in to your Blogger account.
Go to Dashboard > Theme > Edit HTML. This is where you’ll paste your template code.
If you’re nervous about messing up, create a test blog to experiment. It’s like practicing cooking before serving guests!

Now, let’s create a basic template structure and make it responsive step-by-step.

Creating the Basic Blogger Template Structure

Every Blogger template starts with a skeleton—a basic XML structure. Let’s build one from scratch. Don’t worry, it’s easier than assembling IKEA furniture.

Step 1: Start with the XML Declaration

Every Blogger template begins with an XML declaration and some metadata. Here’s the starting point:

< ?xml version="1.0" encoding="UTF-8" ? >
< !DOCTYPE html >
< html b:version='2' class='v2' 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 >
  < title >< data:blog.pageTitle/ >< /title >
  < b:skin >< ![CDATA[
    /* CSS will go here */
  ]] >< /b:skin >
< /head >
< body >
  < b:section class='main' id='main' >
    < !-- Blog content will go here -- >
  < /b:section >
< /body >
< /html >

What’s Happening Here?

< ?xml version="1.0" encoding="UTF-8" ? >: Declares this is an XML document.
< !DOCTYPE html >: Tells browsers this is an HTML5 document.
< html >: Includes Blogger-specific attributes for language direction and namespaces.
< head >: Contains the page title (dynamic, using < data:blog.pageTitle/ >) and a < b:skin > tag for CSS.
< body >: Has a < b:section > tag, which is where your blog’s main content (posts, widgets) will live.

This is the bare minimum. Save this in your Blogger Theme’s Edit HTML section and preview it. You’ll see a blank page because we haven’t added any styling or content yet. Let’s fix that!

Step 2: Adding a Basic Layout

Let’s add a simple layout with a header, main content area, sidebar, and footer. Here’s the updated structure:

< ?xml version="1.0" encoding="UTF-8" ? >
< !DOCTYPE html >
< html b:version='2' class='v2' 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 >
  < title >< data:blog.pageTitle/ >< /title >
  < meta content='width=device-width, initial-scale=1.0' name='viewport'/ >
  < b:skin >< ![CDATA[
    /* Reset default styles */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      color: #333;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 15px;
    }
    .header {
      background: #333;
      color: #fff;
      padding: 20px;
      text-align: center;
    }
    .main-content {
      float: left;
      width: 70%;
      padding: 20px;
    }
    .sidebar {
      float: right;
      width: 30%;
      padding: 20px;
      background: #f4f4f4;
    }
    .footer {
      clear: both;
      background: #333;
      color: #fff;
      text-align: center;
      padding: 10px;
      margin-top: 20px;
    }
  ]] >< /b:skin >
< /head >
< body >
  < header class='header' >
    < h1 >< data:blog.title/ >< /h1 >
  < /header >
  < div class='container' >
    < div class='main-content' >
      < b:section class='main' id='main' preferred='true' >
        < b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/ >
      < /b:section >
    < /div >
    < aside class='sidebar' >
      < b:section class='sidebar' id='sidebar' >
        < b:widget id='Profile1' locked='false' title='About Me' type='Profile'/ >
      < /b:section >
    < /aside >
  < /div >
  < footer class='footer' >
    < p >&copy; < data:blog.title/ > 2025< /p >
  < /footer >
< /body >
< /html >

What’s New?

Viewport Meta Tag: < meta content='width=device-width, initial-scale=1.0' name='viewport'/ > makes the template responsive by telling browsers to scale content to the device’s width.
CSS in < b:skin >:
- Resets default margins/paddings with * { margin: 0; padding: 0; box-sizing: border-box; }.
- Sets a clean font and text color for the body.
- Creates a .container to center content with a max-width of 1200px.
- Styles the header, main content (70% width), sidebar (30% width), and footer using floats for layout.
HTML Structure:
- < header > displays the blog title using < data:blog.title/ >.
- < div class='container' > wraps the main content and sidebar.
- < b:section > tags define areas for widgets (e.g., blog posts, profile).
- < footer > shows a dynamic copyright with the blog title.

Save this in Edit HTML, click Preview, and you’ll see a basic blog layout with a header, posts, sidebar, and footer. But it’s not fully responsive yet—on small screens, the sidebar and main content might overlap or look squished. Let’s make it responsive next!

Making the Template Responsive

To make our template truly responsive, we need to use CSS media queries and flexible layouts. Media queries are like saying, “If the screen is this small, change the design like this.” We’ll also replace the float-based layout with modern techniques like Flexbox or CSS Grid for better control.

Step 1: Switch to Flexbox

Floats are old-school, like using a typewriter. Let’s update our CSS to use Flexbox for the main content and sidebar. Replace the CSS in < b:skin > with this:

/* Reset default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}
.header {
  background: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}
.content-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.main-content {
  flex: 2;
  min-width: 0;
  padding: 20px;
}
.sidebar {
  flex: 1;
  min-width: 0;
  padding: 20px;
  background: #f4f4f4;
}
.footer {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
  margin-top: 20px;
}

What’s Changed?

Added a .content-wrapper class to wrap the main content and sidebar.
Used display: flex; flex-wrap: wrap; to create a flexible layout where the main content and sidebar sit side-by-side but stack on smaller screens.
Set flex: 2 for .main-content (takes ~66% width) and flex: 1 for .sidebar (takes ~33% width).
Added gap: 20px for spacing between the main content and sidebar.
Removed float and width properties, as Flexbox handles layout better.

Update the HTML in the < body > to include the .content-wrapper:

< body >
  < header class='header' >
    < h1 >< data:blog.title/ >< /h1 >
  < /header >
  < div class='container' >
    < div class='content-wrapper' >
      < div class='main-content' >
        < b:section class='main' id='main' preferred='true' >
          < b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/ >
        < /b:section >
      < /div >
      < aside class='sidebar' >
        < b:section class='sidebar' id='sidebar' >
          < b:widget id='Profile1' locked='false' title='About Me' type='Profile'/ >
        < /b:section >
      < /aside >
    < /div >
  < /div >
  < footer class='footer' >
    < p >&copy; < data:blog.title/ > 2025< /p >
  < /footer >
< /body >

Step 2: Add Media Queries

Now, let’s use media queries to adjust the layout for smaller screens. Add this CSS at the bottom of < b:skin >:

/* Responsive Design */
@media screen and max-width: 768px) {
  .content-wrapper {
    flex-direction: column;
  }
  .main-content,
.sidebar {
    flex: 100%;
  }
}
@media screen and (max-width: 480px) {
  .header h1 {
    font-size: 1.5rem;
  }
  .main-content,
  .sidebar {
    padding: 10px;
  }
}

What’s Happening?

@media query for screens ≤ 768px: Changes .content-wrapper to flex-direction: column, stacking the main content and sidebar vertically. Both take 100% width.
@media query for screens ≤ 480px: Reduces the header font size and padding for very small screens (e.g., older smartphones).

Save and preview. Resize your browser or use Chrome’s mobile view (Ctrl+Shift+I → Toggle Device Toolbar) to test. Your blog should now adjust smoothly to different screen sizes!

Styling Blog Posts

Our template is responsive, but the blog posts look plain. Let’s style the blog posts make them look attractive. The < b:widget type='Blog' > widget generates post content, which we can style using Blogger’s default classes like .post, .post-title, and .post-body.

Step 1: Style Post Titles and Content

Add this to < b:skin >:

/* Post styles */
.post {
  margin-bottom: 30px;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}
.post-title {
  font-size: 1.5rem;
  margin-bottom: 10px;
}
.post-title a {
  color: #333;
  text-decoration: none;
}
.post-title a:hover {
  color: #007bff;
}
.post-body {
  font-size: 1rem;
  line-height: 1.8;
}
.post-footer {
  font-size: 0.9rem;
  color: #666;
  margin-top: 10px;
}

What’s Explained?

.post: Adds spacing between posts with a bottom border.
.post-title: Styles post titles with a decent size and hover effect on links.
.post-body: Makes post content readable with proper font size and line height.
.post-footer: Styles metadata (e.g., author, date, labels) smaller and lighter.

Step 2: Add a Featured Image

Many responsive blogs show a featured image for each post. Let’s use Blogger’s < data:image-post.firstImageThumbnail/ > tag to display it. Update the < b:widget type='Blog' > section by adding a custom post loop.

First, find the < b:widget id='Blog1' ... > in your template. Inside its < b:includable id='main' > tag, add this:

< b:includable id='main' >
  < b:loop values='data:posts' var='post' >
    < article class='post' >
      < b:if cond='data:post.firstImageThumbnail' >
        < img class='post-image' expr:src='data:post.firstImageThumbnail'/ >
      < /b:if >
      < h2 class='post-title' >
        < a expr:href='data:post.url' >< data:post.title/ >< /a >
      < /h2 >
      < div class='post-body' >
        < data:post.body/ >
      < /div >
      < div class='post-footer' >
        Posted by < data:post.author/ > on < data:post.date/ >
      < /div >
    < /article >
  < /b:loop >
< /b:includable >

Then, add CSS for the image:

.post-image {
  max-width: 100%;
  height: auto;
  margin-bottom: 15px;
  border-radius: 5px;
}

What’s Happening?

< b:loop >: Iterates over blog posts.
< b:if cond='data:post.firstImageThumbnail' >: Checks if a post has a featured image.
< img >: Displays the image with the post-image class.
CSS ensures the image is responsive (max-width: 100%; height: auto;) and has rounded corners.

Preview your blog. Posts should now have titles, content, images (if available), and metadata, all styled nicely.

Designing the Header and Navigation

A good header with navigation is like the grand entrance to a wedding pandal—it sets the tone. Let’s create a responsive header with a logo, blog title, and a navigation menu.

Step 1: Add a Navigation Menu

Add a < nav > element below the < header > in the < body >:

< body >
  < header class='header' >
    < h1 >< data:blog.title/ >< /h1 >
  < /header >
  < nav class='nav' >
    < div class='container' >
      < 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 >
    < /div >
  < /nav >
  < !-- Rest of the body -- >
< /body >

Step 2: Style the Navigation

Add this CSS to < b:skin >:

/* Navigation styles */
.nav {
  background: #007bff;
  color: #fff;
}
.nav-menu {
  list-style: none;
  display: flex;
  justify-content: center;
  padding: 15px 0;
}
.nav-menu li {
  margin: 0 15px;
}
.nav-menu a {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
}
.nav-menu a:hover {
  text-decoration: underline;
}

Step 3: Make the Navigation Responsive

Add a mobile-friendly hamburger menu using a checkbox hack (no JavaScript needed). Update the < nav > HTML:

< nav class='nav' >
  < div class='container' >
    < input class='nav-toggle' id='nav-toggle' type='checkbox'/ >
    < label class='nav-toggle-label' for='nav-toggle' >
      < span >< /span >
      < span >< /span >
      < span >< /span >
    < /label >
    < 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 >
  < /div >
< /nav >

Add CSS for the hamburger menu:

/* Hamburger menu */
.nav-toggle {
  display: none;
}
.nav-toggle-label {
  display: none;
  cursor: pointer;
  width: 30px;
  height: 20px;
  position: relative;
}
.nav-toggle-label span {
  background: #fff;
  height: 3px;
  width: 100%;
  position: absolute;
  left: 0;
  transition: all 0.3s;
}
.nav-toggle-label span:nth-child(1) {
  top: 0;
}
.nav-toggle-label span:nth-child(2) {
  top: 8px;
}
.nav-toggle-label span:nth-child(3) {
  top: 16px;
}
@media screen and (max-width: 768px) {
  .nav-toggle-label {
    display: block;
    position: absolute;
    right: 15px;
    top: 15px;
  }
  .nav-menu {
    display: none;
    flex-direction: column;
    text-align: center;
    width: 100%;
  }
  .nav-menu li {
    margin: 10px 0;
  }
  .nav-toggle:checked ~ .nav-menu {
    display: flex;
  }
}

What’s Happening?

The < input type='checkbox' > and < label > create a toggleable hamburger menu.
On screens ≤ 768px, the menu hides and a hamburger icon (three lines) appears.
Clicking the hamburger toggles the menu visibility using the :checked pseudo-class.

Preview your blog. The navigation should be horizontal on desktops and a collapsible menu on mobiles.

Adding Widgets to the Sidebar

The sidebar is like the side dishes at a thali meal—it adds variety. Let’s add some useful widgets, like a search bar, popular posts, and labels.

Step 1: Add Widgets

In the < b:section class='sidebar' id='sidebar' >, add more widgets:

< aside class='sidebar' >
  < b:section class='sidebar' id='sidebar' >
    < b:widget id='Profile1' locked='false' title='About Me' type='Profile'/ >
    < b:widget id='Search1' locked='false' title='Search' type='BlogSearch'/ >
    < b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/ >
    < b:widget id='Label1' locked='false' title='Categories' type='Label'/ >
  < /b:section >
< /aside >

Step 2: Style Widgets

Add CSS to make widgets look clean:

/* Sidebar widgets */
.widget {
  margin-bottom: 20px;
}
.widget h2 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #333;
}
.widget ul {
  list-style: none;
}
.widget ul li {
  margin-bottom: 10px;
}
.widget ul li a {
  color: #007bff;
  text-decoration: none;
}
.widget ul li a:hover {
  text-decoration: underline;
}
.widget .BlogSearch input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

What’s Happening?

.widget styles each widget with spacing.
.widget h2 styles widget titles.
Lists (e.g., labels, popular posts) are styled without bullets and with hover effects.
The search bar input is styled to be full-width and rounded.

Preview your blog. The sidebar should now have a search bar, profile, popular posts, and categories, all neatly styled.

Enhancing the Footer

The footer is like the sweet dish at the end of a meal—it leaves a lasting impression. Let’s add a multi-column footer with links, social media icons, and a subscription form.

Step 1: Update the Footer HTML

Replace the < footer > with:

< footer class='footer' >
  < div class='container' >
    < div class='footer-columns' >
      < div class='footer-column' >
        < h3 >About Us< /h3 >
        < p >< data:blog.title/ > is your go-to blog for awesome content.< /p >
      < /div >
      < div class='footer-column' >
        < h3 >Quick Links< /h3 >
        < ul >
          < 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 >
      < /div >
      < div class='footer-column' >
        < h3 >Follow Us< /h3 >
        < ul class='social-links' >
          < li >< a href='#' >Facebook< /a >< /li >
          < li >< a href='#' >Twitter< /a >< /li >
          < li >< a href='#' >Instagram< /a >< /li >
        < /ul >
      < /div >
    < /div >
    < div class='footer-bottom' >
      < p >&copy; < data:blog.title/ > 2025. All rights reserved.< /p >
    < /div >
  < /div >
< /footer >

Step 2: Style the Footer

Add CSS:

/* Footer styles */
.footer-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px 0;
}
.footer-column {
  flex: 1;
  min-width: 200px;
}
.footer-column h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #fff;
}
.footer-column p,
.footer-column ul li a {
  color: #ccc;
}
.footer-column ul {
  list-style: none;
}
.footer-column ul li {
  margin-bottom: 8px;
}
.footer-column ul li a:hover {
  color: #fff;
}
.footer-bottom {
  border-top: 1px solid #444;
  padding-top: 10px;
  text-align: center;
  color: #ccc;
}
@media screen and (max-width: 768px) {
  .footer-columns {
    flex-direction: column;
  }
}

What’s Happening?

.footer-columns uses Flexbox to create three columns.
Each .footer-column has a minimum width to prevent squishing.
Social links and quick links are styled with hover effects.
The footer-bottom adds a copyright notice with a top border.
Media query stacks columns on small screens.

Preview your blog. The footer should now have three columns that stack vertically on mobiles.

Chapter 9: Adding Advanced Features

To make your template stand out, let’s add some advanced features like a sticky navigation, dark mode toggle, and lazy-loaded images.

Step 1: Sticky Navigation

Make the navigation stick to the top when scrolling. Update the .nav CSS:

.nav {
  background: #007bff;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1000;
}

Step 2: Dark Mode Toggle

Add a dark mode toggle using a checkbox and CSS variables. Add this to < head >:

< b:if cond='data:blog.isMobileRequest == &quot;false&quot;' >
  < style type='text/css' >
    :root {
      --bg-color: #fff;
      --text-color: #333;
      --link-color: #007bff;
      --sidebar-bg: #f4f4f4;
    }
    [data-theme='dark'] {
      --bg-color: #222;
      --text-color: #ddd;
      --link-color: #1e90ff;
      --sidebar-bg: #333;
    }
    body {
      background: var(--bg-color);
      color: var(--text-color);
    }
    a {
      color: var(--link-color);
    }
    .sidebar {
      background: var(--sidebar-bg);
    }
  < /style >
< /b:if >

Add a toggle button in < nav >:

< nav class='nav' >
  < div class='container' >
    < input class='nav-toggle' id='nav-toggle' type='checkbox'/ >
    < label class='nav-toggle-label' for='nav-toggle' >
      < span >< /span >
      < span >< /span >
      < span >< /span >
    < /label >
    < input class='theme-toggle' id='theme-toggle' type='checkbox'/ >
    < label class='theme-toggle-label' for='theme-toggle' >Dark Mode< /label >
    < 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 >
  < /div >
< /nav >

Add CSS:

.theme-toggle {
  display: none;
}
.theme-toggle-label {
  color: #fff;
  cursor: pointer;
  margin-left: 15px;
}
.theme-toggle:checked ~ * {
  --bg-color: #222;
  --text-color: #ddd;
  --link-color: #1e90ff;
  --sidebar-bg: #333;
}

What’s Happening?

CSS variables define colors for light and dark modes.
The checkbox toggles the [data-theme='dark'] styles.
No JavaScript needed, keeping it lightweight.

Step 3: Lazy-Load Images

Add loading='lazy' to the post image:

< img class='post-image' expr:src='data:post.firstImageThumbnail' loading='lazy'/ >

This improves page load speed by loading images only when they’re in the viewport.

Testing and Debugging

Before going live, test your template thoroughly:

Preview in Blogger: Use the Preview button in Edit HTML.
Test Responsiveness: Use Chrome’s DevTools (Ctrl+Shift+I > Toggle Device Toolbar) to check mobile, tablet, and desktop views.
Check Widgets: Ensure all widgets (posts, search, etc.) work.
Validate Code: Use W3C validators for HTML/CSS if possible.
Backup Regularly: Save your template before major changes.

Common issues and fixes:

Overlapping Content: Check for missing clear: both or incorrect Flexbox settings.
Broken Widgets: Ensure < b:widget > IDs are unique.
Mobile Menu Issues: Verify the checkbox toggle CSS.

Final Template Code

Here’s the complete, responsive Blogger template:

< ?xml version="1.0" encoding="UTF-8" ? >
< !DOCTYPE html >
< html b:version='2' class='v2' 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 >
  < title >< data:blog.pageTitle/ >< /title >
  < meta content='width=device-width, initial-scale=1.0' name='viewport'/ >
  < b:if cond='data:blog.isMobileRequest == &quot;false&quot;' >
    < style type='text/css' >
      :root {
        --bg-color: #fff;
        --text-color: #333;
        --link-color: #007bff;
        --sidebar-bg: #f4f4f4;
      }
      [data-theme='dark'] {
        --bg-color: #222;
        --text-color: #ddd;
        --link-color: #1e90ff;
        --sidebar-bg: #333;
      }
    < /style >
  < /b:if >
  < b:skin >< ![CDATA[
    /* Reset styles */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      background: var(--bg-color);
      color: var(--text-color);
    }
    a {
      color: var(--link-color);
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 15px;
    }
    .header {
      background: #333;
      color: #fff;
      padding: 20px;
      text-align: center;
    }
    .nav {
      background: #007bff;
      color: #fff;
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    .nav-menu {
      list-style: none;
      display: flex;
      justify-content: center;
      padding: 15px 0;
    }
    .nav-menu li {
      margin: 0 15px;
    }
    .nav-menu a {
      color: #fff;
      text-decoration: none;
    }
    .nav-menu a:hover {
      text-decoration: underline;
    }
    .nav-toggle, .theme-toggle {
      display: none;
    }
    .nav-toggle-label {
      display: none;
      cursor: pointer;
      width: 30px;
      height: 20px;
      position: relative;
    }
    .nav-toggle-label span {
      background: #fff;
      height: 3px;
      width: 100%;
      position: absolute;
      left: 0;
      transition: all 0.3s;
    }
    .nav-toggle-label span:nth-child(1) { top: 0; }
    .nav-toggle-label span:nth-child(2) { top: 8px; }
    .nav-toggle-label span:nth-child(3) { top: 16px; }
    .theme-toggle-label {
      color: #fff;
      cursor: pointer;
      margin-left: 15px;
    }
    .theme-toggle:checked ~ * {
      --bg-color: #222;
      --text-color: #ddd;
      --link-color: #1e90ff;
      --sidebar-bg: #333;
    }
    .content-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }
    .main-content {
      flex: 2;
      min-width: 0;
      padding: 20px;
    }
    .sidebar {
      flex: 1;
      min-width: 0;
      padding: 20px;
      background: var(--sidebar-bg);
    }
    .post {
      margin-bottom: 30px;
      border-bottom: 2px solid #eee;
      padding-bottom: 20px;
    }
    .post-image {
      max-width: 100%;
      height: auto;
      margin-bottom: 15px;
      border-radius: 5px;
    }
    .post-title {
      font-size: 1.5rem;
      margin-bottom: 10px;
    }
    .post-title a {
      text-decoration: none;
    }
    .post-title a:hover {
      text-decoration: underline;
    }
    .post-body {
      font-size: 1rem;
      line-height: 1.8;
    }
    .post-footer {
      font-size: 0.9rem;
      color: #666;
      margin-top: 10px;
    }
    .widget {
      margin-bottom: 20px;
    }
    .widget h2 {
      font-size: 1.2rem;
      margin-bottom: 10px;
    }
    .widget ul {
      list-style: none;
    }
    .widget ul li {
      margin-bottom: 10px;
    }
    .widget ul li a:hover {
      text-decoration: underline;
    }
    .widget .BlogSearch input {
      width: 100%;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    .footer-columns {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      padding: 20px 0;
    }
    .footer-column {
      flex: 1;
      min-width: 200px;
    }
    .footer-column h3 {
      font-size: 1.2rem;
      margin-bottom: 10px;
      color: #fff;
    }
    .footer-column p,
    .footer-column ul li a {
      color: #ccc;
    }
    .footer-column ul {
      list-style: none;
    }
    .footer-column ul li {
      margin-bottom: 8px;
    }
    .footer-column ul li a:hover {
      color: #fff;
    }
    .footer-bottom {
      border-top: 1px solid #444;
      padding-top: 10px;
      text-align: center;
      color: #ccc;
    }
    /* Responsive */
    @media screen and (max-width: 768px) {
      .content-wrapper, .footer-columns {
        flex-direction: column;
      }
      .main-content, .sidebar {
        flex: 100%;
      }
      .nav-toggle-label {
        display: block;
        position: absolute;
        right: 15px;
        top: 15px;
      }
      .nav-menu {
        display: none;
        flex-direction: column;
        text-align: center;
        width: 100%;
      }
      .nav-menu li {
        margin: 10px 0;
      }
      .nav-toggle:checked ~ .nav-menu {
        display: flex;
      }
    }
    @media screen and (max-width: 480px) {
      .header h1 {
        font-size: 1.5rem;
      }
      .main-content, .sidebar {
        padding: 10px;
      }
    }
  ]] >< /b:skin >
< /head >
< body >
  < header class='header' >
    < h1 >< data:blog.title/ >< /h1 >
  < /header >
  < nav class='nav' >
    < div class='container' >
      < input class='nav-toggle' id='nav-toggle' type='checkbox'/ >
      < label class='nav-toggle-label' for='nav-toggle' >
        < span >< /span >
        < span >< /span >
        < span >< /span >
      < /label >
      < input class='theme-toggle' id='theme-toggle' type='checkbox'/ >
      < label class='theme-toggle-label' for='theme-toggle' >Dark Mode< /label >
      < 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 >
    < /div >
  < /nav >
  < div class='container' >
    < div class='content-wrapper' >
      < div class='main-content' >
        < b:section class='main' id='main' preferred='true' >
          < b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' >
            < b:includable id='main' >
              < b:loop values='data:posts' var='post' >
                < article class='post' >
                  < b:if cond='data:post.firstImageThumbnail' >
                    < img class='post-image' expr:src='data:post.firstImageThumbnail' loading='lazy'/ >
                  < /b:if >
                  < h2 class='post-title' >
                    < a expr:href='data:post.url' >< data:post.title/ >< /a >
                  < /h2 >
                  < div class='post-body' >
                    < data:post.body/ >
                  < /div >
                  < div class='post-footer' >
                    Posted by < data:post.author/ > on < data:post.date/ >
                  < /div >
                < /article >
              < /b:loop >
            < /b:includable >
          < /b:widget >
        < /b:section >
      < /div >
      < aside class='sidebar' >
        < b:section class='sidebar' id='sidebar' >
          < b:widget id='Profile1' locked='false' title='About Me' type='Profile'/ >
          < b:widget id='Search1' locked='false' title='Search' type='BlogSearch'/ >
          < b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/ >
          < b:widget id='Label1' locked='false' title='Categories' type='Label'/ >
        < /b:section >
      < /aside >
    < /div >
  < /div >
  < footer class='footer' >
    < div class='container' >
      < div class='footer-columns' >
        < div class='footer-column' >
          < h3 >About Us< /h3 >
          < p >< data:blog.title/ > is your go-to blog for awesome content.< /p >
        < /div >
        < div class='footer-column' >
          < h3 >Quick Links< /h3 >
          < ul >
            < 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 >
        < /div >
        < div class='footer-column' >
          < h3 >Follow Us< /h3 >
          < ul class='social-links' >
            < li >< a href='#' >Facebook< /a >< /li >
            < li >< a href='#' >Twitter< /a >< /li >
            < li >< a href='#' >Instagram< /a >< /li >
          < /ul >
        < /div >
      < /div >
      < div class='footer-bottom' >
        < p >&copy; < data:blog.title/ > 2025. All rights reserved.< /p >
      < /div >
    < /div >
  < /footer >
< /body >
< /html >

This template is responsive, modern, and ready to use. Copy it into your Blogger Theme’s Edit HTML, save, and customize colors, fonts, or links as needed.

Customization Tips

To make your template unique, try these:

Change Colors: Update hex codes (e.g., #007bff to #ff5733 for orange).
Use Google Fonts: Add < link href='https://fonts.googleapis.com/css2?family=Roboto&display=swap' rel='stylesheet'/ > in < head > and set font-family: 'Roboto', sans-serif; in body.
Add Animations: Use CSS animations for hover effects, e.g., transition: transform 0.3s; .post:hover { transform: scale(1.02); }.
Custom Widgets: Add a subscription form or recent comments widget via Blogger’s Layout editor.

SEO and Performance Tips

A responsive template isn’t enough—you need it to rank well and load fast:

SEO:
- Add meta descriptions: < meta expr:content='data:blog.metaDescription' name='description'/ > in < head >.
- Use proper heading tags (< h1 >, < h2 >).
- Optimize images with alt text: < img expr:alt='data:post.title' .../ >.
Performance:
- Minify CSS by removing comments and extra spaces.
- Use loading='lazy' for all images.
- Avoid heavy external scripts.
Analytics: Add Google Analytics via Blogger’s Settings > Stats.

Conclusion

Wow, dosto, we’ve built a responsive Blogger template from scratch! You’ve learned:

How Blogger templates work with XML and b:tags.
Creating a responsive layout with Flexbox and media queries.
Styling posts, navigation, sidebar, and footer.
Adding advanced features like dark mode and lazy loading.
Testing, debugging, and optimizing for SEO/performance.

This 9000-word guide is your ultimate resource for creating a stunning blog. Now, go customize your template, publish some awesome posts, and watch your blog shine like a Diwali diya. Keep experimenting, keep blogging, and always have fun!

If you’re stuck, drop a comment, and I’ll help you out in true desi style. Abhi ke liye, bas yahi kahunga: “Blog banao, aur duniya ko dikhao!” (Make a blog and show the world!)

Happy Blogging, Dosto! 😎

Free Script User Experience