How to make Blogger Templates From Scratch to Advance? Full Course

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.

Make Blogger Template


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


Before we move to Blogger you need to have an HTML and CSS code of the website. Making Blogger templates there is no need for a lot of use of Javascript.


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


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Website Name</title>
</head>
<body>
    
</body>
</html>



3) Paste this code below <head>

<b:skin>
<![CDATA[ /*Your all CSS goes here*\ ]]>
</b:skin>

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


<b:section id = "unique id"/>


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 


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<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>Website Name</title>
      <b:skin><![CDATA[

        
]]></b:skin>
</head>
<body>
  <b:section id='unique id'/>
    
</body>
</html>

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:


<b:section id = 'header'>
    
<b:widget id = 'header1' type = 'header'>

</b:widget>

</b:section>


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]]>

<!CDATA[ 
.header{
background-size:black;
height:4vw;
}
.ul li a{
    list-style:none;
    text-decoration:none;
}

]]>


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.



10) Add Javascript

Now it's time to paste javascript using a script tag. There doesn't use a lot of javascript in a blogger. We used javascript in the search bar, header. 

There are dependent upon you how much used javascript. But javascript makes a user interactive and makes your blogger not a blogger makes it a useful website. 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body> 
    <script>
        document.getElementById("demo").innerHTML = "My First JavaScript";
        </script>
</body>
</html>


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.

So you need to remove all div of search bar from HTML.  Now we need to add a widget and section for the search bar.

You need to provide the same class when you add a search bar.

<b:section id ='bsection-search-container' class="search-container">
<b:widget type ='Blogsearch' class="Blogsearch1">
</b:widget>
</b:section>

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.


14) Now add condition below the body

It is the condition when the user searches on a search bar what data will be display over there and when the user clicks on labels what type of data is shown. So we need to add some condition that helps to display proper data.


<b:class cond = 'data:view.isHomepage' name = 'home-page'/>
<b:class cond = 'data:view.isSingleItem' name = 'item-view'/>
<b:class cond = 'data:view.isLabelSearch' name = 'label-view'/>
<b:class cond = 'data:view.isSearch and !data:view.isLabelSearch' name = 'search-view'/>


15) Add condition above the item view

In a blogger, we need to hide something when users visit the post and search for something. So we need to add conditions for that. We need to hide the hero section, header and so more. 

Add this code above the header and hero section

<b:if cond='data:blog.url! = data:blog.homepageUrl'> 
    <!-- Header Wrapper -->
    <div class='top-bar'>
    </b:if>

Under above the condition of <b: if>  the data will not show when the user visits on post menu but show on the homepage. 

16) Now add HTML and CSS of popular post and contact form

Now it's time to move on next step let's add a popular post and contact form widget. If you don't have it then don't worry it is not necessary. But if you have then seen all the steps.

Now copy all HTML and paste below the post. This depends upon you where you can show popular posts, featured-post, random-post. But I show the popular post, contact form above the footer. 

So let's paste the HTML code above the footer. And also paste CSS of popular post and contact form. 

I want to show popular posts only on the homepage so I add If the condition shows only on the homepage, not in posts. But we need to change the if condition. Because we can show only on homepage. In the above condition, we don't want to show in the post section or search section.

Add contact form Widget

let's add the contact form. The blogger is provided a contact form widget so we don't need HTML code.  We just add a widget and section for it.

<b:if cond ='data:blog.url== data:blog.homepageUrl'>
    <b:section id ='bsection-contact' class='contact-container'>
        <b:widget type ='ContactForm' id='ContactForm1'>
        </b:widget>
    </b:section>
</b:if>




17) The Blog Widget

Now, this is the most important part of the blogger template. You need to write some posts in blogger and add some labels.

Add a widget for blogger post you need to copy and paste all the CSS of a blog post in a CDATA

You need to add only the division of blog posts and add a section over there.

Step of add Blog widget
a) Go to edit HTML
b) Scroll below the end of the header
c) Copy and paste only division of a blog post
d) See the example

<div class="wrapper">
    <div class="posts-wrapper">
        <b:if cond='data:view.isHomepage'>
        </b:if>
        <b:section id="bsection-blog">
            <b:widget id="Blog1" type='Blog'>
            </b:widget>
        </b:section>
    </div>
</div>

Now all the post has been displaying. You can get all the blog style provided by blogger. We need to change it over our style. We can inspect the blog-post and see the classes over there. For more information please watch this video.




18) Popular Post Widget

We need to add a widget for the popular posts after the blog post. So what we need to do is add a popular post widget. We need to replace the classes our blogger popular post from our popular post. 

<!-- End of blog section -->
<div class="wrapper">
    <b:section id="bsection-popular-posts" class="popular-posts-container">
        <b:widget type='PopularPosts' id="PoularPosts1">

        </b:widget>

    </b:section>
</div>



19) Creating Pages and Links

After creating a popular post then after we need to work on pages. We want to show the about us, Privacy Policy, Terms and Conditions, contact us and so more.



Full Course

In this video, you will learn to complete the process of making blogger templates from the scratch. In this video, we will make a blogger website using a visual studio text editor and add a widget, section, and so more.


Sandesh Tandan

My name is Sandesh tandan from Nepal. I start blogging in 2019 years. I have a knowledge about Blogging, Programming, Online earning, Photoshop, Illustrator

Post a comment

Previous Post Next Post