How To Make Responsive Blogger Template

Previously, we had seen how we can make a blogger theme starting from scratch. Blogger uses XML theme, which contains HTML, CSS and JavaScript(you may also include other JS libraries). But one thing that we didn't talked about in that tutorial is using the conditions.

When you load any web page on the blogspot, let us say like https://mysite.blogspot.com the XML theme renders just like any other server side scripting language(like PHP or node.js).

There are certain tags that we can use while building XML blogger theme that will render and give its output.

How To Make Responsive Blogger Template Tutorial

For example, <b:skin> that we had used last time. It is one of the compulsory tag that is required by Blogger which contains all of your CSS styles related to theme.

<b:skin>
  <![CDATA[
     //your CSS code here.
  ]]>
</b:skin>

There should be one and only one <b:skin> tag. This tag will become <style id='page-skin-1' type='text/css'> when rendered.

Similarly, we can use conditions like we do use in JavaScript.

<b:if cond='expression1'>
    <!-- will execute if a specified condition is true -->
<b:elseif cond='expression2'/>
    <!-- will execute if upper condition returned false  -->
<b:else/>
    <!-- will execute if both the conditions are false -->
</b:if>

When we'll run the code, only the particular block will be visible in which the condition is matched. For example if expression1 is true, the first part of the code will execute.

For a more better example, following is most used condition -

<b:if cond='data:post.link'>
    <a expr:href='data:post.link'><data:post.title/></a>
<b:elseif cond='data:post.url and data:blog.url != data:post.url'/>
    <a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
    <data:post.title/>
</b:if>

The above code is bit practical. IF Post's link is present THEN make <a> tag which will contain title of the post.(data:post.title returns post's title) ORELSE blog url is not equal to post's URL(that means we are not on the homepage) THEN it will return <a> which will contain title. Finally, if both the expressions are false, the it will not return to a hyperlink (<a>) but a simple link.

You'll find this same thing in the most of the blogger templates. Its always fun to look and modify other themes before making one for your own!

In blogger, data is link a global object which contains sub-objects like post, blog, top etc. You can simply use them to get the corresponding data of the data object. It is different for different post or a page.

Here is Blogger's Help Page that will guide you how to use this variables. Or what is the possible data that you can get. But later on I found that the list is not 100% complete. Blogger help only posted some of the important data forms only.

For example data:post.firstImageUrl returns URL of the first image in your post, and its not present in the above list.

For this data, you need to look into other Blogger templates as well.

There are many conditions and many such tags which you can use while making a blogspot theme. There is no official documentation for this right now. That's why some theme designers find it difficult to predict the ways to code in which they can achieve the same thing.

Well, but I seem to find some tags that will help you on this page.

And for expressing your thoughts, do leave a comment down below.😉