Skyrocket Your Blog Traffic!
Join our newsletter to get guides which will help you boost your blog traffic for free!


Building Basic Structure For Blogger Template (Part 2)

Nitishk Gupta 1/01/2016 4 Comments
Building Blogger Template - Part 2


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 - 

<?xml version="1.0" encoding="UTF-8" ?>
<html 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'>

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 -

<?xml version="1.0" encoding="UTF-8" ?>
<html 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>
<title></title>
</head>
<body>
</body>
</html>

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 ?

You can assume section as the sections of a class in a school each separated by a unique no. or letter.
The same is here as section tag describes the different parts of a blogger template.
At least one section and one skin tag is required in blogger template and that's why I've introduced them here. 
The section tag is given by - <b:section> and ended by </b:section> tags.
Now our simplest code will look like this -

<?xml version="1.0" encoding="UTF-8" ?>
<html 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>
<title></title>
<b:skin>
/* Our CSS Styles Go Here */
</b:skin>
</head>
<body>
<b:section id='Uniqueid'>
<!--Section Content Goes Here-->
</b:section>
</body>
</html>
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 -

<data:blog.pageTitle/>

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 -


<?xml version="1.0" encoding="UTF-8" ?><html 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><title> <b:if cond='data:blog.pageType == &quot;index&quot;'> <data:blog.pageTitle/> <b:else/> <b:if cond='data:blog.pageType != &quot;error_page&quot;'> <data:blog.pageName/> | <data:blog.title/> <b:else/> 404 | <data:blog.title/> </b:if> </b:if> </title><b:skin>/* Our CSS Styles Go Here */</b:skin></head><body><b:section id='Uniqueid'><!--Section Content Goes Here--></b:section></body></html>
I know it will be confusing but i'll also explain this in next part.


What Next ?

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



Join Our Newsletter!

Join our newsletter to get regular updates with secret tips/tricks to skyrocket your blog rankings!

Nitishk Gupta
Hi, I Am Nitishk Gupta, a blogger and web developer. I am an addicted blogger who wants to share each and everything I have learned so far in my 4 years journey. Feel free to send me friend request or follow me. Thanks!

4 comments:

  1. Great info but where did you learn to make blogger template?Can you provide the link to that article?

    ReplyDelete
    Replies
    1. Thanks Muhammad Ameen for your kind words ;)

      I learnt blogger template development by myself and some other sources (which I don't remember).
      BTW I will add new parts in the "Building Blogger Template" series ASAP. So stay tuned :D

      Good Luck & Keep Coming :)

      Delete

Powered by Blogger.