Blogger is one of the most popular media tools for creating blogs. For example, my blog, which I expected to be quite advanced from many other WordPress blogs. Blogger's default templates are straightforward and you can get complete freedom to change if you can understand the Blogger template basics code once. In today's article, I will present the subject of basic blogger template code essential, so that you can start working with the initial ideas at the beginning of your work.Basic Blogger Template Code
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' 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.pageTitle/></title>
</head>
<body>
<!-- ALL BODY CONTENTS -->
</body>
</html>
Here, the blogger is coded as XHTML, which we upload to Blogger's database as a template. When your browser requests through your blog's domain, it shows in HTML form.
Blogger Section/Layout Design
Blogger Layout depends on the section. For example, headers, footer, sidebar, etc. and these sections are included in the blogger's template in the same way as HTML5 and in this section, you add different widgets. Take a look at some of the examples of section layouts.
To Add a New Section
Now, if you want to add a new section between Blogger's theme code, then the code below will be required.
<b:section class='YourUniqueId' id='YourUniqueId' maxwidgets='5' name='YourUniqueId' preferred='yes' showaddelement='yes'>
</b:section>
Each attribute of the new section has different meanings that we need to know.
- id(Required) - Need a unique name, with letters and numbers only.
- class(Optional) - The name of the id can be used in class. But don't use any class name that already used before.
- maxwidgets(Optional) - How many widgets can be in this section? for this, you can use any number.
- showaddelement(Optional) - You can use yes or no here. Here, using "No" will not show an option to add a new widget. By default, "yes" remains.
Note Here: There must be a few sections in your theme. So if you want to add a new section, add new section code after any other section ends. Usually, this is the "</ b: section>" section ending code. That is, a section will not carry any other section. Similarly, no code will carry. The section will carry only the widget.
Note: In this way, don't create more than two sections than blogger will show errors.
Includable Attributes
Split the Section Into Two Sections
As you can see the picture above, you can separate your section into two sections. Sections like separation are required for the use of limited width ads, or for any other reasons. Find out more from the links below.
Note: In this way, don't create more than two sections than blogger will show errors.
How Blogger Widget Works
Widgets are basically seen from the front-end of your blog, which may appear a lot of time in a section and this way shows the full form of your blog. After installing Blogger's default template, some widgets are installed automatically. Such as Popular Posts, Feature Posts, Labels, Contact Form, etc. If you want, you can get many different types of free widgets from this blog or from another blog over the internet. Before that let me give you some ideas about how a Widget works in Blogger.
This is the code to manually add a widget
<b:widget id='' locked='' mobile='' title='' pageType='' type='' />- id(Required) - Each widget ID will be different and its name must be used by letter or number.
- type(Required) - Indicates what kind of widget and which must be one of the valid widget types. Such a variety of valid widget types like: BlogArchive, Blog, Feed, Header, HTML, SingleImage, LinkList, List, Logo, BlogProfile, Navbar,VideoBar, NewsBar.
- locked(Optional) - By default 'no' is given, so that you can delete. If you use "yes" then the widget can't be deleted.
- title(Optional) - It defines your widget name.
- pageType(Optional) - There are some widgets that are designed for blogger pages or posts. By default, these widgets are named as 'archive,' 'main,' or 'item,' with 'all'.
- mobile(Optional) - Through this attribution, you can determine whether the widget will appear in the mobile or not. The 'default' is set to show the widget in the mobile, and "No"will not show.
How to Find Such Attributes For The Widget.
You can search through the Blogger Dashboard > Theme > Edit Html to find the attributes of the widget you want or by clicking on "Jump To Widget" you can go directly to your desired widget.How To Use Blogger Include and Includable Tag
"Includable" define as the tag of the contents of the widget. Define "includable" as the tag of the contents of the widget in the widget. Includable works as two parts.
- include - Similar to a function. When it is called, the specific "includable" will be called. Suppose, if you have a section of code that you want to repeat in multiple places, on that time it is used by "include" to avoid using the full codes multiple times.
- includable - It is similar to the function definition or body of the function.
Example of Includable
<b:includable id='nextprev-item'>
<div class='post-navigation'>
<div class='post-next'><div class='nxt'> « </div><b:if cond='data:newerPageUrl'>
<a class='blog-pager-newer-link1' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><h6>Next</h6><h5><data:newerPageTitle/></h5></a>
<b:else/>
<span class='linkin left'><h6>Next</h6><h5>This is the most recent post.</h5></span>
</b:if></div>
<div class='post-previous'><div class='prv'> » </div><b:if cond='data:olderPageUrl'>
<a class='blog-pager-older-link1' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><h6>Previous</h6><h5><data:olderPageTitle/></h5></a>
<b:else/>
<span class='linkin right'><h6>Previous</h6><h5>This is the last post.</h5></span>
</b:if> </div>
</div>
<div class='clear'/>
</b:includable>Example of Include
<b:include name='nextprev-item'/>Includable Syntax
<b:includable id='YourUniqueId' var='dataForWidget'>
[Here we can place any piece of code]
</b:includable>- id (Required) - Need a unique ID (identifier), with letters and numbers only.
- var (Optional) - To specify the data in the section and this is also identical to a function, with letters and numbers only.
Include Syntax
<b:include name=’IdOfTheIncludable’ data=’dataForIncludable’/>
Include Attributes
- name (Required) - It must be the same ID of "b: includable".
- data (Optional) - It will be the value of var attributes in "includable".
Conditional - If/Else
It is similar to the other programming languages if / else statement. It can be used to display some material or information based on a condition. It means, "b: else" optional part. In other words, if there are no results in "b: if" tag then "b: else" will show results and condition results will be true if "b: else" is not there.
Conditional - If/Else Syntax
<b:if cond='condition'>
[if condition is true, this content will show ]
<b:else/>
[if condition is false, this content will show ]
</b:if>
Example: As we have often noticed when we use the blog title.
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>Loops
The "b: loop" tag allows you to repeat a specific section multiple times. It helps to display a list / set of data elements such as labels in a post, to show comments for a post and for posts.
Loops Syntax
<b:loop var='identifier' values='set-of-data'>
[this content will be repeated]
</b:loop>Data tag
data: One of the most important components for blogs. All the content of the blog comes from "data:" Such as title, url, post (collection of posts) and every bit displayed in the blog related to "data:"
Example
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<data:title/>
</b:widget>The expr
expr - is used to calculate values for expressions and tags. It can be used to define values in data from the data.
Syntax
<tagName expr:attribute='expression'></tagName>At The End
Hopefully, from this article, you have taken a basic idea about your Basic Blogger Template Code. But, if you aren't interested in giving such time to codings, like HTML, CSS or JavaScript, then you can use any free theme like internet choice. But in this case, my experience is that in some way you will be interested in design changes later in a while. So, if possible, keep the concept of blogger template design basic which you may find useful later on.
Very efficiently written information. It will be beneficial to anybody who utilizes it, including me. Keep up the good work. For sure i will check out more posts. This site seems to get a good amount of visitors. media kit templates The intention of web templates is to design a web site.
ReplyDelete