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&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 + "&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&u=" + data:blog.url + "&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 Ⓒ <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>