Home Tools

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&amp;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 + "&amp;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&amp;u=" + data:blog.url + "&amp;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 + "&amp;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&amp;u=" + data:blog.url + "&amp;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 &#9400; (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>