Blogger Template Basic Structure
We can make the knowledge of the basic structure of this blog template to be used to modify the appearance of the blog that we have in order to be more user friendly.
Basically a blogger template is all a collection of several widgets. To prove it please open your blogger, then go to the layout. It is all a collection of widgets that build a blog with a blogger platform. Starting from the header, body, sidebar to footer using a widget.
The following is a framework of html codes that build a blog or website:
<html>
<head>
<title>Blog Title</title>
</head>
<body>
</body>
</html>
From this simple html structure then developed until a website is formed. Okay now we go straight to our main topic.
Blogger Template Structure
To explain the structure of the bogger we will start from the top structure. The most special thing about blogger is that we have to declare XML (eXtensible Markup Language). For XML declarations on bloggers we can see in the top part of the template. The following is the default xml declaration of blogger.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html 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'>
Element Head
In the element head there are 3 important elements, namely for the placement of meta tags, Javascript or CSS that beautify the template later.
1. Meta Tag
The following is the default blogger template meta tag.
<meta expr:content='data:blog.isMobile ? "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" : "width=1100"' name='viewport'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
Now it looks at the element above that we declare the all-head-content meta tag. This means that we use automatic meta tags. If we explain again the meta tag will be like this:
<meta content='blogger' name='generator' />
<link href='https://stressthinking.blogspot.com/favicon.ico' rel='icon' type='image/x-icon' />
<link href='https://stressthinking.blogspot.com/' rel='canonical' />
<link rel="alternate" type="application/atom+xml" title="titleblog - Atom" href="https://stressthinking.blogspot.com/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="titleblog - RSS" href="https://stressthinking.blogspot.com/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="sinau - Atom" href="http://www.blogger.com/feeds/12345678910/posts/default" />
<link rel="openid.server" href="http://www.blogger.com/openid-server.g" />
<link rel="openid.delegate" href="https://stressthinking.blogspot.com/" />
Wow there are too many, hehe. For optimizing the meta tag, God will later discuss it in the next article.
In addition to the all-head-content declaration we also see the declaration of our blog title. This is the element that declares the title of the blog: <title> <data:blog.pageTitle /> </title>
2. CSS (Cascading Style Sheet)
Cascading Style Sheet (CSS) is a rule for controlling several components in a web so that it will be more structured and uniform. CSS is not a programming language according to wikipedia.org. CSS is easily the meat that forms the body, so thin and fat that regulate is CSS. The following is an example of CSS in the standard template:
<b:skin>
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}
html body $(page.width.selector) {
min-width: 0;
max-width: 100%;
width: $(page.width);
}
</b:skin>
3. Javascript
Now besides CSS and meta tags, usually in element head is also used as a place to put javascript. Here is one example of a java script that is usually placed on the head.
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js?ver=1.0"></script>
Well the above script is called jQuery and is usually used to run back to top, dropdown menus etc. Actually we can put the script on the body, but there are certain scripts that we cannot enter into the body element and we have to place it in the element head.
Body Elements
In this body element, the framework and structure of the blog template are in shape. Like the word of this element that forms the template frame :). There are a lot of elements - elements inside the body. Like human skeletons in general, the structure that builds the body includes:
1. Header
The header is the top component of a template. This is the place to put the blog title or blog description. For advanced template designers, they can use diheader land to advertise etc. Here's a simple html header builder:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/>
</b:section>
From the html layout above, it can be seen that the header is a locked widget, so if you see the header layout it cannot be deleted because it has been locked.
2. Navbar
Actually this Navbar is located at the top too. Even it is located above the header, Navbar itself serves to make it easier for us to log out of the blogger or when we want to re-edit the template. But for templates that have been modified, the navbar is already hidden. The following Navbar structure I mean:
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>
3. Play Blog
Play or we usually call blog posts. From a brief explanation, it is clear here where our post will be displayed: D. The Main builder framework (blog post) is very large, starting from the post title, posting date, until the comment box is all here. HTML builder code Play a blog / blog post:
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
If you see, for sure there are many elements of this blog post builder.
4. Sidebar
Sidebar is like a human hand. In this sidebar element, people usually place popular posts, labels, and advertisements. Sidebar builder html code, namely:
<b:section class='sidebar' id='sidebar' preferred='yes'/>
5. Footer
Footer is the lowest element in the blogger tempate structure. Here people usually put credit templates. The footer builder html code is:
<b:section class='footer' id='footer' showaddelement='no'>
<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
</b:section>
Thus a description of the Blogger Template Basic Structure, hopefully useful as additional knowledge.
Βιέννη
Ich fische besonders gerne in trüben Gewässern ... Was ich hier teile, ist nur ein Test und zielt darauf ab, den Rand des Sumpfes zu vergrößern. Ich bin nicht verantwortlich, wenn Probleme auftreten, NM ist auch ein Experiment
