How to create a custom blogger theme from scratch?

Creating a blog is very easy with blogger. Blogger is very popular platform for blogging, because of its free service. There are number of choice you can make for your blogger themes. But some times the theme you want to use is paid or doesn't provides features you want. In such case you have to cooperate with other theme. But if have some coding knowledge of HTML, CSS and JS you can make your own blogger theme. So in this post I am going to show you how you can create a custom blogger theme from scratch.

Note : To create a custom blogger theme a little HTML , CSS and JS knowledge is required.

Table of Content

Basic knowledge for theme

A blogger theme a made up with XHTML ( EXtensible HyperText Markup Language ) and some blogger elements. To create a basic layout of theme, you have to use namespaces. Now what is a namespace?

Namespace: It is a set of unique names. It is a mechanisms by which element and attribute name can be assigned to a group. It is identified by URI(Uniform Resource Identifiers).

namespaces are already defined in Blogger by Google. There are following 3 types of namespaces in blogger

xmlns:b - here 'b' specifies to blogger element. Which means this element is going to use as a blogger element.
xmlns:data - it is used to specify that from the data is coming to the blog.
xmlns:expr - It is used to calculate the expression.

Note: You have to write you code in .xml file

Code editor

Now to start coding you need a code editor. There are many free good code editor available in internet. You can easily choose any of them. But i recemend you to VS Code which is a very popular and very powerful code editor.

Get VS Code

And if you want to create a theme from your android mobile you can code in Acode application

Get Acode

You can also code directly in blogger HTML Editor.

Now let's start.

Steps to create a custom theme

Step 1: Creating a basic structure layout.

Syntax of Basic Layout ( you ca code and paste this inside your code)

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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'>
<head>
<title><data:blog.pageTitle/></title>
</head>
<body>
<!-- BODY CONTENTS -->
</body>
</html>

Let's discus what above code does.

The very first line of this code declares that this is a XML document. It is very important so that web browser can process this code in correct way.
In next line <!DOCTYPE html> specifies that the code written in the document is a HTML5 code. It is also very important.
<head> tag contained all the metadata like meta tags, meta description. It also contains cdn ( Content Delivery Network ) links , styles , title , favicon and many other important things.

<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... */
      ]]>
    </b:skin>
</head>

Let's discus what above code does.

<b:include>: This tag is use to add some important SEO tags in blogger.
<title>: This tag is use to add title of the page.
<meta>: This tag is use to add metadata in page like viewport, theme-color, description and tags.
<b:skin>: This tag is use add CSS styling.
<body>: This tag is very important. This tag contains all the elements which we want to show in side our page.

Let's start with the <header> tag ( header section ). Remember <head> and <header> tags are totally different from each other.

<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>

<header> section contains the blog's title and its description. We can also add a custom logo in blog inside this section

<b:section> : is use to create sections in a Blogger Theme ( Blogger Template ).
<widgets> : is use to create widgets in a Blogger Theme ( Blogger Template ). It consist a type attribute, which defines

Now to make a primary blog posts section which displays all your blogs in the page. You have to write this code.

<b:section class='main' id='main' showaddelement='yes'>
    <b:widget id='Blog1' locked='true' title='Blog Posts Section' type='Blog' />
</b:section>

Note: You have to use type="Blog" attribute inside <b:widget>. Blog is a predefined attribute, which automatically adds all the required functionally for blog post section.

To make a sidebar which appears on the right side or left side of every page content.

<aside>
    <b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'>
    </b:section>
</aside>

<aside> : It is a HTML5 which is used to make sidebars. Although it not necessary to use <aside> we can easily replace it with <div> tag. But <aside> tag is highly recommend to make sidebars.

And last but not the leas, the footer section. Which contains credits and other stuff. Here is the basic snippet for footer section in Blogger.

<footer>
    <div>
    Copyright © 2021. All right reserved. <strong><data:blog.title/></strong>
    </div>
</footer>

Step 2: Adding styles and scripts in themes

After designing a basic structure, we have to CSS styles and JavaScript our blog so that our blog can look good and interactive. To style our blog theme, we'll write some CSS inside <b:skin> tag .

<b:skin>
  <![CDATA[ 
  /* 
    All CSS styles
  */
  ]]>
</b:skin>

I am going to add this small CSS rules in my theme.

html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    word-wrap: break-word
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400
}
li{
    list-style: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0
}

img,
fieldset {
    border: 0
}

abbr,
acronym {
    text-decoration: none
}

code {
    font-family: Consolas, "Courier New", monospace;
    background: #eee;
    padding: 0 5px;
    border-radius: 2px;
    border: 1px solid #E1DADA
}

sub,
sup {
    line-height: .5em
}

img {
    max-width: 100%;
    width: 100%;
    height: auto
}

iframe,
video,
embed,
object {
    display: block;
    max-width: 100%
}

img {
    display: block
}

img[align="left"] {
    display: block;
    float: left;
    margin-right: 1em;
    margin-bottom: .8em
}

img[align="right"] {
    display: block;
    float: right;
    margin-bottom: .8em;
    margin-left: 1em
}

img[align="middle"] {
    display: block;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    float: none;
    clear: both
}

input[type="submit"],
button {
    cursor: pointer;
    overflow: visible;
    -webkit-appearance: none
}

body {
    font-family: sans-serif, Georgia, "Times New Roman", Times, serif;
    font-size: 16px;
    line-height: 27px;
    font-weight: 400;
    color: #111;
    background-color: #f8f8f8;
}

a {
    text-decoration: none;
    color: #2e3ca1;
}

p a {
    text-decoration: underline
}

input[type="text"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="email"],
input[type="password"] {
    border-radius: 3px;
    height: 30px !important;
    padding: 15px 10px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid #ddd !important;
    background-color: #f8f8f8;
    margin-bottom: 10px
}

input[type="submit"],
button {
    border-radius: 3px !important;
    height: 32px !important;
    padding: 5px 10px !important;
    border: 1px solid #c0c0c0 !important;
    background: #ddd !important;
    color: #111 !important;
    width: auto
}

select,
textarea {
    border-radius: 3px;
    height: auto;
    padding: 15px 10px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid #ddd !important;
    background-color: #f8f8f8;
    margin-bottom: 10px;
    width: 50%
}

.widget input[type="submit"],
.widget button {
    margin-bottom: 8px !important;
    width: auto !important
}

#blog-wrapper {
    width: 100%;
    background-color: #f8f8f8;
}

#content-wrapper {
    width: 80%;
    height: 100%;
    overflow: hidden;
    margin: auto;
}

.content-table {
    display: table;
    border-collapse: separate
}

.content-row {
    display: flex;
}

#main {
    padding: 20px;
    width: 100%;
    height: 100%;
}

aside {
    width: 33%;
    height: 100%;
    padding: 25px;
}

footer {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    border-top: 1px solid #ddd;
    padding-left: 20px
}

header {
    text-transform: capitalize;
    padding: 20px;
    margin-top: 30px;
    border-bottom: 1px #ddd solid;
}

h1.title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.5em
}

.description span {
    color: #727272
}

.date-header span {
    font-size: 15px;
    color: #696969
}

.post-title {
    font-size: 28px;
    line-height: 1.25em
}

.post-body {
    margin: 15px auto
}

.post-body h1 {
    font-size: 33px;
    margin: 0 auto 18px
}

.post-body h2 {
    font-size: 28px;
    margin: 0 auto 14px
}

.post-body h3 {
    font-size: 24px;
    margin: 0 auto 10px
}

.post-body h4 {
    font-size: 20px;
    margin: 0 auto 8px
}

.post-body h5 {
    font-size: 18px;
    margin: 0 auto 8px
}

.post-body h6 {
    font-size: 16px;
    margin: 0 auto 6px;
    font-weight: 700
}

.post-body a {
    text-decoration: underline
}

.post-body a:hover {
    text-decoration: none
}

.post-body ul,
.post-body ol {
    margin: 0 0 0 25px
}

.post-body ul {
    list-style-type: square
}

.post-body ul li:not(:last-child),
.post-body ol li:not(:last-child) {
    margin-bottom: 5px
}

.post-body blockquote {
    border-left: 7px solid #d2d2d2;
    padding-left: 20px;
    font-style: italic;
    margin: 0 15px;
    color: #626262
}

.post-outer {
    margin-bottom: 25px
}

.post-footer {
    border-bottom: 1px solid #ddd
}

.post-footer-line-1,
.post-footer-line-2,
.author-profile {
    margin-bottom: 10px
}

.post-labels,
.post-author,
.post-timestamp {
    font-weight: 700
}

.post-labels a,
.post-author a,
.post-timestamp a {
    font-weight: 400
}

.jump-link {
    float: right
}

.reactions-iframe {
    padding-top: 8px
}

.blog-feeds,
.post-feeds {
    margin-bottom: 25px
}

#comments {
    margin-top: 25px
}

#comments h4 {
    font-size: 20px;
    font-weight: 700
}

#comment-post-message {
    font-size: 16px !important;
    font-weight: normal !important
}

#sidebar {
    overflow: hidden
}

#sidebar ul li {
    margin: .25em 0 !important
}

#sidebar .widget {
    margin-bottom: 20px
}

#sidebar .widget h2 {
    font-size: 22px;
    margin-bottom: 10px;
    background: #f00;
    border-left: 6px solid #161619;
    color: #fff;
    padding: 5px 10px;
}

#sidebar .widget-content{
    margin-left:21px;
}

#sidebar .Profile .profile-img {
    margin: 0 10px 5px 2px !important
}

.quickedit,
span.blog-admin {
    display: none !important
}

.status-msg-wrap {
    font-size: 110%;
    width: 100%;
    margin: 35px auto 10px;
    position: relative;
    font-size: 15px
}

.status-msg-border {
    border: 1px solid #868686;
    filter: alpha(opacity=40);
    opacity: .4;
    width: 100%;
    position: relative
}

.status-msg-bg {
    background-color: #eee;
    opacity: .8;
    filter: alpha(opacity=30);
    width: 100%;
    position: relative;
    z-index: 1
}

.status-msg-body {
    color: #444;
    text-align: center;
    padding: .3em 10px;
    width: 100%;
    position: absolute;
    z-index: 4
}

.status-msg-hidden {
    visibility: hidden;
    padding: .3em 0
}

.status-msg-wrap a {
    padding-left: .4em;
    text-decoration: underline
}

p.note,
div.note {
    background: #ddd;
    padding: 15px 20px
}

p.alert,
div.alert {
    background: #f6f697;
    padding: 15px 20px
}

p.alert a:hover,
div.alert a:hover,
p.note a:hover,
div.note a:hover {
    text-decoration: none
}

p.note a,
p.alert a {
    color: #0a54ca
}

pre {
    background-color: #eee;
    width: 100%;
    white-space: pre;
    word-wrap: normal;
    margin-bottom: 0;
    line-height: 22px;
    overflow: auto;
    clear: both
}

pre code {
    display: block;
    padding: 0 15px 20px;
    border-radius: 3px;
    border: none;
    font-size: 15px;
    font-family: Consolas, "Courier New", monospace !important
}

img.frame {
    padding: .8em;
    background: #eee;
    border: 1px solid #ddd
}

img.thin_frame {
    padding: 5px;
    background: #eee;
    border: 1px solid #ddd
}

@media screen and (max-width:1040px) {

    .content-table,
    .content-row,
    .column {
        display: block
    }

    #blog-wrapper {
        width: 100%
    }

    #main {
        padding: 0 25px;
        width: 100%;
        margin: 25px auto 30px;
        display: block
    }

    .Blog {
        border-bottom: 1px solid #ddd
    }

    aside {
        float: none;
        clear: both;
        padding: 0;
        width: auto;
        margin: 0 25px;
        position: relative;
        border: none
    }

    .post-body {
        line-height: 30px
    }
}

@media screen and (max-width:900px) {
    .post-body {
        line-height: 29px
    }
}

@media screen and (max-width:800px) {
    .post-body {
        line-height: 28px
    }
}

@media screen and (max-width:650px) {
    .post-body {
        line-height: 27px
    }
}

@media screen and (max-width:500px) {
    .post-body {
        line-height: 26px
    }

    input[type="text"],
    input[type="number"],
    input[type="url"],
    input[type="tel"],
    input[type="email"],
    input[type="password"],
    select,
    textarea {
        width: 100%
    }

    img[align="left"],
    img[align="right"] {
        display: block;
        margin-right: auto;
        margin-left: auto;
        text-align: center;
        float: none;
        clear: both
    }
}

@media screen and (max-width:350px) {
    .post-body {
        line-height: 25px
    }
}

It is very easy to add JavaScript in blogger. Just use <script> tag.

<script>
        //All JavaScript Code
</script>

Now save your code, as i already mentioned. You have to save you document in .XML file.

Step 3: Uploading theme in your Blogger website.

To upload themes just follow these following steps.

Open Blogger Dashboard.
Open Theme page from menu.
Now click on the down down button . At the right side of the Customise Button.
Now click on the Restore.

Now you can see this theme.

Live Demo Download

That's it for this post. I hope you find this post helpful. Comment down if you are facing any problem.

Ticker

How to create a custom blogger theme from scratch?

Basic knowledge for theme

Code editor

Steps to create a custom theme

Step 1: Creating a basic structure layout.

Step 2: Adding styles and scripts in themes

Step 3: Uploading theme in your Blogger website.

Now you can see this theme.

Post a Comment

0 Comments

Search

Popular Posts

Facebook

Tags

Random Posts

Popular Posts

Footer Menu Widget

Ticker

How to create a custom blogger theme from scratch?

Basic knowledge for theme

Code editor

Steps to create a custom theme

Step 1: Creating a basic structure layout.

Step 2: Adding styles and scripts in themes

Step 3: Uploading theme in your Blogger website.

Now you can see this theme.

You may like these posts

Post a Comment

0 Comments

Follow Me

Search

Popular Posts

Facebook

Tags

Random Posts

Popular Posts

Footer Menu Widget