We're going to learn to code a custom Blogger template. If you're already familiar with basic HTML and CSS,then its gonna be quite easily for you. Let's get started and learn to design a custom Blogger template—in a few easy steps:
We'll create and understand the basic structure and layout of the template —in an easy way.
The very first line of the template declares it as an XML document.
The next line is used to specify HTML5 code within our XML document.It helps web browsers process the template code in an efficient manner.
The attribute added to html tag declares the XML namespace for the document. It also has the language attribute for the document.
The blank head tag section is where the web page's metadata will go. It includes various meta tags, CSS styles and scripts.
Then we have blank body tag section where design of blog and layout will be coded.
The b:include tag adds some of the most important SEO tags within this section. It includes an all-important page description tag too.
The title tag adds the page title to the head section. All these tags are important for search engines and crawlers.
The meta tag with name attribute and value viewport is added to activate the responsive design mode so that the layout renders nicely on smaller devices too.
The b:skin tag includes all the CSS code to create both the layout and design of the blog.
The body tag section encapsulates all the elements visible—to the site visitors within the web browser.
The header section includes the blog's title and description. One can also replace them with a custom logo.
The b:section tag within the header tag is used to create different types of sections within a template.
Next one is the primary blog posts section where all the written articles appear on the page. Here's how to create this section. For that we use b:widget tag.
The next important section is the sidebar that'll appear on the right side of the primary content.For side bar we can use aside tag or div tag.
All the custom CSS rules will be written between the b:skin tags
And, last but not least is our footer section.The entire template code looks like.
<?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 © 2019 <strong><data:blog.title/></strong>
</div>
</footer>
</div>
</body>
</html>Our blog will be a classic two-column layout generally used for the blogs
0 Comments