Sunday, October 15, 2017

How To Create a Template For Blogger


Blogger templates contain normal HTML with some extra tags or elements that google has provided. Those elements and tags are required to include the widgets in your template.

To edit the HTML of your Blogger website, you need to go to Theme > Edit HTML. (see the screenshot below). Backup your current theme/template by clicking on the "Backup" button and erase all the HTML codes to start writing your own template.
Let's start with a simple structure :
<html>

   <head>
       // This area is used for title, meta , link , script and style tags
   </head>

   <body>
       // This area is the actual content to be rendered in your website
   </body>

</html>

Now, if you save this HTML, it will show something like below:
This means it requires some mandatory tags (i.e. <b:skin> and <b:section>) which must be used in the blogger template.
So, now we will modify the html like below :
<html>

   <head>
       // This area is used for title, meta , link , script and style tags

      <b:skin><![CDATA[
      ]]></b:skin>
   </head>

   <body>
       // This area is the actual HTML to be rendered in your website with the help of the elements in the "head" tag

       <b:section id="main" class="main">
       </b:section>
   </body>

</html>

Let's save it, and there will be no error now.

Adding Blogs in your website
Now, we want to see our blogs in the website. For this, we need widget. So, let's modify the HTML again.
<html>

   <head>
       // This area is used for title, meta , link , script and style tags

      <b:skin><![CDATA[
      ]]></b:skin>
   </head>

   <body>
       // This area is the actual HTML to be rendered in your website with the help of the elements in the "head" tag

       <b:section id="main" class="main">

            <b:widget id="Blog1" locked="true" title="Blog Posts" type="Blog">
            </b:widget>
       </b:section>
   </body>

</html>


Save it and reload the page and you will see, some new lines has been added automatically like below:
Now check your website and you will see the blogs you have published.
Now add the CSS in the <style> tag to make your website perfect. Here I have created a section called "Main", you can create multiple sections like "Sidebar" or "Footer" and add widgets there in the same way that is shown in this Blog. All the best 👍 


No comments:

Post a Comment