Blogger Ever

How to create a Blogger template starting from zero [Develop Part 3/3]

This series of post will guide you step by step how to create a Blogger template. This is the last post of series which will guide you about some major elements of development
Development Of Blogger Template

Well, I know many of you will not follow the last two posts, and will try to directly jump on this last one but however, lets move on to the last phase of our Blogger template creation that is development. For development first I'm going to discuss the specific layout of that template and accordingly you will create your template. Lets start with a basic layout:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' 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><data:blog.title/></title>
<b:include data='blog' name='all-head-content'/>
<!--Meta Data-->
<b:skin><![CDATA[ //
*/ You CSS */
//]]></b:skin>
<!--Your Javascript / jQuery -->
</head>
<body>
<!--Your HTML -->
</body>
There are totally 4 things you need to add in your Blogger template:
  1. Meta Data
  2. HTML
  3. CSS
  4. Javascript (if it is)
We will begin with Meta data.

Meta Data

For some of the major reasons like SEO and social sharing you add meta data. The meta tags for social sharing that helps are Open Graph tags and Twitter Card Meta Tags. Open graph meta tags are given below.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta expr:content='&quot;Article: &quot; + data:blog.pageName' property='og:title' />
    <meta content='article' property='og:type' />
    <meta expr:content='data:blog.metaDescription' property='og:description' />
    <meta expr:content='data:blog.postImageUrl' property='og:image' />
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <meta expr:content='data:blog.pageName + &quot; posts&quot;' property='og:title' />
    <meta content='article' property='og:type' />
    <meta expr:content='data:blog.pageTitle' property='og:description' />
</b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <meta expr:content='data:blog.title' property='og:title' />
    <meta content='blog' property='og:type' />
    <meta expr:content='data:blog.metaDescription' property='og:description' />
    <meta content='https://lh5.googleusercontent.com/-aLdk_qdsztw/UrarQJ0hjtI/AAAAAAAAAM4/frNe5-sarmQ/s300-no/Blogger+Ever+Icon.png' property='og:image' />
</b:if>
<meta expr:content='data:blog.url' property='og:url' />
<meta expr:content='data:blog.title' property='og:site_name' />
The above script works best if you will add Search Description as I mentioned in one of my previous post. Replace link with your blog logo which will appear when someone shares homepage otherwise, the first image of post will be shared.

For Twitter Meta tags you need to create and validate them from Twitter development tool. After adding them make sure to validate them.

HTML

Now we are going to most basic markup of any template. Blogger template is based on Data Layout Tags, Page Elements Tags for Layouts, Widget Tags for Layouts (already listed in my post). These are huge lists of markup provided by Blogger, well these resources are not easy to learn, but if you want to shoot for the moon then you need to go through it.

Each of the page element or widget is based on a section which let the user add different widgets and elements to a page.
It is necessary to have at least one section in your Blogger template otherwise template won't save. After adding section, you can add major elements like header, navigation and contact form easily from Blogger > Layout. But you won't be able to add Posts section as you need to code it on your own.

I strongly recommend not to code the whole Post script as it is too complex to code. Simply copy it from any simple Blogger template and do the following changes to mold it in your case. First copy like this:


Copy and paste it in your desire location of the template. After paste open it and change the following section:
Open the highlighted code and change it according to your needs. I can't go in further detail because everyone works differently and if you want any instruction in separate I can help in comments or contact us through [email protected].

CSS

CSS works after adding HTML correctly. One of the major thing that you should add in your template that is Template Designer settings. Then next is your actual style sheet. I always recommend never to use global tags to target a single element. Like:
<div class='demo'>Hello World!</div>

Wrong CSS

div{
color:#000;
}

Correct CSS

div.demo{
color:#000;
}
As it override CSS of other elements and also increase page loading time.

Secondly, all the sections that you create and each widget in them changes into a div. While creating any section you add class and Id, through them you can select them. If you do not know then each of the widget you add with heading then its heading comes under h2 tag so you can target them accordingly.

Thirdly, the heading in the post comes under h2 tag, sub-heading under h3 tag, and minor-heading under h4 tag. So you should customize them to increase attraction to each element.

Javascript

Each script will come under script tags. jQuery plugins and many other useful scripts helps in making a good template. Like to increase the thumbnail size of popular post widget as its size is 72 x 72px.

Last Words

Blogger template are not that much hard to code, because Blogger developers has created such an amazing platform to code and blog. Happy coding and happy blogging.
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.