Free fast Blogger theme with sidebar menu — clean, responsive, and AdSense ready with no footer credit
Free Blogger theme — copy the code or download the XML to install in 2 minutes

I still remember the day I started my first Blogger blog. I spent hours searching for a "free theme" that didn't look like it was made in 2010. Most free themes out there are either packed with footer credits, break on mobile, or load so slowly that Google gives up before your first post even shows up.

So I built my own. And then I realized — every new blogger needs exactly this. A theme that's fast, clean, mobile-friendly, AdSense-ready, and doesn't have anyone else's name slapped on it.

Here it is. Scroll down, copy the code or download the XML file, and install it on your Blogger blog. It takes about 2 minutes. No signup, no payment, no footer credit. It's yours.

Before you install: A fast theme is only half the story. Your images matter just as much. Try our free Image Compressor to reduce image file sizes without losing quality — faster images mean faster pages.

What's Inside This Theme

  • Blazing Fast — No external fonts, no jQuery, no heavy libraries. Just pure HTML and CSS. Loads in under 1 second.
  • Sidebar Menu — A clean navigation menu that works perfectly on mobile (slide-down) and desktop.
  • AdSense Ready — Clean layout with ad-friendly spaces. No ad-blocking code.
  • 100% Responsive — Perfect on phone, tablet, and desktop.
  • No Footer Credit — Nothing from me, nothing from anyone else. Fully yours.
  • Clean Typography — Uses system fonts for instant rendering.
  • Blogger Widgets Supported — Search, Popular Posts, Labels, Archive — all work.
  • SEO Optimized — Proper meta tags, canonical URLs, mobile viewport.
  • Easy to Customize — Just change a few color codes to make it your own.

Get The Theme — Copy or Download

Two ways to grab it. Copy the code directly, or download the .xml file to import in Blogger. Both give you the exact same theme.

Blogger Theme XML Code
<?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>
<meta charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<meta content='#2271b1' name='theme-color'/>
<b:include data='blog' name='all-head-content'/>

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>

<link expr:href='data:blog.canonicalUrl' rel='canonical'/>

<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta content='Welcome to my blog.' name='description'/>
</b:if>

<b:skin><![CDATA[
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;font-size:17px;line-height:1.7;color:#1a1a1a;background:#fff;-webkit-font-smoothing:antialiased}
a{color:#2271b1;text-decoration:none}
a:hover{text-decoration:underline;color:#135e96}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{line-height:1.3;color:#111;font-weight:700;margin-bottom:12px}
h1{font-size:32px}
h2{font-size:24px;margin-top:30px}
h3{font-size:20px;margin-top:24px}
p{margin-bottom:18px}
ul,ol{margin:0 0 18px 22px}
li{margin-bottom:6px}
blockquote{border-left:4px solid #ddd;padding:10px 18px;margin:20px 0;color:#555;font-style:italic;background:#fafafa}
code{background:#f4f4f4;padding:2px 6px;border-radius:3px;font-family:Monaco,Consolas,monospace;font-size:15px;color:#c7254e}
pre{background:#f6f8fa;padding:16px;border-radius:6px;overflow-x:auto;margin:18px 0}
table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
th,td{padding:10px;border:1px solid #e1e4e8;text-align:left}
th{background:#f6f8fa;font-weight:600}

.header{border-bottom:1px solid #eee;background:#fff;position:sticky;top:0;z-index:100;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.header-in{max-width:1100px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.blog-title{font-size:19px;font-weight:800;color:#111;text-decoration:none;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blog-title:hover{color:#2271b1;text-decoration:none}
.menu-toggle{display:none;background:#f0f1f5;border:none;width:42px;height:42px;border-radius:10px;font-size:20px;cursor:pointer;color:#333;font-family:inherit}
.menu-toggle.active{background:#2271b1;color:#fff}
.main-nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.main-nav a{padding:9px 14px;border-radius:8px;font-size:14px;font-weight:600;color:#2d3142}
.main-nav a:hover{background:#eef0ff;color:#2271b1;text-decoration:none}
@media(max-width:768px){
.header-in{padding:10px 16px}
.menu-toggle{display:inline-flex;align-items:center;justify-content:center}
.blog-title{font-size:16px}
.main-nav{display:none;width:100%;padding-top:12px;border-top:1px solid #f0f1f5;margin-top:8px}
.main-nav.active{display:block}
.main-nav a{display:block;padding:13px 16px;font-size:15px;background:#f9fafb;border-radius:10px;margin-bottom:6px;border:1px solid #f0f1f5}
}

.container{max-width:1100px;margin:0 auto;padding:32px 20px}
.layout{display:grid;grid-template-columns:1fr 260px;gap:40px;align-items:start}
@media(max-width:840px){.layout{grid-template-columns:1fr;gap:30px}}

.post-title{font-size:24px;margin-bottom:6px;line-height:1.3;font-weight:700}
.post-meta{font-size:12px;color:#888;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #eee}
.post-content{font-size:17px;line-height:1.8;color:#222}
.post-content img{border-radius:6px;margin:20px 0}

.post-list{display:flex;flex-direction:column;gap:32px}
.post-item{padding-bottom:32px;border-bottom:1px solid #eee}
.post-item-title{font-size:22px;font-weight:700;line-height:1.3;margin-bottom:8px}
.post-item-title a{color:#111}
.post-item-title a:hover{color:#2271b1;text-decoration:none}
.post-item-meta{font-size:13px;color:#666;margin-bottom:10px}
.post-item-snip{font-size:16px;color:#444;line-height:1.6}
.read-more{display:inline-block;margin-top:10px;font-size:14px;font-weight:600;color:#2271b1}

.sidebar{display:flex;flex-direction:column;gap:28px}
.sidebar .widget h2,.sidebar .widget .title{font-size:15px;font-weight:700;color:#111;margin-bottom:14px;text-transform:uppercase;letter-spacing:.5px;padding-bottom:8px;border-bottom:2px solid #eee}
.sidebar .widget ul{list-style:none;margin:0;padding:0}
.sidebar .widget li{padding:8px 0;border-bottom:1px solid #f0f0f0;font-size:15px}
.sidebar .widget a{color:#333}
.sidebar .widget a:hover{color:#2271b1}

.search-form{display:flex;gap:6px}
.search-form input{flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:15px;outline:none}
.search-form button{padding:8px 16px;background:#2271b1;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:600;font-size:14px}

.pagination{display:flex;justify-content:space-between;gap:10px;margin-top:36px;padding-top:24px;border-top:1px solid #eee}
.pagination a{padding:8px 16px;border:1px solid #ddd;border-radius:4px;font-size:14px;font-weight:500}

.comments{margin-top:40px;padding-top:24px;border-top:1px solid #eee}
.comments h3{font-size:18px;margin-bottom:16px}
#comment-editor{width:100%;border:none;min-height:300px}

.footer{margin-top:60px;padding:36px 20px 24px;border-top:1px solid #eee;background:#fafafa}
.footer-in{max-width:1100px;margin:0 auto}
.footer-widgets{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-bottom:24px}
@media(max-width:700px){.footer-widgets{grid-template-columns:1fr;text-align:center}}
.footer .widget h2{font-size:14px;font-weight:700;color:#111;margin-bottom:12px}
.footer .widget ul{list-style:none;margin:0;padding:0}
.footer .widget li{padding:5px 0;font-size:14px}
.footer .widget a{color:#555}
.footer .widget a:hover{color:#2271b1}
.footer-bottom{text-align:center;padding-top:20px;border-top:1px solid #eee;font-size:13px;color:#888}

.empty{text-align:center;padding:60px 20px}
.empty h2{font-size:22px;color:#333}

#navbar-iframe,.navbar{display:none!important;height:0!important;visibility:hidden!important}
.status-msg-wrap,.post-feeds,.feed-links,.quickedit,.item-control{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
]]></b:skin>
</head>

<body>
<header class='header'>
<div class='header-in'>
<a class='blog-title' expr:href='data:blog.homepageUrl'><data:blog.title/></a>
<button aria-label='Menu' class='menu-toggle' id='menuToggle' type='button'>&#9776;</button>
<nav class='main-nav' id='mainnav'>
<b:section class='header-menu' id='header-menu' maxwidgets='3' name='Header Menu' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList' version='2' visible='true'>
<b:includable id='main'>
<b:loop values='data:links' var='link'>
<a expr:href='data:link.target'><data:link.name/></a>
</b:loop>
</b:includable>
</b:widget>
</b:section>
</nav>
</div>
</header>

<div class='container'>
<div class='layout'>
<div class='content'>
<b:section class='main-blog' id='main' name='Main Posts' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='2' visible='true'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='singlePost'/>
</b:loop>
<b:elseif cond='data:blog.pageType == "static_page"'/>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='staticPage'/>
</b:loop>
<b:else/>
<b:if cond='data:posts.empty'>
<div class='empty'><h2>No posts found</h2></div>
<b:else/>
<div class='post-list'>
<b:loop values='data:posts' var='post'>
<article class='post-item'>
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url' style='display:block;margin-bottom:14px'><img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' loading='lazy' style='width:100%;height:auto;border-radius:6px'/></a>
</b:if>
<h2 class='post-item-title'><a expr:href='data:post.url'><data:post.title/></a></h2>
<div class='post-item-meta'><data:post.date/> &#8226; <data:post.author/></div>
<p class='post-item-snip'><data:post.snippet/></p>
<a class='read-more' expr:href='data:post.url'>Read More &#8594;</a>
</article>
</b:loop>
</div>
</b:if>
<b:include name='pagination'/>
</b:if>
</b:includable>

<b:includable id='singlePost' var='post'>
<article class='post'>
<h1 class='post-title'><data:post.title/></h1>
<div class='post-meta'><data:post.date/> &#8226; By <data:post.author/></div>
<div class='post-content'><data:post.body/></div>
</article>
<b:if cond='data:post.allowComments'>
<section class='comments' id='comments'>
<h3>Comments</h3>
<a name='comment-form'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
<script src='https://www.blogger.com/static/v1/jsbin/comment_from_post.js' type='text/javascript'/>
</section>
</b:if>
</b:includable>

<b:includable id='staticPage' var='post'>
<article class='post'>
<h1 class='post-title'><data:post.title/></h1>
<div class='post-content'><data:post.body/></div>
</article>
</b:includable>

<b:includable id='pagination'>
<b:if cond='data:newerPageUrl or data:olderPageUrl'>
<nav class='pagination'>
<b:if cond='data:newerPageUrl'><a expr:href='data:newerPageUrl'>&#8592; Newer</a><b:else/><span/></b:if>
<b:if cond='data:olderPageUrl'><a expr:href='data:olderPageUrl'>Older &#8594;</a></b:if>
</nav>
</b:if>
</b:includable>
</b:widget>
</b:section>
</div>

<aside class='sidebar'>
<b:section class='sidebar-widgets' id='sidebar' name='Sidebar' showaddelement='yes'>
<b:widget id='BlogSearch1' locked='false' title='Search' type='BlogSearch' version='2' visible='true'>
<b:includable id='main'>
<div class='widget'><h2 class='title'>Search</h2>
<form class='search-form' expr:action='data:blog.searchUrl' method='get'>
<input aria-label='Search' name='q' placeholder='Search...' type='text'/>
<button type='submit'>Go</button></form>
</div></b:includable></b:widget>

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' version='2' visible='true'>
<b:includable id='main'>
<div class='widget'><h2 class='title'>Popular Posts</h2>
<ul><b:loop values='data:posts' var='post'>
<li><a expr:href='data:post.url'><data:post.title/></a></li>
</b:loop></ul></div>
</b:includable></b:widget>

<b:widget id='Label1' locked='false' title='Categories' type='Label' version='2' visible='true'>
<b:includable id='main'>
<div class='widget'><h2 class='title'>Categories</h2>
<ul><b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><data:label.name/></a></li>
</b:loop></ul></div>
</b:includable></b:widget>

<b:widget id='BlogArchive1' locked='false' title='Archive' type='BlogArchive' version='2' visible='true'>
<b:includable id='main'>
<div class='widget'><h2 class='title'>Archive</h2>
<ul><b:loop values='data:data' var='i'>
<li><a expr:href='data:i.url'><data:i.name/></a></li>
</b:loop></ul></div>
</b:includable></b:widget>
</b:section>
</aside>
</div>
</div>

<footer class='footer'>
<div class='footer-in'>
<div class='footer-bottom'>
<p>&#169; <data:blog.title/>. All rights reserved.</p>
</div>
</div>
</footer>

<script>
//<![CDATA[
(function(){
var toggle = document.getElementById('menuToggle');
var nav = document.getElementById('mainnav');
if(toggle && nav){
toggle.addEventListener('click', function(){
var isOpen = nav.classList.toggle('active');
toggle.classList.toggle('active', isOpen);
if(isOpen){ toggle.innerHTML = 'X'; } else { toggle.innerHTML = '&#9776;'; }
});
nav.addEventListener('click', function(e){
if(e.target.tagName === 'A' && window.innerWidth < 769){
nav.classList.remove('active');
toggle.classList.remove('active');
toggle.innerHTML = '&#9776;';
}
});
}
})();
//]]>
</script>

</body>
</html>

See the Theme Live

Want to see this theme running on a real Blogger blog before installing it? Visit our demo blog — it's using the exact theme you're about to copy or download.

Live Demo Blog

Open it on desktop and mobile. Check the sidebar, menu, and post layout — everything you see is exactly what you'll get.

View Live Demo →

How to Install This Theme

Once you've copied the code or downloaded the XML file, follow these steps:

  1. Open Blogger Dashboard → click your blog.
  2. In the left menu, click Theme.
  3. Click the three-dot menu (⋮) next to the "Customize" button.
  4. Choose Edit HTML (or Backup/Restore for the XML file).
  5. If editing: press Ctrl+A to select all, delete it, paste the code you copied. If restoring: click Upload and select the downloaded .xml file.
  6. Click the Save button.
  7. Done. Visit your blog to see the new theme live.

Before you paste: Download a backup of your current theme. In the Theme page, click the ⋮ menu → Backup → Save the file. If something goes wrong, you can always restore it.

Customize the Theme (Optional)

Want to change the accent color? Open Edit HTML and look for the color #2271b1. Replace all instances of it with your preferred color.

Popular alternatives:

• Purple: #6366f1
• Green: #10b981
• Red: #dc2626
• Orange: #ea580c
• Black: #111111

Once your theme is installed, don't forget to add a custom favicon to complete your blog's branding. It's a small detail that makes a big difference.

Frequently Asked Questions

Is this theme really free?

Yes. 100% free. No signup, no payment, no hidden charges. Copy it, download it, modify it — it's yours.

Are there any footer credits or branding?

No. There is no footer credit, no "Powered by" tag, no link back to me. Your blog is completely yours.

Will this theme slow down my blog?

No, the opposite. This theme uses only system fonts and inline CSS — no external resources. It loads in under a second on most connections.

Is it AdSense approved?

Yes. The layout is designed to be AdSense-friendly with clean spaces where ads can be placed without disrupting the reading experience.

Does it work on mobile phones?

Absolutely. The theme is fully responsive. On mobile, the menu collapses into a hamburger icon, and content stacks neatly for easy reading.

Can I customize the colors and fonts?

Yes. All colors are CSS variables and easy to change. Just find the hex codes in Edit HTML and replace them with your choices.

What if I break something while editing?

Always download a backup of your theme before making changes. In Blogger, you can restore any previous backup in one click.

That's It — Go Build Your Blog

There you have it. A clean, fast, fully responsive Blogger theme — no credit, no branding, no restrictions. I built it because I was tired of seeing new bloggers struggle with heavy, outdated free themes.

Copy the code, download the file, install it in your blog, and start creating. If you find it useful, share it with someone else who's just starting out.

And for even faster loading, consider converting your blog images to WebP format — it reduces file size by 25-35% compared to JPG.

Happy blogging!

Note: If you face any issue after installing this theme — like comments not working or layout breaking — don't worry. Just visit our Contact Us page and let us know. We'll help you fix it.

I've personally tested this theme on my own blog — you can see the live demo below. If anything doesn't work on your setup, contact me and I'll help you figure it out.