Learn the Basic Structure of Blogger Templates (If You Want to Create Your Own Blog Template)

Hi Friends RahmanCyber.NET, this time we will discuss about the Basic Structure of Blogger.

{getToc} $title={Table of Contents}

Blogger Template Structure

When studying the structure of a framework, here I think of it like that, because in fact… blogger templates are like frameworks that have been structured, so when we want to develop our own templates, we need to understand the structure… so we don’t get the wrong room.

The frameworks known in the programming world, such as Laravel, CodeIgniter, and Yii, are indeed more complex because they are related to databases, while for bloggers, consider it the most basic version and only deal with the frontend.

Loh bang, right on Blogger when we design the template, we also design the admin page?

What is Front-End

FrontEnd or Front-end web development is the practice of converting data into a graphical interface, through the use of HTML (HyperText Markup Language), CSS (Cascading Style Sheets), and JavaScript, so that users can view and interact with the data. Source directly from Wikipedia (English)

So obviously this has to do with the User Interface. From what I learned at school (hehe) Front End’s goal is to make websites and applications look attractive and user friendly.

style="text-align: left;">Have you seen the UI UX DESIGNER Profession?

Well, it’s related to this front end, friend.

What is UX? UX is User Experience, bro.. or user experience.

Both UI and UX Designer are interrelated in developing a good front end

What’s the job like?

Here, we don’t discuss it in detail, because our main concern this time is understanding the structure of the blogger template, if you are curious about UI UX, please look for UI and UX JOB VACANCY, there will probably be an explanation of JOB DES UI and UX.

“The bigger the company, usually it will be more specific later, so that workers can focus more and research in detail and professionally because the focus is clear”


the UI UX Designer salary is also big.. from the info I got when I looked at job search sites, it could be around 6-14 million per month (if applying at a bona fide company)



to see for yourself!

Meanwhile, What is Back-End?

As far as I know, the back end is the back of the screen.. you can’t see it… hehe. Usually the programming language that is mastered is like PHP, Ruby, Python which is directly connected to the server.

It’s okay if I can Front-End ( CSS, HTML, Javascript ) and Back-End (PHP)...

That means your name is Full Stack!

You can Front-End and Back-End, because Full Stack itself is a term for those who master Front-End and Back-End .. as in your case.

Wow, why did it expand to Front End, Back End and Full Stack!!!

Back to the Blog Template Structure!!!!

The Blogger page itself has a structure that is similar to HTML documents in general, namely the Header, Post Section, and Footer.

As for the template structure, it’s much more complex.

Blogger Template Structure Infographics


from just a glance, if we are used to updating blog templates, changing the appearance… maybe my friend understands… but to be more complete… we will explain one by one…

Explanation Part of the infographic template structure:


In template programming, when you go to the html editing section, you will see a pattern

actually this body is the body of the page (covering the appearance of the header, title, post content, comments, sidebar, footer and various widgets (basically the entire screen of the computer = body).


If this outer wrapper is the part that covers the template (part of the outer border of the template). In general, wrapper is used to place smaller blocks inside. The most common blocks in the Outer-wrapper are Header, Content, and Footer.


This block is the very top. Inside the Header can also have sub-blocks, for example: Header Title, Blog description, and others such as Google Adsense banners, menu bars, etc. Outside the header or to wrap all sub-blocks in the header is usually called Header-wrapper.


It’s located below header

usually have naming Content-wrapper– Basically this is part of the most important block. In general, this wrapper section consists of blocks of Sidebar (can be 1,2 or more sidebar… usually the average is a maximum of 3, because if it’s more than that, the playing part gets smaller) and blocks Play (which contains the results of posting articles, comment blocks, or some ad space).


Usually written Main-wrapper is the outer part of the Main block in which there are Content-wrapper. In the Content-wrapper
There are Post blocks, Comment blocks, Date Headers, and other sections that can be created from the Add Page Element option. In the main part, we can also insert other widgets

Blog Post

This block section contains the most important functions, such as Posts Titles, Post, Post Author,


This is a section that can contain all side widgets, such as: About Me, Labels, Archive, Text, HTML, Adsense, but it is also possible that it can contain only 1 widget. In the standard template from Blogger, usually 1 sidebar is found, if there is 1 sidebar then the template consists of 2 columns, namely: Play and Sidebar. But the number of sidebars can be added easily. The most common example of an infographic image created by R4CProject is that it has 2 sidebars or means the template has 3 columns.


If this footer is the bottom of the template. Like the block elements in the Header, they are needed too Footer-wrapper which contains parts of the footer.

Blogger Template Hierarchy

Still don’t understand? the following The structure of the blogger template, when viewed hierarchically, can be displayed as follows ( This hierarchy starts from the Body Tag, after the closing Head tag when Editing HTML..)

blog template basic structure hierarchy

I hope you got the picture…

Actually, by understanding the basic structure of this blogger template, we will find it easier to design templates and make edits to your current blog display template according to your wishes, because you already understand the posts or their location, so it’s easier to improvise.

Moreover, we learn to create a series of structured and organized code.

Please correct me if there is something wrong in understanding…

Actually I’ve discussed about how to make a Blogger Template from basic and basic

So there you can use it as a reference as a basis for making blogger templates from scratch.

And on this page, I try to explain it more coherently… and to make it easy to understand..


Create by Ipadguides in category of Blog