This is the first build log on Botvana, and it's about the blog itself. We wanted a modern, fast, mobile-friendly tech blog on a free Blogger account, with no paid domain and no paid template, so we wrote our own free Blogger theme. This post records what we built, what broke, and what we'd do differently, so you can build your own free Blogger site without repeating our mistakes.
No sponsorships, no affiliate links. Just the steps we actually took in October 2026.
QUICK ANSWER
We built Botvana on a free Blogger account with no paid domain and no paid template by writing our own custom Blogger theme. This build log covers picking a name, writing the theme, fixing mobile layout, cleaning up widgets, favicons and permalinks, plus a checklist so you can avoid our mistakes.
Why we built Botvana on free Blogger
We wanted to start writing immediately, at zero cost. Blogger gives you free hosting on a blogspot.com address, free HTTPS, and a Google account sign-in. It also plays well with Google Search Console, which matters when you want posts found. The trade-off is less flexibility than self-hosted platforms, and a .blogspot.com name instead of your own domain. Blogger lets you connect a custom domain later, so starting free doesn't lock you in.
Step 1: Picking a name and a look
We checked several short names before settling on Botvana and the address botvana.blogspot.com. Then we set a small brand system and stuck to it:
- Colours: navy #0B1026, violet #7C3AED, cyan #22D3EE, off-white #F8FAFC and slate #334155.
- Fonts: Space Grotesk for headings, Inter for body text.
Choosing colours and fonts before touching the theme saved a lot of back-and-forth later. Every design decision became "does this fit the palette?"
Step 2: The template problem
Our first idea was to use a popular premium Blogger template. The one we liked most turned out to be paid, with its code protected. You'll find "free downloads" of paid templates online, but those are unauthorised copies. They can break the creator's licence and can hide injected scripts or spam links. We didn't use them.
We also tried restyling Blogger's built-in Contempo theme with custom CSS. It worked, but it still looked like a default theme. So we built our own.
Step 3: Writing a custom Blogger theme
Blogger themes are a single XML file that mixes HTML, CSS and Blogger's own template tags. We wrote ours from scratch, then uploaded it through Theme → Backup / Restore → Upload. It included:
- A dark navy header with a gradient wordmark.
- Post cards with large featured images.
- JSON-LD structured data so search engines can read article details.
- Open Graph and Twitter tags so links look good when shared.
- A hamburger menu that opens a side drawer.
- A fixed "glass" tab bar at the bottom of the screen on phones.
Tip: always download a backup of your current theme before uploading a new one. If something goes wrong, you can restore it in seconds.
Step 4: Making mobile actually work
Blogger can serve a separate, simplified mobile theme. Because our theme was built responsive from the start, we set Theme → Customize → Mobile settings to show the desktop theme on mobile. That way phones get our real design, not Blogger's fallback.
Mobile testing found most of our bugs: a search button cut off at the edge, images that didn't fit their cards, and spacing that looked fine on a laptop but cramped on a phone. Check your site on a real phone after every change. Most of your readers will be on one.
Step 5: Cleaning up leftover widgets
When you switch themes, Blogger keeps widgets from the old one. After our upload, we saw leftovers like a duplicate featured-post block, a blog archive, a profile box and "report abuse" links. We removed them from the Layout screen. If your new theme shows strange extra boxes, that's almost always the reason.
Step 6: The favicon and logo
We designed an icon and a wide logo. When uploading the favicon, Blogger rejected our first file for being too large. Its limit is 100 KB. A resized 256-pixel copy solved it. Keep a small square version of your icon ready for this.
The logo is still a work in progress. Our first version didn't feel right, and we're redesigning it. That's normal. Brand details can improve after launch.
Step 7: Permalinks (a lesson learned)
Blogger lets you set a custom permalink for each post before publishing. Ours didn't take, so our first posts ended up with addresses like /2026/10/blog-post.html instead of readable slugs. Search engines can still index them, but readable URLs are better for people. Lesson: set the custom permalink in post settings and check it before you hit Publish, because changing a URL after publishing creates a new address.
Our first three posts live at those addresses: the GPT-6 explainer, the ChatGPT vs Gemini vs Claude comparison, and the Gemini Notebook study guide.
Step 8: The byline surprise
Blogger shows the author name from your Blogger profile on every post. If your profile name isn't the name you want readers to see, change it in your Blogger profile settings before publishing lots of posts.
What's still on our list
- A redesigned logo.
- About, Contact, Privacy Policy and Disclaimer pages.
- Readable permalinks for new posts.
- Ongoing fixes from mobile testing.
Next, we documented how we got the site into Google Search Console and indexed. That's our second build log.
Our free Blogger checklist
- Pick a name and a simple colour and font system.
- Avoid pirated "free" copies of paid templates.
- Back up your theme before every upload.
- Test on a real phone after each change.
- Remove leftover widgets in Layout.
- Keep your favicon under 100 KB.
- Set the custom permalink before publishing.
- Check your profile display name.
Want to put this into practice? Try our free Favicon Generator and Color Palette Generator right in your browser, then read Build Log and Google AI Mode Guide on Botvana.
Related: Sizing images for your blog and social posts? Use our social media image sizes for 2026. Want a say in AI training on your posts? Read the robots.txt guide to blocking AI training.
Sources and further reading
- Google Search Console (Google)
FAQ
Can you make a modern blog on free Blogger?
Yes. With a custom theme you control the design, including a mobile-first layout.
Is it safe to download free copies of paid Blogger templates?
We don't recommend it. They're usually unauthorised, and they can contain hidden scripts or links.
Why does my Blogger site show old widgets after changing themes?
Blogger keeps widgets from your previous theme. Remove them in the Layout screen.
What size should a Blogger favicon be?
Under 100 KB. A small square image, such as 256 by 256 pixels, works well.
Can I move from Blogger to a custom domain later?
Yes. Blogger supports connecting a custom domain later in its settings.
Comments
Post a Comment