The Blogger team has provided their products to be easier to use and adapt for all users with the Template Design function. If you want a change to the font, background, layout, this function can help.
But if you want to make your blog more like a professional site? It's time you need to learn the structure of blogger templates, APIs, JavaScripts, to create custom templates.
I will try to make it short, simple and easy to understand.
Following is the Tutorial on Creating a Blogger Template
Step 1: Blogger Template Structure
The Blogger template is made in the xml markup language, the complete template has 4 sections below:
1. First Part:
Starting from the beginning of the template to the <head> tag, this defines the entire document in xml format and follows all the xml markup language rules. This section is needed for all templates, but fortunately we don't need to make changes to them.
2. SECOND PART:
From <head> to <b: skin> , this section contains the tags needed for the site header such as: meta tags, favicons, etc ... We can edit / add favicon links, meta tags for descriptions, keywords ... to this section.
3. THIRD PART:
From <b: skin> to </ b: skin> , this section contains CSS tags that govern the appearance of your blog. This defines how elements in a blog display such as text color, font size, color, background using CSS attributes.
4. FOURTH PART:
Starting from <body> to </ body> , this is the main part of the template that displays a list of posts, one post, displays comments ... It contains HTML, XML and Blogger Tags.
This is very similar to Wordpress templates, if you've worked before.
Step 2: Template Header
Because we don't need to edit anything in the first part of the Blogger template, so we move to part 2 - the header. This is the first thing we must pay attention to the blogger template.
In the default blogger template, there are two lines in this section:
<b: include data = 'blog' name = 'all-head-content' />
<title> <data: blog.pageTitle /> </ title>
First line
<b: include data = 'blog' name = 'all-head-content' />
enter the required meta tags into the header. If you see the page's source code, you will see a code similar to this:
<meta content = 'text / html; charset = UTF-8 'http-equiv =' Content-Type '/>
<meta content = 'true' name = 'MSSmartTagsPreventParsing' />
<meta content = 'blogger' name = 'generator' />
As a Substitute for <b: include data = 'blog' name = 'all-head-content' />
Second line
<title> <data: blog.pageTitle /> </ title>
Given to the <title> tag
<title> Enter your Blog Title </ title>
You can add tags to your keywords and descriptions such as:
<meta content = ' Description of your blog ' name = 'description' />
<meta content = ' Your Blog Keyword ' name = 'keywords' />
Add your favicon logo:
<link href = ' Your Favicon link ' rel = 'icon' type = 'image / vnd.microsoft.icon' />
Tips
On Blogger, we can add meta tags to keywords and descriptions depending on the page using the following code:
<b: if cond = 'data: blog.pageType == "index"'>
<title> <data: blog.title /> </ title>
......... meta tags for the homepage ...
<b: else />
<b: if cond = 'data: blog.pageType == "archive"'>
<title> <data: blog.title /> </ title>
... meta tags for the page category or archive page ....
<b: else />
<b: if cond = 'data: blog.pageType == "item"'>
<title> <data: blog.pageName /> </ title>
.... meta tags for single post ...
</ b: if>
</ b: if>
</ b: if>
Explanation:
- Display the Meta tag for the homepage in the header and blog title in the title if this page is the homepage.
- Display Meta tags for categories in the Page in the header and blog title.
- Display Meta tags in the header and post title if this page is a single post.
By using this code, we can reduce the meta tag (keyword, page description) and title for each page. Even though we can't add keywords, page descriptions for certain posts, but it's still better than nothing.
Step 3: Body Templates and API
The <body> section of the template is made around ' Section / Section ' and ' widget '. Parts are marked as areas of the page, such as the sidebar, footer, etc. There are many parts to the widget.
Widgets are individual elements of a page like images. We can add widgets from the Layout tab on the Blogger Dashboard. In the body section, we can add HTML tags around 'Section / Section' or add HTML tags in 'widgets'. Each section has opening tag and closing tag, for example like this:
<b: section id = 'header' class = 'header' maxwidgets = "1" showaddelement = "no">
</ b: section>
This <b: section> tag includes the following attributes:
en - A unique name, with letters and numbers only.
class - (Optional) Generally like 'navbar', 'header', 'main', 'sidebar' and 'footer'. You can use any name if you want, or use default Google. You can write several CSS tags to determine how the 'class' looks in the CSS section.
maxwidgets - (Optional) The maximum number of widgets allowed in this section. If you do not set a limit, there will be no limit.
showaddelement - (Optional) Can be ' yes ' or ' no '. ' yes ' is the default. If ' yes ', you can add more widgets in this section, you will see the 'Add a Page Element' link in the Layout Dashboard tab, ' no ' will not appear anything.
growth - (Optional) Can be ' horizontal ' or ' vertical ', ' vertical ' is the default. This determines whether the widgets in this section are arranged horizontally or vertically.
The widget also has an opening tag and closing tag, like this:
<b: widget id = "header" type = 'HeaderView' locked = "yes" />
..............
</ b: widget />
Widgets can contain HTML tags and Blogger APIs, but can also be in the simplest form like this:
<b: widget id = "header" type = 'HeaderView' locked = "yes" /> </ b: widget />
only shows the position of the widget on the Page Elements tab.
Widgets have attributes like:
id - (Important) contains letters and numbers. Every ID of the widget in your template must be unique. ID widgets cannot be changed without removing the widget and creating a new widget.
type - (Important) Indicates the type of widget, and must be one of the valid widget types listed below.
locked - (Optional) Can be 'yes' or 'no', if 'no' is the default. Locked widgets cannot be moved or deleted from the Element page tab.
title - (Optional) Display title for the widget. If nothing is specified, a standard title such as 'List1' will be used or displayed.
pageType - (Optional) Can use 'all,' 'archive,' 'main,' or 'item,' if using 'all' as the default. Widgets will only be displayed on the page specified on your blog. (All display widgets on the Page Elements tab regardless of the page type)
The following types of widgets that you can specify:
• BlogArchive
• Blog
• Feed
• Header
• HTML
• SingleImage
• LinkList
• List
• Logo
• BlogProfile
• Navbar
• VideoBar
• NewsBar
Step 4: In Widgets - "includeable"
In Step 3, you already know about the body part of the template, in step 4 we will learn more about widgets - important parts of the body part and what is inside the widget. As we know, widgets have opening tags and closing tags, and structures like this:
<b: widget [... attributes ...]>
</ b: widget>
Examples of header widgets:
<b: widget id = "header" type = 'HeaderView' locked = "yes" />
..............
</ b: widget />
Widgets contain blocks of 'includable' code like this:
<b: widget [... attributes ...]>
<b: includable id = 'main' var = 'xxx'>
[ Enter whatever content you want here ]
</ b: includable>
<b: includable id = 'yyy' var = 'yyy'>
[ Enter whatever content you want here ]
</ b: includable>
<b: includable id = 'zzz' var = 'zzz'>
[ Enter whatever content you want here ]
</ b: includable>
..........
</ b: widget>
Surely there will be one ' includable ' block with id = "play" in each widget. It usually contains most of the widget content, and other 'includable' content to support the main 'includable' for processing data.For insance, you have a widget that shows the form of subscription, in this widget, there is the main 'includable ' that will display the form and the results, and the other 'includable' will get the data form, which is connected to database subscription, data processing, etc ...
Usually an 'includable' will follow this attribute:
id : (Required) Unique ID consisting of letters and numbers.
var : (Optional) Identity consists of letters and numbers, for reference data in this section.
When a widget works, the main includable data can go to 'includable' to be processed and then get the result back to the main "includable" to display the call.
The call statement in question is as follows:
<b: include name = 'includable id' data = 'variable' />
Next to the main 'includable' , you can set the id from 'includable' to whatever name you want. If you are familiar with 'functions' and 'procedures' in computer programming languages, you can understand the terms 'includable' and 'widgets' with easy. The main 'includable' works as the main program, while the other 'includables' functions as a function or procedure.
Another example, if you want to display the post title:
<b: includable id = 'main'>
<b: include name = 'show_post_title' data = 'i' />
</ b: includable>
<b: includable id = 'show_post_title' var = 'p'>
............
show post title of the post has id = 'p'
..........
</ b: includable>
In the above code, the main ' includable ' has a call statement for the ' includable ' name 'show_post_title ' ID of the post you want to display the post title through ' show_post_title ' which can be included with the variable ' i ' in the main includable. ' Show_post_title ' the includable value ' i ' and assigns ' i ' to another variable ' p ', then shows the post title that has id = ' p '. The results are returned to the main body and are displayed as post titles that have id = ' i '.
' Includables ' is very useful if you have the same code that is repeated in many places. You can write code with just one time and enter it in letters <b: includable> .... </ B: includable> , then use 'includable ' wherever you want. You can still use only one includable (Note that main includeable is mainly automatically included in the widget - so there is no need to add <b: include name = 'main' />
Statements
Like other computer programming languages, Blogger allows us to use several statements such as "loop " statements and " conditions " in an ' includable '.
Loops
Statement b: the loop repeats a code block several times. This is most often used to make posts, comments, or labels, etc. Here's the general format of the loop statement:
<b: loop var = 'identifier' values = 'set-of-data'>
[ Code Repetition ]
</ b: loop>
' identifier ' is a calculation variable which stands for each item in the list (list of blog posts, list of comments ...). For example, if the " identifier " value is 5, the code block in the statement b: loop is processing the post number 5 and so on ... The name " indentifier " depends on you, but what is commonly used is to call it " i ".
IF / Else
This statement is used to execute the code block where the condition is fulfilled. The format is generally like this:
<b: if cond = 'condition'>
[ code to execute if condition is true]
<b: else />
[ code to execute if the condition is false]
</ b: if>
Tag b: else optional. Without b: else , the code only starts when the condition returns to true . FYI Closure </ b: if> is very necessary.
Step 5: Blogger data tags 1
In Step 4, we have learned about widgets and their elements, in step 5 we will know more about Blogger data tags.
All data tags like this have a structure:
<data: name /> or <data: name1.name2 />
where name or name1 , name2 is the name of the specific data you want to use.
In posting in sections and widgets, there are 12 types of widgets:
• BlogArchive
• Blog
• Feed
• Header
• HTML
• SingleImage
• LinkList
• List
• Logo
• BlogProfile
• Navbar
• VideoBar
• NewsBar
So there are 12 groups of Blogger data tags (or Blogger API) for 12 types of widgets, these data tags are only used in the appropriate widgets. There is a group of data tags that can be used anywhere in the template file, regardless of the type of widget or commonly called Globally Available Data.
Globally Available Data:
This data tag refers to general things such as blog title, current page, page type, latest url, so you can use this file in any template:
<data: title /> : Returns to the blog title.
<data: pageType /> : Returns the type of this page. This can be ' item ', ' archive ', or ' index '.
<data: url /> : Returns to the URL page.
<data: homepageUrl> : Returns to the Home page.
<data: pageTitle /> : Returns the title of this page. This is the title of the blog, but it can also contain additional information on the archive page or post.
<data: encoding /> : Returns the encoding that will be used for the blog, for example. UTF-8.
<data: languageDirection /> : Returns " ltr " or " rtl " to left-to-right and right-to-left.
<data: feedLinks /> : Returns feed links autodiscovery for page headers.
How do you implement it?
Where you want to display the blog title, just add <data: title /> and the blog title will be displayed, right?
Page header
There are two data tags for this widget:
<data: title /> : The blog's title / Blog Title.
<data: description /> : The blog's description / Blog Description.
Blog archives / Archives
<data: title /> : Widget title
<data: style /> : Displays the style of the archive blog widget: ' MENU ', ' FLAT ', or ' HIERARCHY '.This is the default option in the Element page tab. If you are redesigning the Blog archive widget, it is easiest to use 'FLAT' as the style.
<data: data /> : List of each archive / archive unit.
<data: data.name/> : Name of this archive interval, for example. "SevenAngel 2017."
<data: data.url /> : Link to a page containing posts from this interval.
<data: data.post-count /> : How many posts are there in this interval.
Profile Widget
Profile widgets contain information about blog authors, content contributors ... tag the data as follows:
<data: title /> : Widget title
<data: userUrl /> : author's profile URL
<data: location /> : Location profile of the author
<data: aboutme /> : Information about the author
<data: displayname> : The name of the author displayed
<data: photo /> : Profile photo. consists of the following:
<data: photo.url /> : photo URL
<data: photo.width /> : Size of photo width, in pixels.
<data: photo.height /> : Size of photo height, in pixels.
<data: photo.alt /> : " alt " text for photos.
In the blog team, the profile widget contains little information about other authors except the owner, as follows:
<data: title /> : Widget title
<data: authors /> : List of all authors
<data: authors.displayname> : List of all author names displayed.
<data: authors.userURL /> : List all author profile links.
If you want your template to handle multiple authors, you can use data variables : the team to distinguish between one and several authors. For example:
<b: if cond = 'data: team == "true"'> (display multiple authors) </ b: if>
TEXT / HTML / JAVASCRIPT Widget
Text widgets and HTML / JavaScript widgets have the same method and have two data:
<data: title /> : Widget title.
<data: content /> : Fill in the Widget.
Feed Widget
Content in widgets that use the Google AJAX API after the blog is fully displayed in the web browser.So CSS is the only way to organize this widget.
<data: title /> : Widget title.
<data: feedUrl /> : Feed URL.
Picture Widget / Image Widget
Image widgets contain one image, and data tags provide relevant data for that image.
<data: title /> : Widget title.
<data: sourceUrl /> : Link image URL.
<data: width /> : Image width, in pixels.
<data: height> : Image height, in pixels.
<data: caption /> : Image Caption
Widget labels
The label widget includes a list of labels that you use on the blog.
<data: title /> : Widget title
<data: labels /> : List of labels
<data: labels.name/> : Text on the label.
<data: labels.count /> : How many posts have this label.
<data: labels.url /> : Link to the post that displays this label.
List Widget / List Widget
The list of widgets displays a list of item types and the list is only displayed in text.
<data: title /> : Widget title.
<data: items /> : List of items.
Link List Widget / List Link Widget
Display a list of links. A slightly better list, where each item has two attributes: the text and the link.
<data: title /> : Widget title.
<data: links /> : List of links, each of which has contents.
<data: links.name/> : Link Text.
<data: links.target/> : Link URL.
Widget logo
Display the widget logo.
<data: fullButton /> : Blogger URL that you have chosen.
Step 6: Blogger Data Tags 2
You already know about the data tag in the previous step, we will see the rest of the data tags in this step and find out more about the important widget, blogpost. This widget is used to display posts on the blog. Without the blogspost widget, we can't blog.
<data: feedLinks /> : Register feed for this page. On the main page, this will contain the main blog feed; on the item page, this also contains comments feeds. Each item in this list contains the following:
<data: feedLinks.url /> : Feed URL.
<data: feedLinks.name/> : Feed name ('Posts' or 'Comments').
<data: feedLinks.feedType /> : Your Feed Type (Atom or RSS).
<data: feedLinks.mimeType /> : Mime feed type.
<data: olderPageUrl /> : If there are posts that are longer than the current page, this is the URL for that post. (Not all pages will have this link.)
<data: olderPageTitle /> : Title links to older post pages. Usually the writing is "Older Posts"
<data: newerPageUrl /> : Newer ones that are equivalent to olderPageUrl.
<data: newerPageTitle /> : Newer ones that are equivalent to OlderPageTitle.
<data: commentLabel /> : Phrase used to indicate the number of comments, for example."comments."
<data: authorLabel /> : The phrase used to indicate who wrote the post, for example "posted by."
<data: timestampLabel /> : The expression is used to indicate when the post was written, for example. "posted on."
<data: postLabelsLabel /> : Phrase to introduce a list of post labels, for example. "label for this post."
<data: backlinksLabel /> : Phrase to explain backlinks to this post, for example. "link to this post."
<data: posts /> : List all posts for this page. You can set it in one set and each post. Here are some tags that are used:
<data: post.dateHeader /> : Date of posting, only present if this is the first post in the list posted today.
<data: post.id/> : Post ID number.
<data: post.title /:> : Post Title.
<data: post.body /> : Content in the post.
<data: post.author/> : Display the name of the post author.
<data: post.url /> : Permalink for post.
<data: post.timestamp /> : Time of posting Unlike the dateHeader, this is on every post.
<data: post.labels /> : List of postal labels. Each label that contains the following tags:
<data: label.name/> : Text label.
<data: label.url /> : URL of the page that lists all posts on the blog with this label.
<data: label.isLast /> : ' true ' or ' false ' Is this label the last in the list (very useful for placing commas).
<data: post.allowComments /> : ' True ' If this post receives a comment.
<data: post.numComments /> : Number of comments on the post.
<data: post.showBacklinks> : displays a backlink on the post.
<data: post.numBacklinks /> : Number of backlinks on the post.
<data: post.addCommentUrl /> : URL from 'add comment' or 'add a comment' for the post.
<data: post.emailPostUrl /> : URL form to 'email this post' to the post.
<data: post.editUrl /> : edit form URL for post.
<data: feedLinks /> : List of specific feeds for posts. (This is different from the blog feedLinks as a whole, each containing the following tags:
<data: feedLink.url /> : feed URL.
<data: feedLink.name/> : Feed name ('Posts' or 'Comments').
<data: feedLink.feedType /> : Feed type (Atom or RSS).
<data: feedLink.mimeType /> : Mime feed type.
<data: comments /> : List all comments for posts (only on item pages). Each contains the following tags:
<data: comment.id/> : Comment ID number
<data: comment.body /> : Body comment
<data: comment.timestamp /> : When a comment was made
<data: comment.author/> : Displays the name of the comment author, or 'Anonymous'.
<data: comment.authorUrl /> : author's comment profile URL, if the comment is not anonymous.
<data: comment.deleteUrl /> : URL to delete comments.
<data: comment.isDeleted /> : Information that the comment was deleted
Step 7: Activate the Blogger Widget
In this step, we will combine all the tags and others from the previous chapter into one and see how a widget works. In templates, Blog widgets start from this line:
<b: widget id = 'Blog1' locked = 'true' title = 'Blog Posts' type = 'Blog'>
Id can vary in each different template, but type = "Blog" is very necessary In this widget, there are several ' includable ':
<b: includable id = 'main' var = 'top'> : main includable, this includable will take the main task to process the data and send the results to the monitor.
<b: includable id = 'nextprev'> : this includeable will be added to the 'next page' link, 'prev page' at the bottom of the homepage, archive page, and add the 'next post' link
<b: includable id = 'mobile-nextprev'> : this includable performs the same task for next, prev same as includable above, but this will work when browsing the blog via cellphone.
<b: includable id = 'post' var = 'post'> : includable This will process data from each post, it will display post title, post body, date ... if you are reading one post, and display post summary if you are on the homepage or archive page.
<b: includable id = 'mobile-index-post' var = 'post'> : like the 'post' includable above, but works on the cellphone.
<b: includable id = 'postQuickEdit' var = 'post'> : includable This will add a small pencil icon at the end of the post, which allows blog owners to edit posts easily, click on this pencil, the blog owner will be directed to the post editing window , no need to go back to the dashboard, and look for the post you want to edit from the post list.
<b: includable id = 'shareButtons' var = 'post'> : includable This will show a list of share buttons at the end of the post.
<b: includable id = 'comments' var = 'post'> : displays all comments on each post.
<b: includable id = 'commentDeleteIcon' var = 'comment'> : add the recycle bin icon next to the comment, so that the blog owner is easy to delete unwanted comments.
<b: includable id = 'comments' var = 'post'> : displays the comment form below the post, so readers can write their comments.
<b: includable id = 'backlinks' var = 'post'> : displays a backlink on the post.
<b: includable id = 'backlinkDeleteIcon' var = 'backlink'> : displays the recycle bin icon beside the backlink.
<b: includable id = 'feedLinks'> and <b: includable id = 'feedLinksBody' var = 'links'> : displays the feed link to the blog and to each post.
<b: includable id = 'status-message'> : displays a status message, for example like 'Show all post under Label AB C'.
Next How to Work Blogs Like the Diagram Below
1. Blog widgets start working.
2. This starts a loop for the statement loop through all posts.
3. Check the value of the variable " i ". If " i " is smaller than the number of posts, the includable "post " will be active to display post data (post title, post body, author, labels ...).
4a, 4b, 4c, in the "post" includable page, if there is currently one post, there will be another includable like post edit icon, comment, comment form .... If this page is Home or an archive page, includable is not will be active ..
5. Look at the next post and see step 3.
6. After the looping is complete, it will return to the main includable.
7. Call "next prev" includable (or feedlinks, backlink if needed), add a link to the next post and previous to the end of the page.
8. Finish.
In these includables, in addition to data tags, we can add HTML, javascript to make it appear as we want.
Step 8: General Steps to Making a Blogger Template
This is the last step of the ' Tutorial to create a blogger template '. In this chapter, as a blogger user, I want to share my experience in making SevenAngel templates: Tools and tips. I will not focus on HTML / CSS / Javascript because you can find articles about this problem easily.
Unlike other platforms such as Wordpress or Joomla whose templates are equipped with many files, the blogger template is only in one file.
As we know, Blogger templates only contain this section:
-Header
-Body
-Sidebar
-Footer
What we need to do when creating a template:
-Place the section and widget correctly.
-Add HTML around the section, and use CSS to decorate it.
-Add JavaScript / jquery for certain effects.
1. Place Section and Widget Correctly
Blogger is created with sections, widgets ... so you have to place them in the right order, add more sections / widgets to the functions you want and delete unnecessary sections / widgets. For example, in this SevenAngel template, I add more parts to list the Home page (at the top of the home page), section for banner ads, delete the default section and move the widget in the sidebar to the left.
I also use conditional statements <b: if> to hide some sections / widgets in certain cases. For example, we all know the blogger widget displays a list of posts / single post, but at home, I don't want it to appear, so I use conditional statements to cover all the default blogger widgets. For example:
<b: if cond = 'data: blog.url == data: blog.homepageUrl'>
homepage content
<b: else />
blogpost widget .....
</ b: if>
The code above, if the current page is a Home page, it will display the homepage content, if the current page is a category page or a single post, then a blogger widget will appear to process the content Or if we want to hide all blog content when entering certain pages , we can use conditional statements like this:
<b: if cond = 'data: blog.url == & quot; page url & quot;'>
.....
<b: else />
other content here
</ b: if>
By adding / removing widgets and placing them in the correct order, we have a template from a template.
2. Add HTML and CSS around the Section / Widgets
We have frame templates with sections and widgets, now we need to add more HTML tags and decorate these HTML tags with CSS to display as we wish: images, text, fonts ... You can do it all in this step.
Firebugs is the best tool for working on this, you can find posts about how to use this tool. This will reduce your time working with CSS and HTML. You can use this tool to check elements on websites that have designs that you like and find out about HTML / CSS that other people use. To get some inspiration, you can look at the template gallery or go to the famous designer blog. Sometimes, combining the elements you like from various templates can give you a unique design.
3. Add JAVASCRIPT / Jquery
Because blogger does not allow server side programing, Javascript / Jquery gives us a solution to beautify a homepage. Using Javascript to get feeds from categories on the blog, divide feeds into post titles, post summaries and then display them.
Javascript / Jquery is also used to create special effects, such as sliders, hover buttons, menus.
Those are all the steps that I applied when creating the template. I can't tell you how to create a particular template, because this is very long and time consuming. I hope with the article 'Tutorial to create a blogger template' you can:
-Understand the basics of blogger templates, the structure of templates, and what their contents are.
-Function in section / widget, how it works. Meaning of data tags and statements.
By reading all of these 8 steps, I hope that every time you look at a different blog template code, you can understand what it uses for each code, and then make your own customizations or apply them to creating your own template. then try to create a template. This is indeed not easy. But if you want, you can do it.
