How to Design a Custom Blogger Template From Beginning to End
Desain Custom Blogger Template Learning from the basics to design a custom blogger template from start to finish is better than sticking with someone else's blogger template. That way you can hone your skills to better understand the various codes that exist in creating blogger templates.
Not that if you are still using a blogger template from a template service provider it is not good, but it depends on how you determine a good template for the needs you need. There are so many blogger templates that you can get for free on the internet, but it's a shame if you don't know the structure of the blog template you are using.
What are Blogger Templates?
Blogger templates are XML format files created by web developers for blogging purposes. Usually in an XML file there are lines of programming language code such as HTML, CSS, and JavaScript. By understanding the basic introduction: HTML, CSS, and JavaScript you can easily create blogger templates. Because such a programming language is needed to design blogger templates so that the page display becomes more responsive to users. In addition, you can use the programming language to create various applications such as: Creating Calculators with HTML, CSS, and JavaScript, Changing Blog Templates Like Professional Websites, and various other purposes.
We can analogize the blog template itself as a cellphone case that you use with various cellphone cases. For example, the display of themes on the mobile application that you are using. When you change the theme on your cellphone, the display of the screen page or the text background and color on the cellphone screen that you are using will follow the theme you choose according to your preferred taste. Likewise, the Blogger Template Design used by publishers must have a different style for each website owner.
Now it all depends on how the developer designs the blog template that you use. For that, if you buy a blogger template from a service provider that sells blog templates, make sure the blog template owner understands the coding design to create a blogger template. Because there are too many service providers in this universe. So you have to be even more careful in choosing the services of a quality template provider if you are serious about building your business blog.
Complete Guide to Creating Blogger Templates
This complete guide to creating a blog template aims to provide basic learning for those of you who want to create your own blogger template design. Keep in mind that there are millions of blogs powered by Google's Blogger platform. The first thing visitors notice when visiting a blog is the design or template. A good custom designed theme has the power to retain visitors for a longer period of time. This is very important to build a brand and marketing image of the blog that you will develop for the future.
In this post, we will learn to code a custom Blogger template. Our emphasis and focus will be primarily on core template design concepts rather than going for fancy designs. In this way, you can create different types of templates with unique designs. If you're already familiar with basic HTML and CSS, you can take your designs to the next level fairly easily. I don't need to say that you should try this practice of designing templates on a personal demo blog. Later, you can export and import them on the live blog.
So to create such a template for the first time, avoid choosing complex layouts and start with simpler layouts to understand the basics. Let's get started and learn to design a Custom Blogger template in a few easy steps. This is the right post for those of you who want to design your own template with the work you want. For that, see the review until it's finished because the Admin will provide a Complete Guide to Creating Blogger Templates.
Almost any design concept presented here can be applied to your existing template as long as you know exactly what you are doing and how the changes introduced will affect the design and layout. Everything starts from how to create a free blog on Blogspot until you can build the blog into a source of income. After that, you can also learn How to Create Labels on Blogs with Categories By Post. This is to give you a better understanding of the blogging continuum that you need to build a successful website. You can set Blogger Dashboard Settings to optimize and be easily recognized by Google search engines.
Now, quickly create a test blog within your Blogger dashboard to start the template design process. This post discusses how to design a custom blogger template that you can follow in order to create your own blog template.
Create a Raw and Minimal Template Outline
We'll start by creating a raw outline from the template. This will help us in understanding the structure and layout of the template in an easy way. How to create a blog template template from scratch can help us in the coding process that aims to adjust the code needed to produce a simple and good page display.
Previously you had to use your favorite code editor to create this template. A code editor that you can use such as Visual Studio Code, Sublime Text, or Notepad++ (Plain Note) that is on your computer. Let's start with the following minimal structure.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang='en-US' 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' xmlns:og='http://ogp.me/ns#'>
<head>
</head>
<body>
</body>
</html>The first line of the template declares it an XML document. This is important so that the web browser can parse and process the template code in the correct way.
The next line <!DOCTYPE html> specifies that we will use HTML5 code in our XML document. Again, this helps web browsers process template code efficiently.
Attributes added to the <html> tag declare the XML namespace for a document. It also has a language attribute for documents. If you coded the template in a language other than English, change the language code.
The empty <head> tag is where the web page metadata will go. It includes various meta tags, CSS styles, and scripts. We also have a blank <body> section where the design and layout will be coded.
Let's move on to the next step and add basic and important metadata to the <head> section.
<head>
<b:include data='blog' name='all-head-content' />
<title><data:blog.pageTitle/></title>
<meta content='width=device-width, initial-scale=1' name='viewport' />
<b:skin>
<![CDATA[
/* Custom CSS rules goes here... */
]]>
</b:skin>
</head><b:include> The first tag adds some of the most important SEO tags in this section. This includes the very important page description tag as well. You can also learn about Blogger's SEO Learning Guide for Beginners in the previous post.
The next one is quite clear and easy to understand. The <title> tag adds the page title to the header section. All these tags are important for search engines and crawlers.
The <meta> tag has a name='viewport' attribute added to enable responsive design mode so that the layout also renders well on smaller devices.
The <b:skin> tag includes all the CSS code to create the layout and design of the blog. Currently, it is empty and will be populated with the relevant CSS rules at a later stage.
Now, let's move on to the <body> section and take a look at all the important elements in it.
💡 The <body> section summarizes all the elements visible to site visitors in a web browser. You are free to add your preferred layout in this section.
Let's start with the <header> section. This is different from the header section which contains the document metadata.
<header>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'></b:widget>
</b:section>
</header>The <header> tag section includes the title and description of the blog. You can also replace it with a custom logo. You may see the <b:section> tag. That's how we create different types of sections in Blogger templates.
In this section, we have created a <b:widget> type='Header' attribute which includes all the header functions of a typical Blogger template.
Next is the main blog post section where all the written articles appear on the page. Here's how to make this section so you can understand how to Post Articles on Blogs.
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts Section' type='Blog' />
</b:section>Anda mungkin memperhatikan bahwa kami telah menambahkan atribut type='Blog' ke tag <b:widget>. Ini adalah atribut standar yang secara otomatis menambahkan semua fungsi yang diperlukan untuk bagian khusus ini.
Ini secara otomatis menghasilkan konten yang diperlukan untuk beranda, halaman arsip, halaman pencarian, dan tentu saja untuk halaman posting tunggal.
Widget tambahan dapat ditambahkan ke bagian ini karena kami telah menambahkan atribut showaddlement='yes' ke tag <b:section>. Blogger sering menggunakan fitur ini untuk menambahkan konten khusus baik di bagian atas atau bawah posting.
Bagian penting berikutnya adalah sidebar yang akan muncul di sisi kanan konten utama.
<aside>
<b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'>
</b:section>
</aside>We've used the HTML5 <aside> tag for the sidebar. While it's not mandatory to use it and can easily be replaced with a regular <div> tag, I highly recommend using it for this section.
You may notice that the sidebar section does not contain any widgets. So, basically, we have created a blank sidebar which can be filled with the desired widgets via the dashboard interface.
Furthermore, which is not less important is the footer section which is usually located at the bottom of the blog page. Here's the code snippet.
<footer>
<div>
Copyright © 2021 <strong><data:blog.title/></strong>
</div>
</footer>This is a simple footer section consisting of a copyright declaration. Note the use of the HTML5 <footer> tag for this one. The blog name is written dynamically after the copyright statement.
One can make the footer section multi column and widget enabled too. The complexity or flexibility of the layout depends entirely on your needs and technical skills.
So here's the overall template XML Code outline for the Custom Blogger Template Framework.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang='en-US' 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' xmlns:og='http://ogp.me/ns#'>
<head>
<b:include data='blog' name='all-head-content' />
<title>
<data:blog.pageTitle/>
</title>
<meta content='width=device-width, initial-scale=1' name='viewport' />
<b:skin>
<![CDATA[
/* Custom CSS code goes here... */
]]>
</b:skin>
</head>
<body>
<div id="blog-wrapper">
<header>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'></b:widget>
</b:section>
</header>
<div id="content-wrapper">
<div class="content-table">
<div class="content-row">
<b:section class='main column' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts Section' type='Blog' />
</b:section>
<aside class="column">
<b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'>
</b:section>
</aside>
<div>
</div>
</div>
<footer>
<div>
Copyright © 2021 <strong><data:blog.title/></strong>
</div>
</footer>
</div>
</body>
</html>First of all, I have included the content of the body section in the <div> tag. This is a wrapper for the entire blog structure.
You may notice that I have encapsulated the post content section and sidebar inside 3 <div> tags. Each of these tags has been assigned some CSS class and id.
You may also notice that the .column CSS class has been added to the posts section and sidebar. All these new additions are used to properly structure the core layout of our blog with the help of custom CSS rules.
Before we move on to styling our layout through CSS rules, let's take a look at the mockup to get a fair idea of it. This will be the classic two column layout commonly used for blogs.
All custom CSS rules will be written between <b:skin> tags as shown below. I've provided an overview of the order in which these CSS rules will appear.
<b:skin>
<![CDATA[
/*
1. CSS Reset
2. Core Layout Structure
3. Template Design
4. Utility Classes
5. Media Queries
*/
]]>
</b:skin>Instead of displaying the entire lengthy CSS code, I included CSS rules for the core layout structure. Look at the CSS code below.
/* Template's Core Layout */
#blog-wrapper {
width: 1024px;
margin: 0 auto;
}
#content-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
.content-table {
display: table;
border-collapse: separate;
}
.content-row {
display: table-row;
}
#main {
padding: 25px 25px 25px 20px;
width: auto;
height: 100%;
display: table-cell;
}
aside {
width: 32%;
height: 100%;
border-left: 1px solid #ddd;
padding: 25px;
display: table-cell;
}
footer {
width: 100%;
clear: both;
border-top: 1px solid #ddd;
padding: 20px;
}You can carefully examine all the CSS rules in the template files available as downloads at the end of this tutorial. And, here are some screenshots of the template.
Conclusion
You are free to extend and redistribute this template. Designing a Blogger template is not very difficult and one can start with basic knowledge of HTML and CSS. Hope you found this tutorial useful.
That's the post about How to Design a Custom Blogger Template from Beginning to End. Hopefully this article is useful and can help you. Let's share this article to help other friends. Thank You!
.jpg)
Samuel
Hello i'm Junior Web Developer from Medan, North Sumatera, Indonesia. I like Design and UI/UX Design
