( 2025 ) How To Make Blogger Template From Scratch
Hey Everyone! Today, We Will Learn How To Make Blogger Template From Scratch. By The End Of This Post, You Can Change Your HTML Template Into A Working Blogger XML Theme.
You Can Upload This Template To Blogger And Use It With Your Posts And Widgets. Before You Start, You Should Know HTML, CSS, And JavaScript Or Understand How They Work Together.
We Will Learn Important Concepts For Making A Blogger template. We Will See How To Add Sections And Create Widgets. We Will Also Learn How To Display Blog Posts Using A Post Loop.
Apart From This, We Will See How To Make Our Theme Load Fast And Mobile-Friendly. In The End, I Will Share The XML File So That You Can Restore The Made In This Tutorial.
Also Read: How To Add Social Share Button In Blogger
Table of Contents
Why Do You Need To (Develop) Make Blogger Template?
- You Can Use Any Custom HTML Design As a Blogger Template.
- Optimize The Design Of Your Blog According To The Niche.
- Sell Your Created Blogger Template To Bloggers.
- Unique Design Which Increases The UX.
- Add Custom Widget OR Elements.
- Full Control Over The Design
- Speed Optimization.
- No Credit In Footer
Blogger Dashboard Overview:
Layout Section: The layout Section In Blogger Is For adding or removing different types of layouts provided by Google Blogger like Custome HTML, Search, Recent Posts, Etc
Theme Section: The theme Section Contains All The Settings Like Backup The Current Theme, Restore (Uploading) New Theme, etc. As Shown In the Following Image. We are going to work in the ‘Edit HTML’ Section for developing a blogger template from scratch.
Step By Step: Make Blogger Template From Scratch
To Develop a Blogger Theme From Scratch You Need To Know Basic HTML, CSS & JavaScript To Give Structure, Styling & Interactivity To Our Theme.
We first make a blank template to create a blogger template from scratch. Then we will add and develop components in the theme step by step.
Step 1: Generate Blank Template
Go To the Edit HTML Option in the theme section as shown in the above image👆. Now remove all the XML Code present in the code editor as shown in the following GIF:
When You Delete The Code And Save The Theme With No Code, the Blogger Creates The Default Theme Again As Shown In The Following GIF. This Is Because The Code Cannot Be Empty.
No To Solve This Issue We Have To Use The Boiler Plate Code That Will Help us to achieve the first step which is generating the blank blogger template.
<?xml version="1.0" encoding="UTF-8" ?>
<html 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>JavaScripts Magic</title>
<b:skin><![CDATA[
]]></b:skin>
</head>
<body>
<header>
</header>
<footer>
</footer>
<b:section class='test' id='test' showaddelement='yes'/>
<script type='text/javascript'>
//<![CDATA[
// Your JavaScript code goes here
// ]]>
</script>
</body>
</html>It is the Boiler Plate Code For the Blank Blogger Template. Now you have to copy the above code and paste it into the blogger code editor & hit the save Button as shown in the following GIF:
This Code Helps You To Generate a Complete Blank Template & Generate The Layout According To Our Design,
Step 2: Develop a Prototype Of Blogger Template Using HTML & CSS
To make blogger template you must have a good knowledge of HTML, CSS & JavaScript. Blogger theme development is mostly similar to developing websites with HTML, CSS & JavaScript if you know this then you only need to understand how to display dynamic data from Blogger with your custom code, conditional rendering, and knowledge about sections & widgets.
For simplicity reasons, we will only create components that help you understand how to develop a blogger theme. Here are some HTML Components that we will convert into blogger themes one by one:
Navigation Menu:
<header>
<div class='navigation'>
<div class='nav_left'>
<h1>JavaScripts Magic</h1>
</div>
<div class='nav_right'>
<ul>
<li><a href=''>Home</a></li>
<li><a href=''>About</a></li>
<li><a href=''>Contact</a></li>
<li><a href=''>Terms</a></li>
<li><a href=''>Disclaimer</a></li>
</ul>
</div>
</div>
</header>Footer:
<footer>
<div class='footer_social'>
<ul>
<li>
<!--instagram logo -->
<svg fill='#3f729b' viewBox='0 0 512.00096 512.00096'><path d='m373.40625 0h-234.8125c-76.421875 0-138.59375 62.171875-138.59375 138.59375v234.816406c0 76.417969 62.171875 138.589844 138.59375 138.589844h234.816406c76.417969 0 138.589844-62.171875 138.589844-138.589844v-234.816406c0-76.421875-62.171875-138.59375-138.59375-138.59375zm-117.40625 395.996094c-77.195312 0-139.996094-62.800782-139.996094-139.996094s62.800782-139.996094 139.996094-139.996094 139.996094 62.800782 139.996094 139.996094-62.800782 139.996094-139.996094 139.996094zm143.34375-246.976563c-22.8125 0-41.367188-18.554687-41.367188-41.367187s18.554688-41.371094 41.367188-41.371094 41.371094 18.558594 41.371094 41.371094-18.558594 41.367187-41.371094 41.367187zm0 0'/><path d='m256 146.019531c-60.640625 0-109.980469 49.335938-109.980469 109.980469 0 60.640625 49.339844 109.980469 109.980469 109.980469 60.644531 0 109.980469-49.339844 109.980469-109.980469 0-60.644531-49.335938-109.980469-109.980469-109.980469zm0 0'/><path d='m399.34375 96.300781c-6.257812 0-11.351562 5.09375-11.351562 11.351563 0 6.257812 5.09375 11.351562 11.351562 11.351562 6.261719 0 11.355469-5.089844 11.355469-11.351562 0-6.261719-5.09375-11.351563-11.355469-11.351563zm0 0'/></svg>
</li>
<li>
<!--Pinterest logo -->
<svg viewBox='0 0 24 24'>
<path d='M12.14.5C5.86.5 2.7 5 2.7 8.75c0 2.27.86 4.3 2.7 5.05.3.12.57 0 .66-.33l.27-1.06c.1-.32.06-.44-.2-.73-.52-.62-.86-1.44-.86-2.6 0-3.33 2.5-6.32 6.5-6.32 3.55 0 5.5 2.17 5.5 5.07 0 3.8-1.7 7.02-4.2 7.02-1.37 0-2.4-1.14-2.07-2.54.4-1.68 1.16-3.48 1.16-4.7 0-1.07-.58-1.98-1.78-1.98-1.4 0-2.55 1.47-2.55 3.42 0 1.25.43 2.1.43 2.1l-1.7 7.2c-.5 2.13-.08 4.75-.04 5 .02.17.22.2.3.1.14-.18 1.82-2.26 2.4-4.33.16-.58.93-3.63.93-3.63.45.88 1.8 1.65 3.22 1.65 4.25 0 7.13-3.87 7.13-9.05C20.5 4.15 17.18.5 12.14.5z'/>
</svg>
</li>
<li>
<!--Youtube logo -->
<svg viewBox='0 0 512 512'>
<path d='M490.24,113.92c-13.888-24.704-28.96-29.248-59.648-30.976C399.936,80.864,322.848,80,256.064,80 c-66.912,0-144.032,0.864-174.656,2.912c-30.624,1.76-45.728,6.272-59.744,31.008C7.36,138.592,0,181.088,0,255.904 C0,255.968,0,256,0,256c0,0.064,0,0.096,0,0.096v0.064c0,74.496,7.36,117.312,21.664,141.728 c14.016,24.704,29.088,29.184,59.712,31.264C112.032,430.944,189.152,432,256.064,432c66.784,0,143.872-1.056,174.56-2.816 c30.688-2.08,45.76-6.56,59.648-31.264C504.704,373.504,512,330.688,512,256.192c0,0,0-0.096,0-0.16c0,0,0-0.064,0-0.096 C512,181.088,504.704,138.592,490.24,113.92z M192,352V160l160,96L192,352z'/>
</svg>
</li>
<li>
<!--Telegram logo -->
<svg viewBox='0 0 24 24'><path d='M9.78,18.65L10.06,14.42L17.74,7.5C18.08,7.19 17.67,7.04 17.22,7.31L7.74,13.3L3.64,12C2.76,11.75 2.75,11.14 3.84,10.7L19.81,4.54C20.54,4.21 21.24,4.72 20.96,5.84L18.24,18.65C18.05,19.56 17.5,19.78 16.74,19.36L12.6,16.3L10.61,18.23C10.38,18.46 10.19,18.65 9.78,18.65Z'/></svg>
</li>
</ul>
</div>
<div class='footer_about'>
<ul>
<li><a href=''>About</a></li>
<li><a href=''>Contact</a></li>
<li><a href=''>Terms</a></li>
<li><a href=''>Disclaimer</a></li>
</ul>
</div>
<div class='footer_copyright'>
<p> © JavaScriptsMagic.Com 2025-2026</p>
</div>
</footer>Hero Header:
<div class="heroheader">
<h2>This Is The Hero Heading For Cusotme Blogger Template</h2>
<p>This Is Short Description About Your Website To Display On The Hero Header</p>
<a href=""><button>Action Button</button></a>
</div>Blog Posts On Home Page:
<div class='post_wrapper'>
<div class='post_header_wrapper'>
<img src='imageurl.png' loading='lazy'/>
</div>
<div class='post_footer_wrapper'>
<p><a href="">Post Title</a></p>
<div class='fotter_fotter_wrapper'>
<p class='date'> 1/1/2025 </p>
</div>
</div>
</div>
These above components are not mobile friendly (not responsive) The main purpose is to know how to show the posts dynamically and work with the blogger widget. Now Let’s Convert these custom components into a blogger widget making our customer theme.
Step 3: What Are Sections & Widgets In Blogger Theme?
In blogger Sections & widgets are the key concepts that help us to organize & customize the structure of the blogger theme. Sections are containers in the blogger theme that define the layout or the content or different types of components. The widgets also called gadgets are functional elements that are usually inside the section Examples of widgets are featured posts, related posts, categories, dates, archives, etc
In simple words To Make blogger template, we have to create different types of components like navigation, sidebar, related posts, etc to make this component we have to take the help of a blogger widget and we can only create this widget in the unique section. (blogger widget can be only created in the blogger section).
- Sections = Layout
- Widget = Components Inside The Sections
Step 4: Adding Navigation In Blogger Theme
To Add navigation in the blogger template we have to create a section with the help of the following code:
<b:section id='header'>
</b>Now put the above code in the blogger theme editor and save the theme. After saving, the blogger will generate the rest of the necessary code.
Now navigate to the layout section of the blogger dashboard and look for the section that we created. In this section, we can add various types of widgets.
So we will add a widget for the navigation menu. To add our custom navigation bar as a widget in the header section we will choose HTML/javascript widget and add our code for the custom navbar as shown in the following gif:
Step 5: Adding Hero Header In Blogger Theme
Hero Section helps the reader to understand the purpose behind your blog. you can promote services & products made by you in the hero section. as well as help to increase the first content full paint score.
To add the hero header in the blogger theme we have to go to the theme editor and create one section for the hero header with the help of the following code:
<b:if cond='data:view.isHomepage'>
<b:section id="heroheader">
</b:section>
</b:if>Since we only have to display the hero header on the homepage we will wrap our section in b:if condition as shown in above code.
Now save this theme and blogger will automatically generate the rest of the code for us. Now navigate to the layout section of the blogger dashboard and the ‘HTML/JavaScript’ Gadget as shown in the following gif:
This gadget can contain the code for the hero header. We will keep it simple for simplicity, but you can make it complex according to your needs. In a similar way, you can add the footer in our theme.
Step 6: Addition Dynamic All Posts Widget
It is a very important part of blogger theme development. Up until now, our theme has been just Blank HTML. We have just Navigation and a hero header. We do not have pulled posts that we create in the blogger dashboard to the home page.
To display all the posts on the home page we will go to the theme editor of blogger and put the following code below our hero header section :
<b:section id='blogpost1'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog' version='1'/>
</b:section>Save the code in the theme editor and the blogger will generate the rest of the code that is necessary along with the blog post loop which displays all the published posts.
In the next step, you have to find the code for the loop which helps to display all posts. Here is that code:
<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'><b:if cond='data:post.firstImageUrl'>(There are two occurrence of this code so make sure you should select the right one)
Inside the <b:includable id=’post’ var=’post’> we have to create the post wrapper (post snippet) that we will only display on the home page as shown in the following code:
<b:if cond='data:view.isHomepage'>
<div class='post_wrapper'>
<div class='post_header_wrapper'>
<img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' loading='lazy'/>
</div>
<div class='post_footer_wrapper'>
<p><a expr:href='data:post.url'><data:post.title/></a></p>
<div class='fotter_fotter_wrapper'>
<p class='date'> <data:post.date/> </p>
</div>
</div>
</div>
</b:if>We Have Wrapper this code with a blogger conditional tag that shows code only on the home page and also replaced static data with blogger dynamic data explained below:
- Code For Featured Post: expr:src=’data:post.firstImageUrl’
- Code For post title: data:post.title
- Code For Post Url: data:post.url
- Code For Post Date: data:post.date
(To get dynamic attribute we use expr and to get dynamic inner HTML we use data:)
In this way we can display all blog posts on the home page we can wrap the post_wrapper in parent div to display in the grid or flex according to our needs. Now this comes with a minor issue the entire post content will show below the post wrapper to prevent this issue we have to wrap the entire content (post body) with a conditional tag so that it will be shown only on the post page.
To do this wrap this ‘<div class=’post hentry uncustomized-post-template’ itemprop=’blogPost’ itemscope=’itemscope’ itemtype=’http://schema.org/BlogPosting’>’ div with this conditional tag ‘<b:if cond=’data:view.isSingleItem’>.
This will show the post body only on the post page. This is how we can show the blog post grid on the home page and content on the post page. Here is a list of more conditional tags that can be helpful:
- Display On Home Page -> <b:if cond=’data:view.isHomepage’> </b:if>
- Display On Post Page -> <b:if cond=’data:view.isPost’> </b:if>
- Display On Static Page -> <b:if cond=’data:view.isPage’> </b:if>
Step 8: Adding Custome Search Widget In Blogger Theme
Searching posts across our blog is one of the important concepts while developing a blogger theme. To Make users Search through our blog & find what they are looking for we have to add a search widget to our theme.
You can design a search box however you want to design now I will show you how to make your search box work. To make the search box go to the theme editor and create one section for the search box as shown in the following code:
<b:section id="search"> </b:section>Now save the theme & go to the layout and add the search gadget as shown in the following gif:
Now you have to adjust the CSS code according to your design. In this way, you can add the rest of the features in your blog theme like popular posts, archives, followers, contact form, and blog stats that are provided by the blogger.
Step 12: Understanding About Custom
Now what if you have added or removed the gadget from our custom section from the layout section or have made some changes to the gadget? This can affect the design of our theme to avoid this issue you should know about the Custom markup.
Here is the syntax of the default markup:
“
<b:defaultmarkups>
<b:defaultmarkup type=’widgetType’> </b:defaultmarkup>
</b:defaultmarkups>
“
Now we will generate the default markup for our blog post widget. Go to the </head> of your theme and before this tag closes up the following code:
<b:defaultmarkups>
<b:defaultmarkup type='Blog1'>
<!--put includable settings-->
</bLdefaultmarkup>
</b:defaultmarkups>Put the above code before the closing </head> tag and put the includable setting or respective widget as shown in the following videos:
This setting will help the blogger generate the widget structure according to the predefined markup that we will define to avoid the design change when the user changes the widget.
Conclusion – How To Make a Blogger Template
In This Way, We Can Make A Blogger Template From Scratch. This Is Just a Basic idea of How We Can Make a Blogger Template We Can Add More Widget Tags and categories & make our blogger template more interactive.
This was a quick tutorial on how you can blogger themes from your custom HTML code. This tutorial was more focused on how blogger works, how to add sections, how to add gadgets, how to add default styling to the gadgets, conditional rendering tags, etc
These concepts will make you more familiar with the blogger platform and you can convert any custom HTML design to a blogger theme. We Have used this blog on Blogger to make a blogger template: javascriptsmagic.blogspot.com
Last Updated: January 10, 2025
About Author
