How I Developed My First Custom Website Theme

In this post, I’ll share how I built my custom Blogger theme from scratch, what it’s like using my styling and formatting features (blockquote, quote, and preformatted code), how to navigate my site, and how to use my comment tools for images, quotes, and code. I’ll also cover the available user badges and the changes I made to the comment section.

Why Blogger

Blogger is free and when I first started experimenting with Blogger, I had no coding experience. Creating something from scratch felt out of reach—HTML looked like a foreign language, and CSS was overwhelming. Instead of giving up, I read articles, watched tutorials, and spent hours experimenting on my blog. Little by little, everything started to make sense, and I realized that with patience and persistence, I could create something of my own.

Curious about what Blogger can really do? I shared my honest experience in Blogger Review: Can You Make Money?—covering pros and cons, and whether Blogger is actually worth using.

Another advantage is its flexibility. Many WordPress features require paid plans, especially for advanced customization, while Blogger lets me freely modify or even create my own theme without extra fees.

After all that research and experimentation, I’m excited to finally share something significant: my first custom theme. Personally, it’s an important milestone that reflects what I’ve learned, the effort I’ve put in, and how much I’ve enjoyed improving my skills. Seeing everything come together has been incredibly rewarding.

Disclaimer: My coding knowledge is still quite basic. With Blogger, I mainly work with HTML and CSS, and I haven’t explored JavaScript much yet. I also experimented with WordPress, but as a beginner, I found it more difficult to understand and use. Blogger felt much more beginner-friendly.

Custom Blogger Template Source Code

I've here some starter source code to create your own custom theme.

<?xml version="1.0" encoding="UTF-8" ?>
<html lang='en' 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' name='viewport'/>
    <title><data:blog.pageTitle/></title>
    <link href='https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&amp;family=Roboto:wght@400;900&amp;display=swap' rel='stylesheet'/>
    
   <b:skin><![CDATA[
   /* Your main CSS here */

   /* Media Queries (For mobile layout) */
@media (max-width: 600px) {
 /* Your CSS here */
 }
    ]]></b:skin>
</head>
<body>
  
  <!-- Header -->
  <b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
    <b:widget id='Header1' locked='false' title='My Blogging (Header)' type='Header'>
    </b:widget>
    <b:widget id='BlogSearch1' locked='false' title='Search This Blog' type='BlogSearch'>
    </b:widget>
    <b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
    </b:widget>
  </b:section>
  <!-- End of the header -->
  
  <!-- Sidebar -->
  <b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'/>
  <!-- End of the sidebar -->
  
  <!-- Blog Posts -->
  <b:section class='main' id='main' maxwidgets='1' showaddelement='no'>
    <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>
    </b:widget>
  </b:section>
  <!-- End of the Blog Post -->
  
  <!-- Footer -->
  <b:section class='footer' id='footer' showaddelement='yes'>
    <b:widget id='LinkList1' locked='false' title='' type='LinkList'>
    </b:widget>
  </b:section>
  <!-- End of the footer -->

</body>
</html>

After copying and pasting this into your Blogger theme, save it first, then go back and return to the theme editor to start customizing it to your preference. If you’re not sure where to start, you can explore other websites for inspiration and modify the design to match your own style.

If you want to display a specific section or widget only on the Homepage, Posts, or Pages, you can use conditional tags.

• cond='data:view.isHomepage' — Displays the section or widget only on the Homepage.
• cond='data:view.isSingleItem' — Displays the section or widget on both Posts and Pages.
• cond='data:view.isLabelSearch' — Displays the section or widget on Label pages when you click on a label.
• cond='data:view.isMultipleItems' — Displays the section or widget on search results pages, the homepage, archive pages, and label search pages.
• cond='data:view.isSearch and !data:view.isLabelSearch' — Displays the section or widget on search pages, excluding Label pages.

Style & Formatting Features

Inspiration Behind the Design

I began by altering an already-existing theme rather than starting from scratch. This method made it easier for me to understand how themes are structured and how different elements interact with each other. Before tackling something more complicated, it provided me with a strong basis.

Previously, I experimented with redesigning themes on my other website, but I wanted to go a step further this time. I set a goal for myself to develop a theme from the ground up.

For inspiration, I looked at various sources. One of the biggest influences was the layout and style of Anime-Planet forums and I also explored ideas shared by other Blogspot developers, applying their techniques and adapting them into my own style.

Here’s a quick look at how my custom text styles appear on the site:

function helloWorld() {
  console.log("This is a pre block for fixed-width text with a copy button.");
}

I’ve also created custom alert boxes for different types of information:

Warning: Ask permission before using some of my scripts to your tutorial.

Info: Feel free to use my script. Backlinks or mentioning my site is appreciated!

Danger: Do not copy my content lol.

Success: You're beautiful.

Responsive Media & Lightbox

Images are an important part of any blog, so I made them fully responsive and visually appealing. They automatically adjust to fit any screen, whether on desktop or mobile. I also adjusted their brightness in dark mode to make them easier on the eyes.

Comment Section Improvements

One of the areas I spent the most time refining is the comment section. I wanted it to feel more personalized and functional compared to the default Blogger setup.

Here are some of the improvements I implemented:

• The delete button is only visible to the admin or the original commenter. If a comment is posted anonymously, the delete option remains hidden.
• Instead of using generic system messages like “This comment has been removed by the author.,” I customized the text to display the actual name of the person who removed it.
• I also replaced the default admin deletion message with something more consistent with the theme’s tone and style.

Also read: How to Hide/Show Blogger Comment Delete Button

Homepage & Widgets

Here is a quick breakdown of how to get around and make the most of our community features.

Header & Navigation

At the very top of the page, you’ll find essential tools that enhance usability:

• A search bar that helps you quickly find posts or topics.
• A light/dark mode toggle, allowing you to switch themes depending on your preference or lighting conditions.

The Menu Bar gives you quick access to key sections:

• Home: Head back to the main feed anytime.
• About Us: Information about what we do.
• Bookmark: Save posts to read later or keep them for future reference.
• Notification Bell: Keeps you updated on changes, announcements, and new features.
• Quick Links (Sub-menu): Includes pages like Contact Us, Sitemap, and a Help/Question section where users can ask for assistance.

Browsing Content

You can browse widgets organized by labels or categories. Posts associated with each label will be displayed accordingly, making content easier to find and keeping everything well organized.

You’ll also find sections for Trending Posts and Latest Posts, so you can quickly catch up on popular content and recent updates.

Community & Interaction

Building a sense of community is one of my main goals for this site. To encourage interaction, I added a ranking system that appears next to usernames when clicking their profile in the comment section.

• Admin: The site owner.
• Author: Our guest writers.
• Supporter: Users who support the site through donations.

Also read: How to Add an Admin Badge to Blogger Comments Using Profile IDs

How to use the Parse Tool in the comment section?

Above the comment box, you’ll find several formatting options: Image, Link, Pre, Code, and Quote. Each option helps you format your comment differently:

1. Image: Use this if you want to include an image in your comment.
2. Link: Use this to add clickable links.
3. Pre: Displays preformatted text (precode) with a copy button.
4. Code: Formats text as inline code.
5. Quote: Displays your text as a blockquote.

Install as a Web App (PWA)

Did you know you can "install" this website?

• Since it works as a Progressive Web App (PWA), no app store needed.
• Just select “Add to Home Screen” from your browser.
• It’s lightweight, fast, and allows you to visit the site anytime with a single tap, just like a regular app!

Final Thoughts

Looking back, I’m surprised by how much I’ve learned just from experimenting. What once looked completely confusing now feels much more manageable, and it made me realize that you don’t necessarily need to be an expert to build something you’re proud of. Sometimes, you just need a lot of patience, curiosity, and a willingness to keep messing around with things until they work.

That said, I know there’s still a lot of room for improvement. I’m continuously learning and exploring new ideas, and I’d really value your input.

If you have suggestions for new features, design improvements, or anything else that could make the site better, feel free to share your thoughts. Your feedback will help shape future updates.

Blogger Community: Get Help, Ask Questions & Share Ideas

Also, if there’s a specific feature you’d like me to explain—whether it’s the comment system, styling techniques, or any part of the theme. Let me know, I’d be happy to create a step-by-step tutorial to help others learn as well.

Thanks for taking the time to check out my work. I’m looking forward to hearing your thoughts and continuing to improve this site!

Also read:

• How to Fix Blogger Comment iframe Dark Mode Errors
• How to Fix Blurry Images on Blogger
• Anything related to Blogger