How to create blogger template from scratch
In this article I shared my own blogger template which currently implemented in this blog and I used HTML5, CSS and Blogger tags for blog layout design and its fully customize, please change this template as per your blog design.template.xml
1<?xml version="1.0" encoding="UTF-8" ?>
2<!DOCTYPE HTML>
3<html lang="en-US">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
7 <meta content="follow, index" name="robots" />
8 <b:if cond='data:blog.pageType == "index"'>
9 <title><data:blog.pageTitle/></title>
10 <meta name="title" expr:content="data:blog.pageTitle" />
11 <b:else/>
12 <title><data:blog.pageName/></title>
13 <meta name="title" expr:content="data:blog.pageName" />
14 </b:if>
15 <meta name="description" expr:content="data:view.description.escaped" />
16 <meta property="og:locale" content="en_US" />
17 <meta property="og:type" content="website" />
18 <meta property="og:site_name" content="" /> <!-- Add Your Website Name -->
19 <meta property="og:url" expr:content="data:blog.url" />
20 <b:if cond='data:blog.pageType == "index"'>
21 <meta property="og:title" expr:content="data:blog.pageTitle" />
22 <b:else/>
23 <meta property="og:title" expr:content="data:blog.pageName" />
24 </b:if>
25 <meta property="og:description" expr:content="data:view.description.escaped" />
26 <meta property="og:image" content="https://lh3.googleusercontent.com/ULB6iBuCeTVvSjjjU1A-O8e9ZpVba6uvyhtiWRti_rBAs9yMYOFBujxriJRZ-A=w1200" />
27 <meta name="twitter:card" content="summary" />
28 <meta name="twitter:site" content="" /> <!-- Add Your Twitter Id -->
29 <meta property="twitter:url" expr:content="data:blog.url" />
30 <b:if cond='data:blog.pageType == "index"'>
31 <meta property="twitter:title" expr:content="data:blog.pageTitle" />
32 <b:else/>
33 <meta property="twitter:title" expr:content="data:blog.pageName" />
34 </b:if>
35 <meta name="twitter:description" expr:content="data:view.description.escaped" />
36 <meta name="twitter:image" content="https://lh3.googleusercontent.com/ULB6iBuCeTVvSjjjU1A-O8e9ZpVba6uvyhtiWRti_rBAs9yMYOFBujxriJRZ-A=w1200" />
37 <link rel="preconnect" href="https://fonts.gstatic.com" />
38 <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet" />
39 <b:skin><![CDATA[
40 /* General Start */
41 body {
42 padding:0px;
43 margin:0px;
44 font-family:'Open Sans', sans-serif;
45 color:#1b1c25;
46 line-height:1.6;
47 }
48
49 h1, h2, h4, h3 {
50 margin:0px;
51 padding:0px;
52 line-height:normal;
53 }
54
55 pre {
56 margin:0px;
57 margin-top:10px;
58 margin-bottom:4px;
59 }
60 /* General End */
61
62 /* Layout Start */
63 .container {
64 width:1048px;
65 margin-left:auto;
66 margin-right:auto;
67 }
68
69 header {
70 clear:both;
71 margin-bottom:20px;
72 border-bottom:1px solid #dadce0;
73 padding-top: 10px;
74 padding-bottom: 10px;
75 font-size:15px;
76 }
77
78 section {
79 width:748px;
80 float:left;text-align:left;
81 font-size:17px;
82 }
83
84 aside {
85 width:300px;
86 float:right;text-align:left;
87 font-size:16px;
88 }
89
90 footer {
91 clear:both;
92 border-top: 1px solid #e8e8e8;
93 margin-top:30px;
94 padding-top:10px;
95 padding-bottom:10px;
96 font-size:14px;
97 }
98 /* Layout End */
99
100 /* Ahref Start */
101 a {
102 text-decoration:none;
103 color:#1184e8;
104 }
105 /* Ahref End */
106
107 /* Header Start */
108 header a {
109 color:inherit;
110 margin-right:15px;
111 }
112 /* Header End */
113
114 /* Section Start */
115 #showerror {
116 margin: auto;
117 font-size:40px;
118 font-weight:bold;
119 }
120
121 #innersection {
122 padding-right:20px;
123 }
124
125 time {
126 color:#9e9d89;
127 font-weight:bold;
128 font-size:14px;
129 }
130
131 article {
132 margin-bottom:40px;
133 }
134
135 article:last-child {
136 margin-bottom:0px;
137 }
138
139 section h1, section h2 a {
140 font-size:35px;
141 }
142
143 section h2 a {
144 color:inherit;
145 }
146
147 section h2 a:focus, section h2 a:hover {
148 background:#a1cae2;
149 }
150
151 section h3, section h4 {
152 font-size:16px;
153 }
154
155 section h3 {
156 margin-top:10px;
157 }
158
159 .outputdiv {
160 font-size:16px;
161 border-radius: 4px;
162 padding:5px;
163 color:#FFFFFF;
164 background-color:#0a043c;
165 }
166
167 #download {
168 margin-top:10px;
169 margin-bottom:5px;
170 }
171
172 #download a {
173 background-color: #4CAF50;
174 color:white;
175 text-align: center;
176 font-size:14px;
177 cursor:pointer;
178 font-weight:bold;
179 padding:3px;
180 border-radius: 3px;
181 }
182
183 section ul {
184 font-size:16px;
185 }
186
187 section ul, section ul li {
188 list-style: none;
189 margin: 0px !important;
190 padding: 0px !important;
191 }
192
193 #relatedposts a {
194 clear:both;
195 }
196
197 #post-comment {
198 font-size:16px;
199 }
200
201 .post-end {
202 margin-top:15px;
203 margin-bottom:5px;
204 padding: 10px 0;
205 background: #fff url(https://1.bp.blogspot.com/-Oj3F66X8r5I/XiLMmrd_2uI/AAAAAAAAArY/rV6ZQ-FAOs8Lz6-Y9HODpA08raTYX5URgCLcBGAsYHQ/s320/border.png) repeat-x 0 top;
206 }
207
208 #post-comment a {
209 color:inherit;
210 font-weight:bold;
211 font-size:14px;
212 }
213
214 #post-comment .user a {
215 font-size:16px;
216 }
217
218 #post-comment .datetime a {
219 color: #b8b0b0;
220 font-size:13px;
221 }
222
223 .comments .comments-content .comment:first-child {
224 padding-top:0px;
225 }
226
227 .comment-block {
228 padding: 15px;
229 border-left: 4px solid #5b8a72;
230 border-top: 1px solid #bfcba8;
231 border-right: 1px solid #bfcba8;
232 border-bottom: 1px solid #bfcba8;
233 }
234
235 #blog-pager {
236 font-size:25px;
237 font-weight:700;
238 }
239 /* Section End */
240
241 /* Aside Start */
242 aside h2 {
243 font-size:16px;
244 }
245
246 aside .normalbox, aside .adsbox {
247 margin-bottom:15px;
248 }
249
250 #PopularPosts1 ul, #PopularPosts1 ul li {
251 list-style: none;
252 margin: 0px !important;
253 padding: 0px !important;
254 }
255
256 .label {
257 background-color:#f4f4f2;
258 color:inherit;
259 text-align: center;
260 font-size:15px;
261 cursor:pointer;
262 border-radius:3px;
263 padding:4px;
264 line-height:2.5;
265 }
266
267 /* Aside End */
268
269 /* Code Start */
270 code {
271 font-size:15px;
272 }
273
274 .filename {
275 color:#21094e;
276 }
277
278 .codebox {
279 color:#59D9D1;
280 background-color:#000000;
281 border-radius: 4px;
282 border-left: 4px solid #605a56;
283 padding: 1.1%;
284 overflow: auto;
285 }
286
287 .linecolor {
288 color:#FFFFFF;
289 margin-right:10px;
290 }
291
292 .keywordcolor {
293 color:#F5D67B;
294 }
295
296 .quotescolor {
297 color:#FC7038;
298 }
299
300 .commentcolor {
301 color:#b8b0b0;
302 }
303
304 .parenthesiscolor {
305 color:#F5D67B;
306 }
307
308 .bracketcolor {
309 color:#F5D67B;
310 }
311 /* Code End */
312
313 /* SVG Start */
314 .svg-icon-left-post {
315 width: 20px;
316 height: 20px;
317 }
318
319 .svg-icon-left-post path {
320 fill: #FFFFFF;
321 }
322
323 .svg-icon-post {
324 width: 20px;
325 height: 20px;
326 padding:5px;
327 }
328
329 .svg-icon-post path {
330 fill: #FFFFFF;
331 }
332 /* SVG End */
333
334 /* Social Media Start */
335 .social-icon-bar {
336 position: fixed;
337 top: 50%;
338 -webkit-transform: translateY(-50%);
339 -ms-transform: translateY(-50%);
340 transform: translateY(-50%);
341 }
342
343 .social-icon-bar a {
344 display: block;
345 text-align: center;
346 padding: 14px;
347 transition: all 0.3s ease;
348 color: white;
349 }
350
351 .social-icon-bar a:hover {
352 background-color: #000;
353 }
354
355 .facebook {
356 background: #3B5998;
357 }
358
359 .twitter {
360 background: #55ACEE;
361 }
362
363 .google {
364 background: #dd4b39;
365 }
366
367 .linkedin {
368 background: #007bb5;
369 }
370
371 .youtube {
372 background: #bb0000;
373 }
374
375 .tumblr {
376 background: #314358;
377 }
378
379 .pinterest {
380 background: #bb0000;
381 }
382
383 .email {
384 background: grey;
385 }
386 /* Social Media End */
387
388 /* Mobile View Start */
389 @media (max-width: 768px) {
390
391 body {
392 padding-left:5px;
393 padding-right:5px;
394 }
395
396 .container {
397 width:100%;
398 }
399
400 section {
401 width:100%;
402 float:none;
403 }
404
405 #innersection {
406 padding-right:0px;
407 }
408
409 aside {
410 float:none;
411 }
412
413 #blog-pager {
414 font-size:20px;
415 }
416 }
417 /* Mobile View End */
418
419 ]]></b:skin>
420 </head>
421 <body>
422 <b:section id="header-section" class="header-section" maxwidgets="1" showaddelement="no"></b:section>
423 <b:section id="navigation-section" class="navigation-section" maxwidgets="1" showaddelement="no"></b:section>
424 <header>
425 <div class="container">
426 <a expr:href="data:blog.homepageUrl">Home</a>
427 <a expr:href='data:blog.homepageUrl + "search/label/Tools"'>Tools</a>
428 </div>
429 </header>
430 <b:if cond='data:view.isError'>
431 <b:else/>
432 <b:if cond='data:blog.pageType == "index"'>
433 <b:else/>
434 <b:if cond='data:blog.isMobileRequest == "true"'>
435 <b:else/>
436 <div class="social-icon-bar">
437 <a expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:blog.url' target='_blank' rel='noopener' class='facebook' title='Share to Facebook'><svg class='svg-icon-left-post' viewBox='0 0 20 20'><path fill='none' 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'></path></svg></a>
438 <a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:blog.pageName' target='_blank' rel='noopener' class='twitter' title='Share to Twitter'><svg class='svg-icon-left-post' viewBox='0 0 20 20'><path fill='none' 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'></path></svg></a>
439 <a expr:href='"https://www.tumblr.com/share?v=3&u=" + data:blog.url + "&t=" + data:blog.pageName' target='_blank' rel='noopener' class='tumblr' title='Share to Tumblr'><svg class='svg-icon-left-post' viewBox='0 0 20 20'><path fill='none' 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'></path></svg></a>
440 </div>
441 </b:if>
442 </b:if>
443 </b:if>
444 <div class="container">
445 <section>
446 <div id="innersection">
447 <b:if cond='data:view.isError'>
448 <div id="showerror">Oops no result found :(</div>
449 <b:else/>
450 <b:section id="content-section" class="content-section" showaddelement="no">
451 <b:widget id="Blog1" locked="false" title="Blog Posts" type="Blog">
452 <b:includable id="main" var="top">
453 <b:loop values="data:posts" var="post" index="loopindex">
454 <script type='application/ld+json'>{
455 "@context": "http://schema.org",
456 "@type": "BlogPosting",
457 "mainEntityOfPage": {
458 "@type": "WebPage",
459 "@id": "<data:post.url/>"
460 },
461 "headline": "<data:post.title/>","description": "<data:view.description.escaped/>","datePublished": "<data:post.timestampISO8601/>",
462 "dateModified": "<data:post.lastUpdatedISO8601/>","image": {
463 "@type": "ImageObject","url": "https://lh3.googleusercontent.com/ULB6iBuCeTVvSjjjU1A-O8e9ZpVba6uvyhtiWRti_rBAs9yMYOFBujxriJRZ-A=w1200",
464 "height": 348,
465 "width": 1200},"publisher": {
466 "@type": "Organization",
467 "name": "Blogger",
468 "logo": {
469 "@type": "ImageObject",
470 "url": "https://lh3.googleusercontent.com/ULB6iBuCeTVvSjjjU1A-O8e9ZpVba6uvyhtiWRti_rBAs9yMYOFBujxriJRZ-A=h60",
471 "width": 206,
472 "height": 60
473 }
474 },"author": {
475 "@type": "Person",
476 "name": "<data:post.author/>"
477 }
478 }</script>
479 <article>
480 <time><data:post.timestamp/></time>
481 <b:if cond='data:blog.pageType == "index"'>
482 <h2><a expr:href="data:post.url" rel="follow"><data:post.title/></a></h2>
483 <b:else/>
484 <h1><data:post.title/></h1>
485 </b:if>
486 <b:if cond='data:blog.pageType != "index"'>
487 <b:if cond='data:blog.isMobileRequest == "true"'>
488 <div>
489 <a expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:blog.url' target='_blank' rel='noopener'><svg class='svg-icon-post facebook' viewBox='0 0 20 20'><path fill='none' 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'></path></svg></a>
490 <a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:blog.pageName' target='_blank' rel='noopener'><svg class='svg-icon-post twitter' viewBox='0 0 20 20'><path fill='none' 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'></path></svg></a>
491 <a expr:href='"https://www.tumblr.com/share?v=3&u=" + data:blog.url + "&t=" + data:blog.pageName' target='_blank' rel='noopener'><svg class='svg-icon-post tumblr' viewBox='0 0 20 20'><path fill='none' 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'></path></svg></a>
492 </div>
493 </b:if>
494 </b:if>
495 <data:post.body/>
496 <b:if cond='data:blog.pageType != "index"'>
497 <div class="post-end"></div>
498 <div id="post-comment">
499 <b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comment_picker'/>
500 </div>
501 </b:if>
502 </article>
503 </b:loop>
504 <div id="blog-pager">
505 <b:if cond='data:newerPageUrl'>
506 <span id="blog-pager-newer-link">
507 <a class="blog-pager-newer-link" expr:href="data:newerPageUrl" title="Newer Post" rel="follow">Newer Post</a>
508 </span>
509 </b:if>
510 <b:if cond='data:olderPageUrl'>
511 <span id="blog-pager-older-link">
512 <a class="blog-pager-older-link" expr:href="data:olderPageUrl" title="Older Post" rel="follow">Older Post</a>
513 </span>
514 </b:if>
515 <a class="home-link" expr:href="data:blog.homepageUrl" rel="follow">Home</a>
516 </div>
517 </b:includable>
518 </b:widget>
519 </b:section>
520 </b:if>
521 </div>
522 </section>
523 <aside>
524 <div class="normalbox">
525 <h2>Popular Posts</h2>
526 <b:section class='section' id='customsection1' showaddelement='no'>
527 <b:widget id='PopularPosts1' locked='false' type='PopularPosts'>
528 <b:includable id='main'>
529 <ul>
530 <b:loop values='data:posts' var='post'>
531 <li><a expr:href='data:post.href'><data:post.title/></a></li>
532 </b:loop>
533 </ul>
534 </b:includable>
535 </b:widget>
536 </b:section>
537 </div>
538 <div class="normalbox">
539 <h2>Label</h2>
540 <b:section class='section' id='customsection2' showaddelement='no'>
541 <b:widget id='Label1' locked='false' type='Label'>
542 <b:includable id='main'>
543 <b:loop values='data:labels' var='label'>
544 <a expr:dir='data:blog.languageDirection' expr:href='data:label.url' class="label"><data:label.name/></a>
545 </b:loop>
546 </b:includable>
547 </b:widget>
548 </b:section>
549 </div>
550 <div class="adsbox">
551 </div>
552 <div class="adsbox">
553 </div>
554 </aside>
555 </div>
556 <div class="container">
557 <footer>
558 Copyright Ⓒ (Add Your Domain Name Here) | Powered by <a href="https://www.blogger.com">Blogger.com</a>
559 </footer>
560 </div>
561 <b:section id="pull-section" class="pull-section"></b:section>
562 </body>
563</html>