Are you want to make blogger templates then here we make blogger templates from scratch. Before we begin you need to have a basic concept of HTML and CSS.
Before we discussed Blogger Templates you need to make a responsive website to use in blogger. Your website should be responsive on mobile, tablet, and desktop devices. If you don't know how to make a responsive website then follow this step:
Use Media queries
Properly use CSS property and value
1)Go to edit HTML in Blogger Templates
If you install already a theme in a blogger then remove this theme. You can add the first HTML boiler print.
2) Paste this Basic HTML code
3) Paste this code below <head>
Before we jump on to the next step you need to add at least one section below the body.
4) Add at least one section below the body
If you are using CSS and HTML then you obviously know about ID and Class. It is very useful on any platform.
5) Now save your theme
If your theme saves as successfully then congrats you and if your theme show an error then checks the syntax. I am also doing wrong in that process. Try to write something using the P, H1 tag below the body.
6) Refresh the page
Refresh the edit HTML page there are automatically show some generated code. Like this
Before we jump on to the next step you need to understand the basic concept of section and widget. Widget is the type of gadget in blogger. If you are the go-to blogger layout you can find the widget for header, blog post, footer, popular-post, label, featured-post, social media plugin, about section, etc.
you can use the widget in blogger templates for heder. see this example:
7) Paste the only header and footer HTML code below the body
If you don't have HTML and CSS code for header, hero section, and footer then I provided the code that you can use for practice.
8) Paste header and footer CSS under the <!CDATA[ contain all CSS]]>
9) Now see the website
After paste HTML code below body and CSS inside the CDATA. But one thing you need to understand you have at least one section. After saving the templates watch your blogger website. If you are using images for your blog then host your images online.
You can use a blogger to host your images. Just upload your images and copy the image address.
11) Make a workable search bar using blogger search bar
Make a workable search bar you need to use the blogger search bar. By using the blogger search bar all the content has been searched.
You need to add your class in a section used in HTML because your CSS doesn't apply the style in other classes.
After adding a widget and section your search bar has been replaced with the blogger search bar, you can easily edit this search bar and remove any properties from the search bar.
12) Refresh the page
You need to refresh the edit HTML page after adding the widget and section. Now whole code of the search bar has been displaying. You can add the placeholder for your search bar.
13) Copy CSS for mobile version
Now time to make a responsive blogger template. Copy all media queries from the text editor and paste over CDATA.