Designing a Blogger theme from scratch is not as difficult as you might imagine. Blogger is a well-known blog-publishing service that allows the users to create amazing blogs for free. However, a little HTML, CSS and Javascript coding knowledge is required. It's not that tough. Once you make your mind to learn "How to create Blogger theme from scratch", with some basic concepts, you are ready to go.
How Blogger Works?
When we submit the template XHTML code to the blogger it is stored in the blogger database. When the blog is requested via a browser, the Blogger Parser parses the code and sends back the HTML output of the parsed XML code which will be displayed in the browser.
What You'll Learn in This Tutorial
I this tutorial, I am using my own style. I am breaking away from the traditional way of creating a Blogger theme. With my style, you can build any type of modern websites.
- Learn how to build a responsive theme powered by Bootstrap
- Add Sidebar and Widgets
- Custom codes, Post Loop and Conditional Tags
- Post with Sidebar and no sidebar based on label
- Full Width Pages
- Post Navigation
- And many more
Step 1: Syntax for Basic Layout
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' 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 content='width=device-width, initial-scale=1, shrink-to-fit=no' name='viewport'/>
<title><data:view.title.escaped/></title>
</head>
<body>
<!-- BODY CONTENTS -->
</body>
</html>
Step 2: Adding Sections
A Blogger theme can be divided into four sections. The basic sections are: Header, Content, Footer, Sidebar. You will use the Widget element to define the content in a section. Note that you can't use HTML within a section. But around a section, it's permissible to use HTML.
<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
<!-- Section contents -->
</b:section>
<b:section id='main' class='main' maxwidgets="1" showaddelement="no">
<!-- Section contents -->
</b:section>
<b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes">
</b:section>
<b:section id='footer' class='footer' showaddelement="no">
<!-- Section contents -->
</b:section>
Step 2: Adding Widgets
A widget is the main part which displays real data for section. It works as a placeholder. Section only defines the layout elements. Some default widgets are available in blogger. However, you can also create your own custom widget.
Widgets are included within a section. The syntax to add a widget in a section will be somewhat like this:
<b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes">
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
</b:section>
Adding The Main Blog Post Widget
Remember, I am using a custom Blog post type widget.
<b:section class='main' id='main' maxwidgets='1' name='Main section' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='showDateHeader'>false</b:widget-setting>
<b:widget-setting name='style.textcolor'>#000000</b:widget-setting>
<b:widget-setting name='showShareButtons'>false</b:widget-setting>
<b:widget-setting name='showCommentLink'>true</b:widget-setting>
<b:widget-setting name='style.urlcolor'>#008000</b:widget-setting>
<b:widget-setting name='postLocationLabel'/>
<b:widget-setting name='showAuthor'>false</b:widget-setting>
<b:widget-setting name='disableGooglePlusShare'>true</b:widget-setting>
<b:widget-setting name='style.linkcolor'>#0000ff</b:widget-setting>
<b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
<b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='timestampLabel'/>
<b:widget-setting name='showAuthorProfile'>false</b:widget-setting>
<b:widget-setting name='style.layout'>1x1</b:widget-setting>
<b:widget-setting name='showLabels'>true</b:widget-setting>
<b:widget-setting name='showLocation'>true</b:widget-setting>
<b:widget-setting name='postLabelsLabel'/>
<b:widget-setting name='showTimestamp'>false</b:widget-setting>
<b:widget-setting name='postsPerAd'>1</b:widget-setting>
<b:widget-setting name='showBacklinks'>false</b:widget-setting>
<b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showInlineAds'>false</b:widget-setting>
<b:widget-setting name='showReactions'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'>
<b:if cond='data:posts.notEmpty'>
<b:loop values='data:posts' var='post'>
</b:loop>
</b:if>
</b:includable>
<b:includable id='aboutPostAuthor'/>
<b:includable id='addComments'/>
<b:includable id='commentAuthorAvatar'/>
<b:includable id='commentDeleteIcon'/>
<b:includable id='commentForm'/>
<b:includable id='commentFormIframeSrc'/>
<b:includable id='commentItem'/>
<b:includable id='commentList'/>
<b:includable id='commentPicker'/>
<b:includable id='comments'/>
<b:includable id='commentsTitle'/>
<b:includable id='feedLinks'/>
<b:includable id='feedLinksBody'/>
<b:includable id='homePageLink'/>
<b:includable id='iframeComments'/>
<b:includable id='inlineAd'/>
<b:includable id='nextPageLink'/>
<b:includable id='post'/>
<b:includable id='postBody'/>
<b:includable id='postBodySnippet'/>
<b:includable id='postCommentsAndAd'/>
<b:includable id='postCommentsLink'/>
<b:includable id='postFooter'/>
<b:includable id='postFooterAuthorProfile'/>
<b:includable id='postHeader'/>
<b:includable id='postMeta'/>
<b:includable id='postPagination'/>
<b:includable id='postTitle'/>
<b:includable id='previousPageLink'/>
<b:includable id='threadedCommentForm'/>
<b:includable id='threadedCommentJs'/>
<b:includable id='threadedComments'/>
</b:widget>
</b:section>
Complete Skeleton Structure of Blogger Theme
Here's a complete skeleton structure of Blogger theme. From this point onwards, if you know coding, you will need no further assistant from me. But don't worry...
In my next post - part 2, I will tell you how to add CSS style sheet, Navigation bar, adding columns and more.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' 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 content='width=device-width, initial-scale=1, shrink-to-fit=no' name='viewport'/>
<title><data:view.title.escaped/></title>
</head>
<body>
<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
<!-- Section contents -->
</b:section>
<b:section class='main' id='main' maxwidgets='1' name='Main section' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='showDateHeader'>false</b:widget-setting>
<b:widget-setting name='style.textcolor'>#000000</b:widget-setting>
<b:widget-setting name='showShareButtons'>false</b:widget-setting>
<b:widget-setting name='showCommentLink'>true</b:widget-setting>
<b:widget-setting name='style.urlcolor'>#008000</b:widget-setting>
<b:widget-setting name='postLocationLabel'/>
<b:widget-setting name='showAuthor'>false</b:widget-setting>
<b:widget-setting name='disableGooglePlusShare'>true</b:widget-setting>
<b:widget-setting name='style.linkcolor'>#0000ff</b:widget-setting>
<b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
<b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='timestampLabel'/>
<b:widget-setting name='showAuthorProfile'>false</b:widget-setting>
<b:widget-setting name='style.layout'>1x1</b:widget-setting>
<b:widget-setting name='showLabels'>true</b:widget-setting>
<b:widget-setting name='showLocation'>true</b:widget-setting>
<b:widget-setting name='postLabelsLabel'/>
<b:widget-setting name='showTimestamp'>false</b:widget-setting>
<b:widget-setting name='postsPerAd'>1</b:widget-setting>
<b:widget-setting name='showBacklinks'>false</b:widget-setting>
<b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showInlineAds'>false</b:widget-setting>
<b:widget-setting name='showReactions'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'>
<b:if cond='data:posts.notEmpty'>
<b:loop values='data:posts' var='post'>
</b:loop>
</b:if>
</b:includable>
<b:includable id='aboutPostAuthor'/>
<b:includable id='addComments'/>
<b:includable id='commentAuthorAvatar'/>
<b:includable id='commentDeleteIcon'/>
<b:includable id='commentForm'/>
<b:includable id='commentFormIframeSrc'/>
<b:includable id='commentItem'/>
<b:includable id='commentList'/>
<b:includable id='commentPicker'/>
<b:includable id='comments'/>
<b:includable id='commentsTitle'/>
<b:includable id='feedLinks'/>
<b:includable id='feedLinksBody'/>
<b:includable id='homePageLink'/>
<b:includable id='iframeComments'/>
<b:includable id='inlineAd'/>
<b:includable id='nextPageLink'/>
<b:includable id='post'/>
<b:includable id='postBody'/>
<b:includable id='postBodySnippet'/>
<b:includable id='postCommentsAndAd'/>
<b:includable id='postCommentsLink'/>
<b:includable id='postFooter'/>
<b:includable id='postFooterAuthorProfile'/>
<b:includable id='postHeader'/>
<b:includable id='postMeta'/>
<b:includable id='postPagination'/>
<b:includable id='postTitle'/>
<b:includable id='previousPageLink'/>
<b:includable id='threadedCommentForm'/>
<b:includable id='threadedCommentJs'/>
<b:includable id='threadedComments'/>
</b:widget>
</b:section>
<b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes">
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
</b:section>
<b:section id='footer' class='footer' showaddelement="no">
<!-- Section contents -->
</b:section>
</body>
</html>
