Widget HTML Atas

Basic Blogger Template Structure

Blogger Basic Structure Template - On this occasion I want to share knowledge about the Basic Structure of Blogger Templates, which is basically a fundamental knowledge for a blogger to be able to successfully develop his blog in the future. 

We can make knowledge about the basic structure of this blog template to modify the appearance of our blog so that it can 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 layout. It's all a collection of widgets that build a blog with the blogger platform. Starting from the header, body, sidebar to the footer it also uses a widget.

The following is a framework for HTML codes that build a blog or website:



<title>Judul Blog</title>





From this simple HTML structure, it was then developed to form a website. 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). We can see the XML declaration on blogger in the top part of the template. Following is the default XML declaration of the 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, Javascript and CSS tags that beautify the template later.

1. Meta tags

Following is the form of the default meta tag of the blogger template.

<meta expr:content='data:blog.isMobile ? &quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0&quot; : &quot;width=1100&quot;' name='viewport'/>

<b:include data='blog' name='all-head-content'/>


Now it can be seen in the above elements that we declare the all-head-content meta tag. This means that here we use automatic meta tags. If we describe it again the meta tag will be like this:

<meta content='blogger' name='generator' />

<link href='http://www.arlinadzgn.com/favicon.ico' rel='icon' type='image/x-icon' />

<link href='http://www.arlinadzgn.com/' rel='canonical' />

<link rel="alternate" type="application/atom+xml" title="titleblog - Atom" href="http://www.arlinadzgn.com/feeds/posts/default" />

<link rel="alternate" type="application/rss+xml" title="titleblog - RSS" href="http://www.arlinadzgn.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="http://www.arlinadzgn.com/" />

Wow, a lot too, hehe. For the optimization of God willing meta tags, I will discuss later in the next article. 

Besides the all-head-content declaration we also see the declaration of our blog title. This 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 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. Simply put, CSS is the flesh that forms the body, so the thin and fat that governs is CSS. Here is an example of CSS on a standard template:


body {

font: $(body.font);

color: $(body.text.color);

background: $(body.background);

padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);



html body $(page.width.selector) {

min-width: 0;

max-width: 100%;

width: $(page.width);



3. Javascript

Well besides CSS and meta tags, usually on the head element is also used as a place to put javascript. Here's one example of a java script 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>

Now the script above is called jQuery and is usually used to run back to top, dropdown menus etc. Actually, we can put scripts on the body, but there are certain scripts that we can't put into the body element and we can't help but place them in the element head.

Body Elements

In this body element, the framework and structure of the blog template are shaped. Like the word this element that forms the template framework :). There are lots of elements in the body. Like human skeletons in general, bodybuilding structures include:

1. Header

The header is the top component of a template. This is where you put your blog title and blog description. For advanced template designers, they can use land in the header to advertise etc. Here's a simple HTML builder header:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/>


From the HTML arrangement above it can be seen that the header is a locked widget, so if you see the header layout it can't be deleted because it has been locked.

2. Navbar

Actually, this Navbar is on the top too. Even the location above the header, the Navbar itself functions to make it easier for us to log out from blogger and when we want to re-edit the template. But for the modified templates the navbar is usually hidden. Next is 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'/>


3. Main Blog

Play or we usually call a blog post. From the brief explanation, it is clear here where our posts will be displayed: D. The main build framework (blog post) starts from the post title, post date until the comment box is all here. Build an html code Main blog/blog post:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>

If you see for yourself, there must be lots of elements to build this blog post.

4. Sidebar

The sidebar is like a human hand. In this sidebar element, people usually place popular posts, labels, and advertisements. The HTML code for the sidebar builder is:

<b:section class='sidebar' id='sidebar' preferred='yes'/>

5. Footer

Footer is the lowest element in the blogger template structure. Here people usually put credit templates. Html code builder footer namely:

<b:section class='footer' id='footer' showaddelement='no'>

<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>


Thus the description of the Basic Structure of Blogger Templates, hopefully, useful as additional knowledge.

No comments for "Basic Blogger Template Structure"