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.3.0"
b:templateUrl='indie.xml'
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 version='1.3.0'>
<![CDATA[
/* ------------------
Template Name:
Template Name Template URL: Template-URL
Author: Author
------------------ */
<!-- Variable definitions -->
<Group description="Default Customization Vars">
<Variable name="body.background" description="Body Background" type="background" color="#dddfe2" default="#dddfe2 none repeat scroll top left" value="#dddfe2 none repeat scroll top left"/>
<Variable name="body.font" description="Font" type="font" default="normal 400 14px Roboto, Arial, sans-serif" value="normal 400 14px Arial,sans-serif"/>
<Variable name="body.text.color" description="Text Color" type="color" default="#1d2129" value="#1d2129"/>
<Variable name="body.text.font" description="1" type="font" default="$(body.font)" value="normal 400 14px Roboto,Arial,sans-serif"/>
<Variable name="posts.background.color" description="2" type="color" default="#fff" value="#ffffff"/>
<Variable name="body.link.color" description="3" type="color" default="#008c5f" value="#008c5f"/>
<Variable name="body.link.visited.color" description="4" type="color" default="#008c5f" value="#008c5f"/>
<Variable name="body.link.hover.color" description="5" type="color" default="#1d2129" value="#1d2129"/>
<Variable name="blog.title.font" description="6" type="font" default="$(body.text.font)" value="normal 400 14px Roboto, Arial, sans-serif"/>
<Variable name="blog.title.color" description="7" type="color" default="#fff" value="#ffffff"/>
<Variable name="header.icons.color" description="8" type="color" default="#fff" value="#ffffff"/>
<Variable name="tabs.font" description="9" type="font" default="$(body.text.font)" value="normal 400 14px Arial,sans-serif"/>
<Variable name="tabs.color" description="10" type="color" default="#ccc" value="#cccccc"/>
<Variable name="tabs.selected.color" description="11" type="color" default="#fff" value="#ffffff"/>
<Variable name="tabs.overflow.background.color" description="12" type="color" default="#fff" value="#ffffff"/>
<Variable name="tabs.overflow.color" description="13" type="color" default="$(body.text.color)" value="#1d2129"/>
<Variable name="tabs.overflow.selected.color" description="14" type="color" default="$(body.text.color)" value="#1d2129"/>
<Variable name="posts.title.color" description="15" type="color" default="$(body.text.color)" value="#1d2129"/>
<Variable name="posts.title.font" description="16" type="font" default="$(body.text.font)" value="normal 400 14px Arial,sans-serif"/>
<Variable name="posts.text.font" description="17" type="font" default="$(body.text.font)" value="normal 400 14px Arial,sans-serif"/>
<Variable name="posts.text.color" description="18" type="color" default="$(body.text.color)" value="#1d2129"/>
<Variable name="posts.icons.color" description="19" type="color" default="$(body.text.color)" value="#6c6f74"/>
<Variable name="labels.background.color" description="20" type="color" default="#008c5f" value="#008c5f"/>
</Group>
/* Your Style Code Starts Here */
.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>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 earn your living by making and selling blogger templates online.
Conclusion:
This code will help you 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.
Hi Muzzammil can you please explain each one below, what is it for? How it works? b:defaultwidgetversion="2" b:layoutsVersion="3" b:responsive="true" b:templateVersion="1.3.0" b:templateUrl='indie.xml'
b:defaultwidgetversion="2" Sets the default widget version so you don't need to specify each time you make or add new widget. b:layoutsVersion="3" This attribute makes layout section of your blogger dashboard to new design which was lastly updated y blogger team. b:responsive="true" This attributes specifies your site is responsive or not so that blogger auto adds viewport meta tags. b:templateVersion="1.3.0" This attribute is used to assign template version for your template. Usually it was made for default templates but you can also use it for your custome template. b:templateUrl='indie.xml' This attribute can only be used for default blogger templates. The file for the template so that all the assets related to that file or template can be fetched from blogger assets directory.
Bro final code bhi dete chalo har video ke please
Hlo
Amazing bro you are great
Thanks for your compliments and if you want to learn mark{blogger template development} you can visit my mark{youtube channel} and subscribe it because i am starting blogger template development series there.