How to create blogger template from scratch

In this article I share my own blogger template which currently using in this blog. I used HTML5, CSS and Blogger tags for build blog design and its fully customize, please change this blog template as per your blog design.
template.xml
1 <?xml version="1.0" encoding="UTF-8" ?>
2 <!DOCTYPE html>
3 <html>
4     <head>
5         <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'/>
6         <meta content='follow, index' name='robots'/>
7         <title><data:blog.pageTitle/></title>
8         <b:if cond='data:blog.pageType == "index"'>
9         <meta name='title' expr:content='data:blog.pageTitle'/>
10         <b:else/>
11         <meta name='title' expr:content='data:blog.pageName'/>
12         </b:if>
13         <meta name='description' expr:content='data:view.description.escaped'/>
14         <meta property='og:type' content='website'/>
15         <meta property='og:site_name' content='data:blog.title'/>
16         <meta property='og:url' expr:content='data:blog.url'/>
17         <b:if cond='data:blog.pageType == "index"'>
18         <meta property='og:title' expr:content='data:blog.pageTitle'/>
19         <b:else/>
20         <meta property='og:title' expr:content='data:blog.pageName'/>
21         </b:if>
22         <meta property='og:description' expr:content='data:view.description.escaped'/>
23         <link rel='preconnect' href='https://fonts.googleapis.com'/>
24         <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin='anonymous'/>
25         <link href='https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&amp;display=swap' rel='stylesheet'/>
26         <b:skin><![CDATA
27         
28         /* General */
29         body {
30         margin:0px;
31         padding:0px;
32         display:flex;
33         flex-direction:column;
34         font-family: 'Roboto', sans-serif;
35         line-height:1.6;
36         font-size:17px;
37         color:#14171a;
38         }
39 
40         h1, h2, h4 {
41         margin:0px;
42         padding:0px;
43         }
44 
45         /* Ahref */
46         a {
47         text-decoration:none;
48         color:inherit;
49         }
50 
51         /* Layout */
52         nav, main, footer {
53         width:1053px;
54         margin-left:auto;
55         margin-right:auto;
56         }
57 
58         header {
59         border-bottom:1px solid #aab8c2;
60         margin-bottom:20px;
61         }
62 
63         nav {
64         display:flex;
65         flex-direction:row;
66         font-family:Verdana;
67         }
68 
69         #leftnav {
70         flex:0 auto;
71         margin-top:auto;
72         margin-bottom:auto;
73         text-align:left;
74         font-weight:bold;
75         font-size:35px;
76         }
77 
78         #rightnav {
79         flex:1 auto;
80         margin-top:auto;
81         margin-bottom:auto;
82         text-align:right;
83         font-size:16px;
84         }
85 
86         #rightnav  a {
87         margin-left:15px;
88         }
89 
90         main {
91         display:flex;
92         flex-direction:row;
93         }
94 
95         section {
96         width:753px;
97         line-height:25px;
98         }
99 
100         #innersection {
101         padding-right:25px;
102         }
103 
104         aside {
105         width:300px;
106         line-height:25px;
107         }
108 
109         footer {
110         font-size:15px;
111         border-top:1px solid #aab8c2;
112         margin-top:20px;
113         padding-top:10px;
114         padding-bottom:10px;
115         }
116 
117         /* SVG */
118         .svg-icon-left-post {
119         width:20px;
120         height:20px;
121         }
122 
123         .svg-icon-left-post path {
124         fill:#FFFFFF;
125         }
126 
127         .svg-icon-post {
128         width:20px;
129         height:20px;
130         padding:5px;
131         }
132 
133         .svg-icon-post path {
134         fill:#FFFFFF;
135         }
136 
137         /* Social Media - Share */
138         .social-icon-bar {
139         position:fixed;
140         top:50%;
141         -webkit-transform:translateY(-50%);
142         -ms-transform:translateY(-50%);
143         transform:translateY(-50%);
144         }
145 
146         .social-icon-bar a {
147         display:block;
148         text-align:center;
149         padding:14px;
150         transition:all 0.3s ease;
151         color:white;
152         }
153 
154         .social-icon-bar a:hover {
155         background-color:#000;
156         }
157 
158         .facebook {
159         background:#3B5998;
160         }
161 
162         .twitter {
163         background:#55ACEE;
164         }
165 
166         .tumblr {
167         background:#314358;
168         }
169 
170         /* Social Media - Follow */
171         #media {
172         margin:0px;
173         padding:0px;
174         }
175 
176         #media li {
177         display:inline-block;
178         }
179 
180         #media svg {
181         width:40px;
182         }
183 
184         /* Section */
185         section h1, section h2 {
186         font-size:30px;
187         line-height:1.4;
188         }
189 
190         section h4 {
191         font-size:16px;
192         }
193 
194         time {
195         font-size:15px;
196         }
197 
198         article {
199         margin-bottom:50px;
200         text-align:justify;
201         overflow-wrap:break-word;
202         }
203 
204         section h1, section h2 {
205         text-align:initial;
206         }
207 
208         #blog-pager {
209         font-weight:700;
210         font-size:25px;
211         }
212 
213         #blog-pager a {
214         color:#1da1f2; 
215         }
216 
217         /* Related Post */
218         #relatedposts ul, #relatedposts ul li {
219         margin:0px;
220         padding:0px;
221         list-style:none;
222         }
223 
224         #relatedposts a {
225         font-size:16px;
226         }
227 
228         /* Comment */
229         .comments {
230         font-size:15px;
231         border-top:2px dashed #14171a;
232         margin-top:10px;
233         padding-top:10px;
234         }
235 
236         .comment-block {
237         border:2px dashed #6DB72C;
238         padding:10px;
239         }
240 
241         .datetime a {
242         color:#aab8c2;
243         font-size:14px;
244         }
245 
246         /* Aside */
247         aside {
248         font-size:15px;
249         }
250 
251         .normalbox {
252         margin-bottom:20px;
253         }
254 
255         aside h4 {
256         font-size:16px;
257         }
258 
259         .label {
260         color:#14171a;
261         background-color:#e1e8ed;
262         text-align:center;
263         cursor:pointer;
264         border-radius:3px;
265         padding:4px;
266         line-height:2.2;
267         }
268 
269         #PopularPosts1 ul, #PopularPosts1 ul li {
270         margin:0px;
271         padding:0px;
272         list-style:none;
273         }
274 
275         #PopularPosts1 ul li {
276         margin-bottom:4px;
277         }
278 
279         /* Code */
280         .codebox {
281         margin-top:8px;
282         margin-bottom:8px;
283         font-size:16px;
284         }
285 
286         .fN {
287         color:#21094e;
288         margin-bottom:5px;
289         }
290 
291         .code {
292         padding:16px;
293         overflow:auto;
294         color:#59D9D1;
295         background-color:#000000;
296         border-left:5px solid #605a56;
297         }
298 
299         pre {
300         margin:0px;
301         padding:0px;
302         }
303 
304         .lI {
305         color:#ffffff;
306         }
307 
308         .kC {
309         color:#F5D67B;
310         }
311 
312         .cC {
313         color:#b8b0b0;
314         }
315 
316         .qC {
317         color:#FC7038;
318         }
319 
320         .pC {
321         color:#F5D67B;
322         }
323 
324         .iPC {
325         color:#F5D67B;
326         }
327 
328         .bC {
329         color:#F5D67B;
330         }
331 
332         .iBC {
333         color:#F5D67B;
334         }
335 
336         /* Download */
337         #download {
338         margin-top:10px;
339         margin-bottom:5px;
340         }
341         
342         #download a {
343         background-color:#25d366;
344         color:black;
345         text-align:center;
346         font-size:16px;
347         cursor:pointer;
348         font-weight:bold;
349         padding:5px;
350         border-radius:3px;
351         }
352 
353         /* Mobile */
354         @media (max-width: 768px) {
355             body {
356             padding-left:15px;
357             padding-right:15px;
358             }
359 
360             nav, main, footer {
361             width:100%;
362             }
363 
364             nav, main {
365             flex-direction:column;
366             }
367 
368             #leftnav, #rightnav {
369             width:100%;
370             text-align:center;
371             }
372 
373             #rightnav {
374             overflow-x:auto;
375             white-space:nowrap;
376             }
377 
378             section, aside {
379             width:100%;
380             }
381 
382             #innersection {
383             padding-right:0px;
384             }
385 
386             #blog-pager {
387             font-size:22px;
388             }
389         }
390 
391         ]></b:skin>
392     </head>
393     <body>
394         <!-- Header -->
395         <header>
396             <nav>
397                 <div id='leftnav'>
398                     <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>
399                 </div>
400                 <div id='rightnav'>
401                     <a href=''>Link 1</a>
402                     <a href=''>Link 2</a>
403                     <a href=''>Link 3</a>
404                     <a href=''>Link 4</a>
405                 </div>
406             </nav>
407         </header>
408         <b:if cond='data:view.isError'>
409         <b:else/>
410             <b:if cond='data:blog.pageType == "index"'>
411             <b:else/>
412                 <b:if cond='data:blog.isMobileRequest == "false"'>
413                     <!-- Social Media Share Links -->
414                     <div class='social-icon-bar'>
415                     <a class='facebook' expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:blog.url' rel='noopener' target='_blank' title='Share to Facebook'><svg class='svg-icon-left-post' viewBox='0 0 20 20'><path d='M11.344,5.71c0-0.73,0.074-1.122,1.199-1.122h1.502V1.871h-2.404c-2.886,0-3.903,1.36-3.903,3.646v1.765h-1.8V10h1.8v8.128h3.601V10h2.403l0.32-2.718h-2.724L11.344,5.71z' fill='none'/></svg></a>
416                     <a class='twitter' expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&amp;text=" + data:blog.pageName' rel='noopener' target='_blank' title='Share to Twitter'><svg class='svg-icon-left-post' viewBox='0 0 20 20'><path d='M18.258,3.266c-0.693,0.405-1.46,0.698-2.277,0.857c-0.653-0.686-1.586-1.115-2.618-1.115c-1.98,0-3.586,1.581-3.586,3.53c0,0.276,0.031,0.545,0.092,0.805C6.888,7.195,4.245,5.79,2.476,3.654C2.167,4.176,1.99,4.781,1.99,5.429c0,1.224,0.633,2.305,1.596,2.938C2.999,8.349,2.445,8.19,1.961,7.925C1.96,7.94,1.96,7.954,1.96,7.97c0,1.71,1.237,3.138,2.877,3.462c-0.301,0.08-0.617,0.123-0.945,0.123c-0.23,0-0.456-0.021-0.674-0.062c0.456,1.402,1.781,2.422,3.35,2.451c-1.228,0.947-2.773,1.512-4.454,1.512c-0.291,0-0.575-0.016-0.855-0.049c1.588,1,3.473,1.586,5.498,1.586c6.598,0,10.205-5.379,10.205-10.045c0-0.153-0.003-0.305-0.01-0.456c0.7-0.499,1.308-1.12,1.789-1.827c-0.644,0.28-1.334,0.469-2.06,0.555C17.422,4.782,17.99,4.091,18.258,3.266' fill='none'/></svg></a>
417                     <a class='tumblr' expr:href='"https://www.tumblr.com/share?v=3&amp;u=" + data:blog.url + "&amp;t=" + data:blog.pageName' rel='noopener' target='_blank' title='Share to Tumblr'><svg class='svg-icon-left-post' viewBox='0 0 20 20'><path d='M11.039,14.123c-0.231-0.129-0.414-0.303-0.498-0.518C10.53,13.568,10.54,9.17,10.54,9.17h3.253V6.75h-3.25V3.5L8.474,3.512C8.386,4.181,8.225,4.733,7.991,5.167C7.756,5.601,7.445,5.972,7.059,6.281C6.673,6.592,6.208,6.828,5.665,6.994l0.001,2.194L7.293,9.17v4.215c0,0.594,0.067,1.047,0.198,1.359c0.133,0.312,0.37,0.607,0.713,0.887c0.343,0.277,0.757,0.49,1.242,0.639c0.484,0.15,1.008,0.23,1.64,0.23c0.555,0,1.006-0.057,1.484-0.164c0.479-0.104,1.165-0.287,1.756-0.549l0.009-1.996c-0.692,0.428-1.549,0.59-2.247,0.59C11.693,14.381,11.344,14.293,11.039,14.123' fill='none'/></svg></a>
418                     </div>
419                 </b:if>
420             </b:if>
421         </b:if>
422         <main>
423            <!-- Section -->
424             <section>
425                 <div id='innersection'>
426                 <b:if cond='data:view.isError'>
427                     Oops no result found !
428                 <b:else/>
429                     <b:section id='content-section'>
430                         <b:widget id='Blog1'>
431                         <b:includable id='main'>
432                             <b:loop values='data:posts' var='post'>
433                                 <article>
434                                 <time><data:post.timestamp/></time>
435                                 <b:if cond='data:blog.pageType == "index"'>
436                                 <h2><a expr:href='data:post.url' rel='follow'><data:post.title/></a></h2>
437                                 <b:else/>
438                                 <h1><data:post.title/></h1>
439                                 </b:if>
440                                 <data:post.body/>
441                                 <b:if cond='data:blog.pageType != "index"'>
442                                 <b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comment_picker'/>	
443                                 </b:if>
444                                 </article>
445                             </b:loop>
446                             <div id='blog-pager'>
447                                 <b:if cond='data:newerPageUrl'>
448                                 <span id='blog-pager-newer-link'>								
449                                 <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' rel='follow' title='Newer Post'>Newer Post</a>
450                                 </span>
451                                 </b:if>
452                                 <b:if cond='data:olderPageUrl'>
453                                 <span id='blog-pager-older-link'>
454                                 <a class='blog-pager-older-link' expr:href='data:olderPageUrl' rel='follow' title='Older Post'>Older Post</a>
455                                 </span>
456                                 </b:if>
457                                 <a class='home-link' expr:href='data:blog.homepageUrl' rel='follow'>Home</a>
458                             </div>
459                         </b:includable>
460                         </b:widget>
461                     </b:section>
462                 </b:if>
463                 </div>
464             </section>
465             <!-- Aside -->
466             <aside>
467                 <!-- Social Media -->
468                 <div class='normalbox'>
469                     <h4>Follow Us</h4>
470                     <ul id='media'>
471                         <li><a href='' title='Twitter'><svg fill='#14171a' viewBox='0 0 512 512'><path d='M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36 -12.6 7.5-26.5 12.9-41.3 15.8 -11.9-12.6-28.8-20.6-47.5-20.6 -42 0-72.9 39.2-63.4 79.9 -54.1-2.7-102.1-28.6-134.2-68 -17 29.2-8.8 67.5 20.1 86.9 -10.7-0.3-20.7-3.3-29.5-8.1 -0.7 30.2 20.9 58.4 52.2 64.6 -9.2 2.5-19.2 3.1-29.4 1.1 8.3 25.9 32.3 44.7 60.8 45.2 -27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 29.2 120.8 0 189.1-102.1 185-193.6C399.9 193.1 410.9 181.7 419.6 168.6z'/></svg></a></li>
472                         <li><a href='' title='GitHub'><svg fill='#14171a' viewBox='0 0 512 512'><path d='M256 70.7c-102.6 0-185.9 83.2-185.9 185.9 0 82.1 53.3 151.8 127.1 176.4 9.3 1.7 12.3-4 12.3-8.9V389.4c-51.7 11.3-62.5-21.9-62.5-21.9 -8.4-21.5-20.6-27.2-20.6-27.2 -16.9-11.5 1.3-11.3 1.3-11.3 18.7 1.3 28.5 19.2 28.5 19.2 16.6 28.4 43.5 20.2 54.1 15.4 1.7-12 6.5-20.2 11.8-24.9 -41.3-4.7-84.7-20.6-84.7-91.9 0-20.3 7.3-36.9 19.2-49.9 -1.9-4.7-8.3-23.6 1.8-49.2 0 0 15.6-5 51.1 19.1 14.8-4.1 30.7-6.2 46.5-6.3 15.8 0.1 31.7 2.1 46.6 6.3 35.5-24 51.1-19.1 51.1-19.1 10.1 25.6 3.8 44.5 1.8 49.2 11.9 13 19.1 29.6 19.1 49.9 0 71.4-43.5 87.1-84.9 91.7 6.7 5.8 12.8 17.1 12.8 34.4 0 24.9 0 44.9 0 51 0 4.9 3 10.7 12.4 8.9 73.8-24.6 127-94.3 127-176.4C441.9 153.9 358.6 70.7 256 70.7z'/></svg></a></li>
473                         <li><a href='' title='Facebook'><svg fill='#14171a' viewBox='0 0 512 512'><path d='M211.9 197.4h-36.7v59.9h36.7V433.1h70.5V256.5h49.2l5.2-59.1h-54.4c0 0 0-22.1 0-33.7 0-13.9 2.8-19.5 16.3-19.5 10.9 0 38.2 0 38.2 0V82.9c0 0-40.2 0-48.8 0 -52.5 0-76.1 23.1-76.1 67.3C211.9 188.8 211.9 197.4 211.9 197.4z'/></svg></a></li>
474                         <li><a href='' title='RSS'><svg fill='#14171a' viewBox='0 0 512 512'><path d='M201.8 347.2c0 20.3-16.5 36.8-36.8 36.8 -20.3 0-36.8-16.5-36.8-36.8s16.5-36.8 36.8-36.8C185.3 310.4 201.8 326.8 201.8 347.2zM128.2 204.7v54.5c68.5 0.7 124 56.3 124.7 124.7h54.5C306.7 285.3 226.9 205.4 128.2 204.7zM128.2 166.6c57.9 0.3 112.3 22.9 153.2 63.9 41 41 63.7 95.5 63.9 153.5h54.5c-0.3-149.9-121.7-271.4-271.6-271.9V166.6L128.2 166.6z'/></svg></a></li>
475                         <li><a href='' title='Email'><svg fill='#14171a' viewBox='0 0 512 512'><path d='M101.3 141.6v228.9h0.3 308.4 0.8V141.6H101.3zM375.7 167.8l-119.7 91.5 -119.6-91.5H375.7zM127.6 194.1l64.1 49.1 -64.1 64.1V194.1zM127.8 344.2l84.9-84.9 43.2 33.1 43-32.9 84.7 84.7L127.8 344.2 127.8 344.2zM384.4 307.8l-64.4-64.4 64.4-49.3V307.8z'/></svg></a></li>                    
476                         <li><a href='' title='YouTube'><svg fill='#14171a' viewBox='0 0 512 512'><path d='M422.6 193.6c-5.3-45.3-23.3-51.6-59-54 -50.8-3.5-164.3-3.5-215.1 0 -35.7 2.4-53.7 8.7-59 54 -4 33.6-4 91.1 0 124.8 5.3 45.3 23.3 51.6 59 54 50.9 3.5 164.3 3.5 215.1 0 35.7-2.4 53.7-8.7 59-54C426.6 284.8 426.6 227.3 422.6 193.6zM222.2 303.4v-94.6l90.7 47.3L222.2 303.4z'/></svg></a></li>
477                     </ul>
478                 </div>
479                 <!-- Label -->
480                 <div class='normalbox'>
481                     <h4>Label</h4>
482                     <b:section id='label-section'>
483                     <b:widget id='Label1'>
484                         <b:includable id='main'>
485                         <b:loop values='data:labels' var='label'>
486                         <a class='label' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
487                         </b:loop>
488                         </b:includable>
489                     </b:widget>
490                     </b:section>
491                 </div>
492                 <!-- Popular Post -->
493                 <div class='normalbox'>
494                     <h4>Popular Posts</h4>
495                     <b:section id='popularpost-section'>
496                     <b:widget id='PopularPosts1'>
497                         <b:includable id='main'>
498                         <ul>
499                         <b:loop values='data:posts' var='post'>
500                         <li><a expr:href='data:post.href'><data:post.title/></a></li>
501                         </b:loop>
502                         </ul>
503                         </b:includable>
504                     </b:widget>
505                     </b:section>
506                 </div>
507             </aside>
508         </main>
509         <footer>
510         Copyright &#9400; <data:blog.title/> | Powered by <a href='https://www.blogger.com'>Blogger.com</a>
511         </footer>
512         <!-- Share API -->
513         <script type='text/javascript'>
514         if(navigator.share) {
515             document.getElementById('share').addEventListener('click',  => {
516                 navigator.share{
517                     url: '<data:blog.url/>',
518                     <b:if cond='data:blog.pageType == "index"'>
519                     title: '<data:blog.pageTitle/>',
520                     <b:else/>
521                     title: '<data:blog.pageName/>',
522                     </b:if>
523                     text: '<data:view.description.escaped/>'
524                 };
525             });
526         }
527         </script>
528     </body>
529 </html>