banner



How To Make A Html Blogger Template

Website layout templateMillions of blogs are powered by Google's Blogger platform. The very showtime thing a visitor pay attention to while visiting a blog is its design or template. A expert custom-designed theme has the power to retain the visitors for a longer catamenia of times. Today, nosotros're going to learn to code a custom Blogger template. Our emphasis and focus will be primarily on the core template design concepts rather than going for a fancy design. This way, you'll be able to create different types of templates with unique designs. If you're already familiar with basic HTML and CSS, you tin can take your blueprint to the next level—quite easily. I need non say that you accept to attempt out these template designing exercises on a private demo web log. Afterwards on, you can consign and import it on the alive blog. If you're making such a template for the first time, avoid choosing a complex layout and start with a simpler i to get concord of the basics. Allow's get started and acquire to design a custom Blogger template—in a few piece of cake steps—that's fast and free from any bloat.

Website layout template
Almost all of the design concepts presented here can be applied to your existing templates too provided you exactly know what you're doing and how the introduced alter will affect the design and layout.

Now, quickly create a test weblog inside your Blogger dashboard to start the template designing procedure.

Create a Raw and Minimal Template Skeleton

We'll start with creating a raw skeleton of the template. It'll aid u.s.a. in understanding the structure and layout of the template —in an like shooting fish in a barrel way.

Use your favorite code editor to create this template. Let's showtime with the post-obit minimal construction.

                      <?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>  </head> <body>  </body> </html>        

The very first line of the template declares it as an XML document. Information technology's essential so that web browsers can parse and procedure the template code in a correct manner.

The next line <!DOCTYPE html> specifies that nosotros're going to apply HTML5 code within our XML document. Once over again, it helps web browsers process the template lawmaking in an efficient manner.

The attributes added to the <html> tag declares the XML namespace for the document. It too has the language attribute for the document. If you lot're coding your template in a language other than English, alter the language code.

The bare <head> tag section is where the web page'due south metadata volition become. Information technology includes various meta tags, CSS styles and scripts. We also have a bare <body> department where the pattern and layout will be coded.

Let'due south move on to the side by side step and add the basic and essential metadata to the <head> section.

                      <head>     <b:include information='web log' name='all-head-content' />     <title><data:blog.pageTitle/></title>     <meta content='width=device-width, initial-scale=ane' name='viewport' />     <b:skin>       <![CDATA[        /* Custom CSS rules goes hither... */       ]]>     </b:peel> </head>        

The very first <b:include> tag adds some of the about important SEO tags inside this section. It includes an all-important page description tag besides.

The next one is quite obvious and like shooting fish in a barrel-to-empathise. The <title> tag adds the page title to the head department. All these tags are of import for search engines and crawlers.

The <meta> tag having the attribute proper name='viewport' is added to activate the responsive design mode then that the layout renders—nicely—on smaller devices too.

The <b:skin> tag includes all the CSS lawmaking to create both the layout and pattern of the weblog. At present, it is empty and will be populated with the relevant CSS rules—at a later stage.

Now, permit'due south motility on to the <body> section and come across all the important elements within information technology.

The <trunk> section encapsulates all the elements—visible—to the site visitors within the web browser. You're free to add your preferred layout within this department.

Permit'due south start with the <header> department. It's unlike from the head department that contains the document's metadata.

                      <header>   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>     <b:widget id='Header1' locked='true' championship='' type='Header'></b:widget>   </b:section> </header>        

The <header> department includes the weblog's championship and description. Ane can also supervene upon them with a custom logo. You lot may notice a <b:section> tag. That's how we create different types of sections within a Blogger template.

Within this section, we've created a <b:widget> having an attribute type='Header' which includes all the functionality of a typical Blogger template header.

Adjacent ane is the primary web log posts section where all the written articles announced on the page. Here's how to create this section.

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

Yous tin can annotation that we've added the type='Weblog' attribute to the <b:widget> tag. It'due south a predefined attribute that automatically adds all the required functionality for this specific section.

It automatically generates the required content for the homepage, archive page, search page, and of course for the unmarried postal service folio.

Additional widgets can be added to this section because nosotros've added the showaddelement='yeah' attribute to the <b:department> tag. Bloggers often utilize this feature to add custom content either at the top or lesser of the post.

The adjacent important section is the sidebar that'll appear on the right side of the main content.

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

We've used the HTML5 <bated> tag for the sidebar. Though it is non mandatory to employ it and can exist hands replaced with a regular <div> tag, I'd highly recommend using information technology for this section.

Yous may notice that the sidebar section doesn't incorporate any widget. So, basically, we've created an empty sidebar which tin can be populated with the desired widgets through the dashboard interface.

And, final but not to the lowest degree is our footer section. Here's the code snippet.

                      <footer>   <div>     Copyright © 2019 <strong><data:weblog.title/></strong>   </div> </footer>        

Information technology's a simple footer department consisting of a copyright annunciation. Annotation the use of HTML5 <footer> tag for this one. The blog name is written—dynamically—afterward the copyright statement.

1 tin create a multi-cavalcade and widget-enabled footer department too. The complexity or flexibility of the layout entirely depends on your needs and on your technical skills.

So, hither's how the unabridged template code looks similar—at this stage.

                      <?xml version="1.0" encoding="UTF-8" ?>     <!DOCTYPE html>     <html lang='en-US' xmlns='http://world wide web.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' />         <championship>             <information:blog.pageTitle/>         </title>         <meta content='width=device-width, initial-calibration=1' proper noun='viewport' />         <b:skin>             <![CDATA[               /* Custom CSS code goes hither... */             ]]>         </b:skin>     </head>     <torso>         <div id="weblog-wrapper">             <header>                 <b:section class='header' id='header' maxwidgets='i' 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 form="content-row">                         <b:section grade='main column' id='main' showaddelement='yes'>                             <b:widget id='Blog1' locked='true' title='Web log Posts Department' type='Web log' />                         </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.championship/></strong>                 </div>             </footer>          </div>     </body>     </html>        

First of all, I've enclosed the content of the body section inside a <div> tag. Information technology's a wrapper for the entire blog construction.

You may note that I've encapsulated both the posts content section and the sidebar inside iii <div> tags. Each of these tags take been assigned some CSS classes and ids.

You may also note that a CSS class .cavalcade has been added to both the posts and sidebar section. All these new additions are used to properly create our blog'due south cadre layout structure with the help of custom CSS rules.

Before we move ahead to way our layout through CSS rules, permit's have a look at the mockup to get a fair thought almost information technology. It'll be a classic two-cavalcade layout by and large used for the blogs.

Classic two-column website layout mockup
All the custom CSS rules will be written between the <b:skin> tags every bit shown below. I've given a general overview (see below) virtually the order in which these CSS rules will appear.

                      <b:skin>   <![CDATA[    /*      one. CSS Reset     two. Core Layout Structure     3. Template Design     4. Utility Classes     5. Media Queries   */   ]]> </b:pare>        

Instead of presenting the entire CSS code—which is quite long—I've included the CSS rules for the core layout structure. Accept a look!

                      /* Template's Core Layout */  #blog-wrapper {      width: 1024px;      margin: 0 auto; }  #content-wrapper {      width: 100%;      elevation: 100%;      overflow: subconscious; }  .content-table {      brandish: table;      border-collapse: split; }  .content-row {      display: table-row; }  #main {      padding: 25px 25px 25px 20px;      width: auto;      peak: 100%;      display: table-jail cell; }  aside {      width: 32%;      height: 100%;      edge-left: 1px solid #ddd;      padding: 25px;      display: table-cell; }  footer {      width: 100%;      clear: both;      border-top: 1px solid #ddd;      padding: 20px; }        

You tin closely audit all the CSS rules inside the template file which is bachelor every bit a download at the end of this tutorial. And, here's a partial screenshot of the template.

A blog's homepage layout

Template'due south Live Demo

Download This Template

You're gratuitous to extend and redistribute this template. Blogger template designing is not that hard and one can get started with it with the basic knowledge of HTML and CSS. Promise yous found this tutorial—useful.

How To Make A Html Blogger Template,

Source: https://www.freshtechtips.com/2018/11/create-custom-blogger-template.html

Posted by: robbinsangleatild.blogspot.com

0 Response to "How To Make A Html Blogger Template"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel