How to create or design a blogger template?

Design a Blogger Template

How to create or design a blogger template?

To create or design a blogger template it is important that you have at least knowledge of HTML and CSS. If you have knowledge of HTML and CSS then good to go.

Create a new blogger to start the tutorial. How to create or design a blogger template? Click here to know how to create a blogger...

Now, after creating your blogger goto the Blogger Dashboard → Theme → Edit HTML and clean up all the default codes.

Now, write the following code there in the white space and click on the Save button from the top menu.

<html>
<head>
<title>Title of Blog</title>
</head>
<body>
Hello World
</body>
</html>

While saving you can get the following error:
There should be one and only one skin in the theme, and we found: 0

To solve this write the following code after the closing title tag i.e, </title> and click on the Save button from the top menu.

<b:skin><![CDATA[
/****CSS CODE*****/
]]></b:skin>

The above code is for containing custom CSS code for decorating your Blog.

Again, you will see the following error notification and fix it by writing the following code just before the Hello World tag:

We did not find any section in your theme. A theme must have at least one b:section tag
Fix it by writing the following code just before the Hello World tag.

<b:section id="id1" class=""></b:section>

If you don't give any id to the above section then you will get the following error notification message
One of the sections is missing the required id attribute. Every section should have a unique id.

Now, your code looks like as follow:

<html>
<head>
<title>Title of Blog</title>
<b:skin><![CDATA[
/****CSS CODE*****/
]]></b:skin>
</head>
<body>
<b:section id="id1" class=""></b:section>
Hello World
</body>
</html>

Now, click on the Publish button on the top menu of your blogger then view your blogger. You will the Hello World output on your browser.

Note: After reloading the blogger you will able to see some auto-generated code. These are the default codes that are automatically generated by the blogger. So, nothing to worry about these codes leave as it is.

How to make visible to the post published in the blogger?

Creating a post in the blogger is not visible on your blog until you don't have to write the following code given below:

<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog' version='1'/>
</b:section>

To make visible the post of your blogger in your blog write the above code inside the body tag i.e. between the <body> ... </body> tag.

Note this is will also generate an auto code after reloading the blogger. So, don't worry about these codes and leave these all code as it is.

Now, your whole code looks like as follow

<html>
<head>
<title>Title of Blog</title>
<b:skin><![CDATA[
/****CSS CODE*****/
]]></b:skin>
</head>
<body>
<b:section id="id1" class=""></b:section>
Hello World
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog' version='1'/>
</b:section>
</body>
</html>

Now, you will also able to see the blogger posts that are posted by you on your blog.

Note:
* If showaddelement='yes' that means you allow to add new widgets through the Layout section.
* If locked='false' that means you can move the widget through drag and drop and when locked='true' that means your widget will be locked and you will not able to move the widget.

What is Section in Blogger?

---

I hope you likable this nice post. Do not forget to share it together with your friends, the Sharing Button is below the post. Apart from this, if there's any downside within the intermediate, don't hesitate to request the Comment Box. we are going to be happy to help you.

I will continue to write more and more on this blog, so do not forget to make our blog BlogLearner as a bookmark (Ctrl + D) on your mobile or computer and subscribe to us to get all the posts in your email. Do not forget to share these posts, if you like it. You can facilitate us to reach additional individuals by sharing it on social networking sites like Facebook or Twitter.

How to create or design a blogger template?

#rrkksinha #bloglearner #Howtocreateordesignabloggertemplate?

Author Description