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" ?>There are totally 4 things you need to add in your Blogger template:
<!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>
- Meta Data
- HTML
- CSS
- Javascript (if it is)
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 == "item"'>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.
<meta expr:content='"Article: " + 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 == "archive"'>
<meta expr:content='data:blog.pageName + " posts"' 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 == "index"'>
<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' />
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 contactus@bloggerever.com.
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:
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:
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.
<div class='demo'>Hello World!</div>
Wrong CSS
div{
color:#000;
}
Correct CSS
div.demo{As it override CSS of other elements and also increase page loading time.
color:#000;
}
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.
Post A Comment:
0 comments: