DEV Community

Cover image for Blogger Template Boilerplate / Skeleton Code
Muzammil
Muzammil

Posted on • Originally published at softwebtuts.blogspot.com

Blogger Template Boilerplate / Skeleton Code

If you are jumping into blogger template development then you need to have the basic blogger template layout that helps you to generate or make blogger templates.

I am having a tip for you. Want to know what's it?

You can find tutorials about blogger template development on my YouTube channel and website. If you want to learn complete blogger template development you can visit my channel and start learning blogger template development with me.

You will find tons of articles on google about blogger template development from scratch by coding or with any software but that's all useless!

No worry! because from now I will be with you and I am going to teach you how you can make blogger templates step by step.

I will teach you how you can make professional blogger templates not the basic ones.

If you want to have the skeleton code or boilerplate for blogger template development then the code provided below is enough.

<!DOCTYPE html>
<html
    b:defaultwidgetversion="2"
    b:layoutsVersion="3"
    b:responsive="true"
    b:templateVersion="1.0.0"
    expr:class="data:blog.languageDirection"
    expr:dir="data:blog.languageDirection"
    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>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Blog</title>
        <b:skin>
            <![CDATA[
            /* ------------------

            Template Name:
            Template Name Template URL: Template-URL
            Author: Author

            ------------------ */
            .container{width: 100%;}
            ]]>
            </b:skin>
    </head>
    <body>
        <div class="container">
            <header class="header-area">
                <b:section id="header" class="header" showaddelement="yes" name="HEADER" maxwidgets="3" />
            </header>

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

            <aside class="sidebar">
                <b:section id="sidebar" class="sidebar" showaddelement="yes" name="SIDEBAR" maxwidgets="3" />
            </aside>

            <footer class="footer">
                <b:section id="footer" class="footer" showaddelement="yes" name="FOOTER" maxwidgets="3" />
            </footer>
        </div>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode


`

Copy the code and then you will paste this code into the blogger template editor and save the changes then just refresh the page and you will get all the skeleton code that is used to make blogger templates.

You can also make your living by making and selling blogger templates online.

Conclusion:

This code will help you to be the first thing to start creating blogger templates and show your creativity.

If you want to learn more visit my YouTube channel.

Now please stop wasting your time in searching here and there and start learning everything with me.

Thanks!

Top comments (4)

Collapse
 
taufik_nurrohman profile image
Taufik Nurrohman

I have a friend who have made a tool to develop Blogger theme using Node.js. You might want to take a look… github.com/bloggerpack/bloggerpack

Collapse
 
muzammil profile image
Muzammil

I have seen the tool its awesome but its a little bit confusing for me. Is there any video of how to use it??

Collapse
 
taufik_nurrohman profile image
Taufik Nurrohman

Well, if you have a GitHub account, just ask him to add a video tutorial in the issue or discussion tab.

Collapse
 
fabbri profile image
Randy Angel Fabriel Escobar

muy bueno gracias!!!