So here we have the second part of building blogger template series which is totally about coding the basic structure for blogger template. In this post i'll tell you how the basic XML codes work and how can we use them to code the blogger template.
Before reading this tutorial i suggest you to first understand the basic concepts of HTML And CSS as this part will cover whole coding of these languages only. So let's get started -
How Blogger Template Starts ?
This is the first code which you will see in every blogger template -
I know this is confusing but it is the basic opening of blogger template.As you can see that xml is written many times above because the working of whole template works on XML and JSON as discussed in the introduction.
Now we'll add the basic tags which are required in blogger template like - head , title , body ,etc.
So here is the basic structure we'll work with -
But here is a problem in the above code that this code will not work and give you error.
Therefore now we use the blogger section and skin tags to complete this code.
The skin tag is given by -<b:skin> and ended by </b:skin>.
So instead of using style tags we'll use blogger skin tag for adding CSS styles for our template.
What Are Sections In Blogger Template ?
The section tag is given by - <b:section> and ended by </b:section> tags.
Now our simplest code will look like this -
Did you noticed that i add a unique id to the section ? if yes then that's because every section tag should contain one unique id which identifies it just like section of a class in a school.
And one more thing after saving the code above you'll not get any error but no content will be shown.
So we've build the basic structure of blogger template but now how to specify unique title and other things for each page or posts ? the answer is the blogger tags which will be explained thoroughly in the next part but i'm just introducing one or two of them here.
So the first tags we'll use will be for specifying title for each page and the tags is -
This tag gives the title of the current page which is specified in posts and pages which is then fetched through JSON.
Now in short the complete code with SEO optimized title will look like this -
I know it will be confusing but i'll also explain this in next part.
So this was the second part of the series , hope you liked it and must have shared it too.
If you feel any kind of problem just ask me through comments and do subscribe us as some of the upcoming parts will be subscribers only.
Happy Blogging and Happy New Year :O
