Learn How to Create a Custom Blogger Template
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, you can modify various elements of the template, such as colors, fonts, layout, and background. Additionally, you can add widgets, gadgets, and HTML code to further personalize your blog. It includes various components, such as header, footer, sidebar, post area, and navigation menus. It defines the placement of these components, as well as the styling, colors, fonts, and other visual elements used throughout the blog.You can get the complete code from Github
blogger.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' expr:content='data:blog.title'/>
16 <b:if cond='data:blog.pageType == "index"'>
17 <meta property='og:title' expr:content='data:blog.pageTitle'/>
18 <b:else/>
19 <meta property='og:title' expr:content='data:blog.pageName'/>
20 </b:if>
21 <meta property='og:description' expr:content='data:view.description.escaped'/>
22 <meta property='og:url' expr:content='data:blog.url'/>
23 <!-- Add you favicon image -->
24 <link rel='shortcut icon' type='image/png' href=''/>
25 <!-- Use this if statement to avoid google ads or google analytics count, in case you test this template in your own blogger login session -->
26 <!-- Replace this below '"Algoberry"' because in my blog i set title as Algoberry -->
27 <b:if cond='data:blog.title == "Algoberry"'>
28
29 </b:if>
30 <!-- Apply you favourite fonts here and also please apply same in below body css -->
31 <link href='https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800' rel='stylesheet'/>
32 <b:skin><![CDATA
33
34 /* General */
35 body {
36 margin:0px;
37 padding:0px;
38 display:flex;
39 flex-direction:column;
40 font-family:'Open Sans', sans-serif;
41 font-size:15px;
42 font-weight:400;
43 line-height:1.5;
44 color:#181823;
45 /*overflow-wrap:break-word;*/
46 text-align:left;
47 /*text-align:justify;*/
48 /*text-rendering:optimizeLegibility;*/
49 }
50
51 h1, h2, h4, #blog-pager {
52 margin:0px;
53 padding:0px;
54 line-height:1.4;
55 }
56
57 h1, h2 {
58 font-size:30px;
59 }
60
61 h4 {
62 }
63
64 .avatar-image-container {
65 border-radius:50%;
66 }
67
68 .img700 {
69 width:100%;
70 padding:0px;
71 margin-top:10px;
72 margin-bottom:10px;
73 }
74
75 /* Ahref */
76 a {
77 text-decoration:none;
78 color:inherit;
79 }
80
81 .lin {
82 color:#00BFFF;
83 }
84
85 .hil {
86 color: #000;
87 background-color: #E4DCCF;
88 padding: 5px;
89 font-size: 15px;
90 }
91
92 /* Layout */
93 nav, main, footer {
94 width:1024px;
95 margin-left:auto;
96 margin-right:auto;
97 }
98
99 header {
100 width:100%;
101 border-bottom:1px solid #cdcdcd;
102 margin-bottom:20px;
103 }
104
105 inputtype=text {
106 margin:10px 0px;
107 padding:10px 12px;
108 width:100%;
109 display:inline-block;
110 border:1px solid #ccc;
111 border-radius:6px;
112 box-sizing:border-box;
113 }
114
115 nav {
116 display:flex;
117 flex-direction:row;
118 margin-top:5px;
119 margin-bottom:5px;
120 }
121
122 #leftnav {
123 order:0;
124 flex:0 auto;
125 margin-top:auto;
126 margin-bottom:auto;
127 text-align:left;
128 }
129
130 #leftnav a {
131 margin:auto;
132 }
133
134 #middlenav {
135 order:1;
136 flex:2 auto;
137 margin-top:auto;
138 margin-bottom:auto;
139 text-align:center;
140 margin-left:10px;
141 margin-right:10px;
142 }
143
144 #rightnav {
145 order:2;
146 flex:1 auto;
147 margin-top:auto;
148 margin-bottom:auto;
149 text-align:right;
150 }
151
152 main {
153 display:flex;
154 gap:24px;
155 flex-direction:row;
156 min-height:100vh;
157 }
158
159 section {
160 width:700px;
161 }
162
163 aside {
164 width:300px;
165 }
166
167 footer {
168 border-top:1px solid #cdcdcd;
169 margin-top:20px;
170 padding-top:10px;
171 padding-bottom:10px;
172 }
173
174 /* Social Media Share */
175 .social-icon-share {
176 position:fixed;
177 top:50%;
178 -webkit-transform:translateY(-50%);
179 -ms-transform:translateY(-50%);
180 transform:translateY(-50%);
181 }
182
183 .social-icon-share a {
184 display:block;
185 text-align:center;
186 padding:14px;
187 transition:all 0.3s ease;
188 color:white;
189 }
190
191 .social-icon-share a:hover {
192 background-color:#000000;
193 }
194
195 .svg-share {
196 width:30px;
197 height:30px;
198 }
199
200 .svg-share path {
201 fill:#FFFFFF;
202 }
203
204 .svg-mo-share {
205 width:30px;
206 height:30px;
207 padding:5px;
208 }
209
210 .svg-mo-share path {
211 fill:#FFFFFF;
212 }
213
214 .svg-follow {
215 width:35px;
216 height:35px;
217 }
218
219 .svg-follow path {
220 fill:inherit;
221 }
222
223 .facebook {
224 background:#3B5998;
225 }
226
227 .twitter {
228 background:#55ACEE;
229 }
230
231 .tumblr {
232 background:#314358;
233 }
234
235 /* Section */
236 article {
237 margin-bottom:30px;
238 }
239
240 .contentdiv, footer {
241 font-size:17px;
242 }
243
244 time {
245 font-size:14px;
246 color:#9e9d89;
247 }
248
249 .commentdiv {
250 border-top:1px dashed #cdcdcd;
251 margin-top:10px;
252 padding-top:10px;
253 }
254
255 /* Comment */
256 .comments .comments-content .comment-header, .comments .comments-content .comment-content {
257 margin:0px;
258 }
259
260 .comments .comments-content .comment:first-child {
261 padding-top:0px;
262 }
263
264 .comments .comments-content .user, .comments .continue a {
265 font-size:14px !important;
266 font-weight:bolder;
267 }
268
269 .comment-block {
270 padding:10px;
271 /*background-color:#DBDFEA;*/
272 background-color:#F1F6F9;
273 }
274
275 .comment-actions a {
276 font-size:14px;
277 font-weight:bolder;
278 }
279
280 .datetime a {
281 font-size:13px;
282 }
283
284 #blog-pager {
285 font-size:25px;
286 font-weight:bold;
287 }
288
289 #blog-pager a {
290 color:#00BFFF;
291 }
292
293 /* Aside */
294 .box {
295 margin-bottom:10px;
296 }
297
298 .label {
299 color:#14171a;
300 background-color:#e1e8ed;
301 text-align:center;
302 cursor:pointer;
303 border-radius:3px;
304 padding:4px;
305 line-height:2.2;
306 }
307
308 #PopularPosts1 ul, #PopularPosts1 ul li {
309 margin:0px;
310 padding:0px;
311 list-style:none;
312 }
313
314 /* Code Highlighter Start */
315
316 /* Code Div */
317 .codediv {
318 font-size:16px;
319 padding:0px;
320 margin-top:5px;
321 margin-bottom:5px;
322 }
323
324 /* File Name Color */
325 .fN {
326 color:#21094e;
327 margin-bottom:5px;
328 }
329
330 /* Code */
331 .code {
332 line-height:normal;
333 padding:15px;
334 overflow:auto;
335 color:#85d9eb;
336 background-color:#191e1e;
337 border-left:5px solid #605a56;
338 }
339
340 /* Paragraph */
341 pre {
342 margin:0px;
343 padding:0px;
344 }
345
346 /* Line Number Color */
347 .lI {
348 color:#ffffff;
349 }
350
351 /* Keyword Color */
352 .kC {
353 color:#56e27a;
354 }
355
356 /* Single Line & Mulitple Lines Comment Color */
357 .cC {
358 color:#b8b0b0;
359 }
360
361 /* Single & Double Quotes Color */
362 .qC {
363 color:#d4f088;
364 }
365
366 /* Parenthesis Color */
367 .pC {
368 color:#ffffff;
369 }
370
371 /* Inner Parenthesis Color */
372 .iPC {
373 color:#d4f088;
374 }
375
376 /* Bracket Color */
377 .bC {
378 color:#ffffff;
379 }
380
381 /* Inner Bracket Color */
382 .iBC {
383 color:#d4f088;
384 }
385
386 /* Code Highlighter End */
387
388 /* Mobile */
389 @media (max-width: 810px) {
390 body {
391 padding-left:15px;
392 padding-right:15px;
393 }
394
395 nav, main, section, aside, footer {
396 width:100%;
397 }
398
399 nav, main {
400 flex-direction:column;
401 }
402
403 #leftnav, #rightnav {
404 width:100%;
405 text-align:center;
406 }
407
408 #leftnav {
409 order:0;
410 }
411
412 #middlenav {
413 order:2;
414 margin-left:0px;
415 margin-right:0px;
416 }
417
418 #rightnav {
419 order:1;
420 }
421
422 aside {
423 margin-top:20px;
424 }
425
426 #blog-pager {
427 font-size:20px;
428 }
429 }
430 ]></b:skin>
431 </head>
432 <body>
433 <header>
434 <nav>
435 <div id='leftnav'>
436 <a expr:href='data:blog.homepageUrl'>
437 <!-- Include you logo image here instead of below sample text -->
438 Test Portal
439 </a>
440 </div>
441 <div id='middlenav'>
442 <form expr:action='data:blog.searchUrl' id='uform' target='_top'>
443 <input type='text' id='usearch' placeholder='Search' name='q' expr:value='data:view.isSearch ? data:view.search.query.escaped : ""' autocomplete='off'/>
444 </form>
445 </div>
446 <div id='rightnav'>
447 <!-- Add your social media's follow url below -->
448 <a href = ''><svg class='svg-follow' 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>
449 <a href = ''><svg class='svg-follow' 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>
450 <a href = ''><svg class='svg-follow' 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>
451 </div>
452 </nav>
453 </header>
454 <b:if cond= 'data:view.isError'>
455 <b:else/>
456 <b:if cond='data:blog.pageType != "index"'>
457 <b:if cond='data:blog.isMobileRequest == "false"'>
458 <div class='social-icon-share'>
459 <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-share' 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>
460 <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-share' 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>
461 <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-share' viewBox="0 0 512 512"><path d="M210.8 80.3c-2.3 18.3-6.4 33.4-12.4 45.2 -6 11.9-13.9 22-23.9 30.5 -9.9 8.5-21.8 14.9-35.7 19.5v50.6h38.9v124.5c0 16.2 1.7 28.6 5.1 37.1 3.4 8.5 9.5 16.6 18.3 24.2 8.8 7.6 19.4 13.4 31.9 17.5 12.5 4.1 26.8 6.1 43 6.1 14.3 0 27.6-1.4 39.9-4.3 12.3-2.9 26-7.9 41.2-15v-55.9c-17.8 11.7-35.7 17.5-53.7 17.5 -10.1 0-19.1-2.4-27-7.1 -5.9-3.5-10-8.2-12.2-14 -2.2-5.8-3.3-19.1-3.3-39.7v-91.1H345.5v-55.8h-84.4v-90H210.8z"/></svg></a>
462 </div>
463 </b:if>
464 </b:if>
465 </b:if>
466 <main>
467 <section>
468 <b:if cond='data:view.isError'>
469 Oops no result found !
470 <b:else/>
471 <b:section id='content-section'>
472 <b:widget id='Blog1'>
473 <b:includable id='main'>
474 <b:loop values='data:posts' var='post'>
475 <!-- -->
476 <b:if cond='data:blog.pageType != "index"'>
477 <script type="application/ld+json">
478 {
479 "@context": "https://schema.org/",
480 "@type": "BlogPosting",
481 "expr:@id": "<data:post.url/>#BlogPosting",
482 "mainEntityOfPage": "<data:post.url/>",
483 "headline": "<data:post.title/>",
484 "name": "<data:post.title/>",
485 "description": "<data:view.description.escaped/>",
486 "datePublished": "<data:post.timestamp/>",
487 "dateModified": "<data:post.lastUpdatedISO8601/>",
488 "author": {
489 "@type": "Person",
490 "name": "<data:post.author/>"
491 },
492 "publisher": {
493 "@type": "Organization",
494 "@id": "<data:blog.homepageUrl/>",
495 "name": "<data:blog.title/>",
496 "logo": {
497 <!-- Fill your website logo here and also update the logo width and height px-->
498 "@type": "ImageObject",
499 "@id": "",
500 "url": "",
501 "width": "",
502 "height": ""
503 }
504 },
505 "image": {
506 <!-- Fill your website image here and also update the logo width and height px-->
507 "@type": "ImageObject",
508 "@id": "",
509 "url": "",
510 "height": "",
511 "width": ""
512 },
513 "url": "<data:post.url/>",
514 "isPartOf": {
515 "@type" : "Blog",
516 "@id": "<data:post.url/>",
517 "name": "<data:post.title/>",
518 "publisher": {
519 "@type": "Organization",
520 "@id": "<data:blog.homepageUrl/>",
521 "name": "<data:blog.title/>"
522 }
523 },
524 "keywords": [
525 "<data:blog.title/>"
526 ]
527 }
528 </script>
529 </b:if>
530 <!-- -->
531 <article>
532 <div class='contentdiv'>
533 <time><data:post.timestamp/></time>
534 <b:if cond='data:blog.pageType == "index"'>
535 <h2><a expr:href='data:post.url' rel='follow'><data:post.title/></a></h2>
536 <b:else/>
537 <h1><data:post.title/></h1>
538 </b:if>
539 <b:if cond='data:blog.pageType != "index"'>
540 <b:if cond='data:blog.isMobileRequest == "true"'>
541 <div>
542 <a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:blog.pageName' target='_blank' rel='noopener' title='Share to Twitter'><svg class='svg-mo-share twitter' 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>
543 <a expr:href='"https://www.facebook.com/sharer/sharer.php?u=" + data:blog.url' target='_blank' rel='noopener' title='Share to Facebook'><svg class='svg-mo-share facebook' 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>
544 <a expr:href='"https://www.tumblr.com/share?v=3&u=" + data:blog.url + "&t=" + data:blog.pageName' target='_blank' rel='noopener' title='Share to Tumblr'><svg class='svg-mo-share tumblr' viewBox="0 0 512 512"><path d="M210.8 80.3c-2.3 18.3-6.4 33.4-12.4 45.2 -6 11.9-13.9 22-23.9 30.5 -9.9 8.5-21.8 14.9-35.7 19.5v50.6h38.9v124.5c0 16.2 1.7 28.6 5.1 37.1 3.4 8.5 9.5 16.6 18.3 24.2 8.8 7.6 19.4 13.4 31.9 17.5 12.5 4.1 26.8 6.1 43 6.1 14.3 0 27.6-1.4 39.9-4.3 12.3-2.9 26-7.9 41.2-15v-55.9c-17.8 11.7-35.7 17.5-53.7 17.5 -10.1 0-19.1-2.4-27-7.1 -5.9-3.5-10-8.2-12.2-14 -2.2-5.8-3.3-19.1-3.3-39.7v-91.1H345.5v-55.8h-84.4v-90H210.8z"/></svg></a>
545 </div>
546 </b:if>
547 </b:if>
548 <data:post.body/>
549 </div>
550 <b:if cond='data:blog.pageType != "index"'>
551 <div class='commentdiv'>
552 <b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comment_picker'/>
553 </div>
554 </b:if>
555 </article>
556 </b:loop>
557 <div id='blog-pager'>
558 <b:if cond='data:newerPageUrl'>
559 <span id='blog-pager-newer-link'>
560 <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' rel='follow' title='Newer Post'>Newer Post</a>
561 </span>
562 </b:if>
563 <b:if cond='data:olderPageUrl'>
564 <span id='blog-pager-older-link'>
565 <a class='blog-pager-older-link' expr:href='data:olderPageUrl' rel='follow' title='Older Post'>Older Post</a>
566 </span>
567 </b:if>
568 <a class='home-link' expr:href='data:blog.homepageUrl' rel='follow'>Home</a>
569 </div>
570 </b:includable>
571 </b:widget>
572 </b:section>
573 </b:if>
574 </section>
575 <aside>
576 <div class='box'>
577 <h4>Popular Posts</h4>
578 <b:section id='popularpost-section'>
579 <b:widget id='PopularPosts1'>
580 <b:includable id='main'>
581 <ul>
582 <b:loop values='data:posts' var='post'>
583 <li><a expr:href='data:post.href'><data:post.title/></a></li>
584 </b:loop>
585 </ul>
586 </b:includable>
587 </b:widget>
588 </b:section>
589 </div>
590 <div class='box'>
591 <h4>Topics</h4>
592 <b:section id='label-section'>
593 <b:widget id='Label1'>
594 <b:includable id='main'>
595 <b:loop values='data:labels' var='label'>
596 <a class='label' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
597 </b:loop>
598 </b:includable>
599 </b:widget>
600 </b:section>
601 </div>
602 </aside>
603 </main>
604 <footer>
605 Copyright Ⓒ <data:blog.title/> | Powered by <a href='https://www.blogger.com'>Blogger.com</a>
606 </footer>
607 <script>
608 var input = document.getElementById("usearch");
609 input.addEventListener("keypress", functionevent {
610 if event.key === "Enter" {
611 event.preventDefault;
612 document.getElementById"uform".submit;
613 }
614 });
615 </script>
616 </body>
617 </html>
No comments:
Post a Comment