Knowledge of the basic structure of this blog template can we make provisions to modify the look of the blog that we have in order to be more user-friendly.
Basically, a blogger template is all a collection of widgets. To prove it please open your blogger, then go to layout. It's all a collection of widgets that build a blog with a blogger platform. Starting from the header, body, sidebar to footer also use a widget.
Here is a framework of HTML codes that build a blog or website:
Basically, a blogger template is all a collection of widgets. To prove it please open your blogger, then go to layout. It's all a collection of widgets that build a blog with a blogger platform. Starting from the header, body, sidebar to footer also use a widget.
Here 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 is then developed to form a website. Okay, now we go directly to our main topic.
Blogger Template Structure
To explain the structure of the bogger we will start from the topmost structure. The most special thing about bloggers is that we have to declare XML (eXtensible Markup Language). For XML declaration on blogger, we can see in the top template. Here's the default XML declaration 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 for the placement of meta tags, Javascript and CSS that beautify the template later.
1. Meta Tags
Here's 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, look at the above elements that we declare the meta all-head-content tag. This means that here we use auto meta tags. If we distinguish the meta tag will be like this:
<meta content='blogger' name='generator' />
<link href='https://arbloggerlab.blogspot.com/favicon.ico' rel='icon' type='image/x-icon' />
<link href='https://arbloggerlab.blogspot.com/' rel='canonical' />
<link rel="alternate" type="application/atom+xml" title="titleblog - Atom" href="https://arbloggerlab.blogspot.com/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="titleblog - RSS" href="https://arbloggerlab.blogspot.com/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="sinau - Atom" href="https://arbloggerlab.blogspot.com/feeds/12345678910/posts/default" />
<link rel="openid.server" href="http://www.blogger.com/openid-server.g" />
<link rel="openid.delegate" href="https://arbloggerlab.blogspot.com/" />Well a lot of ya, hehe. To optimize the InsyaAllah meta tag later I will discuss in the next article.
In addition to the all-head-content declaration we also see the declaration of our blog title. Here is the element that declares the blog title: <title> <data: blog.pageTitle /> </ title>
2. CSS (Cascading Style Sheet)
Cascading Style Sheet (CSS) is a rule to control multiple components in a web so that it will be more structured and uniform. CSS is not a programming language according to wikipedia.org. Simply CSS is the meat that makes up the body, so skinny or fat is CSS. Here's a sample CSS on a 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
Well in addition to CSS and meta tags, usually on the element head is also used as a place to put javascript. Here is one example of javascript that is usually placed above 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 menu etc. Actually, we can put the script on the body, but there are certain scripts that we cannot insert into the element body and inevitably we must place on the element head.
Body Elements
In this element body framework and blog template structure in the form. Like the word of this element that makes up the template :). There are so many elements - elements in the body. Like the human framework in general, the structure that builds the body, among others:
1. Header
The header is the top component of a template. This is where to put the blog title and blog description. For advanced template designers, they can utilize the land in the header 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 above HTML arrangement, it appears that the header is a locked widget, so if you look at the header layout cannot be deleted because it has been locked.
2. Navbar
Actually, this navbar is on the top too. Even located above the header, navbar itself serves to facilitate us log out of bloggers and when I want to re-edit the template. But for the template that has been modified usually navbar already in the hidden. Here's the 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. Main Blog
Main or usually we call a blog post. From a brief explanation, it is clear here where our post will be displayed: D. The main builder framework (blog post) is very much starting from the post title, posting date until the comment box is all here. Code HTML builder Main blog / blog posts:
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>If you see yourself must be many elements of this blog post builder.
4. Sidebar
The sidebar is like a human hand. In the sidebar, an element is usually people put the popular post, label, until the ad. The sidebar builder HTML code is:
<b:section class='sidebar' id='sidebar' preferred='yes'/>5. Footer
Footer is the bottom element in blogger template structure. Here people usually put credit templates. The HTML code of the footer builder is:
<b:section class='footer' id='footer' showaddelement='no'>
<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
</b:section>So the description of the Basic Structure Blogger Template may be used as additional knowledge.
