Build a Modern Blogger Theme for a Tech Blog
September 30, 2026
This Blogger XML theme template is designed for a professional technology blog. It is a complete website design structure that controls the visual appearance, layout, typography, colors, and SEO settings of the blog. The template is built using Blogger’s XML and CSS system, which allows the blog to display articles, sidebars, headers, footer sections, and social media elements in a clean and modern format.
Download from GitHub
The file begins with metadata and SEO configuration, including the page title, author information, viewport settings, robot directives, Open Graph tags, Twitter card tags, canonical URL, and theme color. These elements help the blog rank better in search engines and improve how the site appears when shared on social media platforms. It also includes conditional logic to check whether the blog title matches “Story of Algorithm,” (Please replace your Blog Title in below file) which is used to control the execution of analytics or advertisement scripts safely.
The template uses a modern color scheme dominated by red, white, and dark gray tones. It defines variables such as theme colors, fonts, text colors, and background styles, making the design consistent and easy to manage. The typography is carefully chosen with a clean sans-serif body font and a strong serif heading font, creating a professional and readable reading experience for blog posts. The layout is responsive and uses a structured grid system, with a main content area and a sidebar for additional information such as widgets, links, and other blog elements.
blogger_template.xml
1 <?xml version='1.0' encoding='UTF-8'?>
2 <!DOCTYPE html>
3 <html lang='en'>
4 <head>
5 <b:if cond='data:blog.title == "Story of Algorithm"'>
6 <!-- Use this if condition to check goole analytics or ads should be run in Blogger template. If the blog title is not set, then the analytics or ads code will not be executed. This is a simple way to prevent running analytics or ads on a blog that is still in development or has not been properly configured. -->
7 </b:if>
8 <title><data:blog.pageTitle/></title>
9 <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
10 <meta name='viewport' content='width=device-width, initial-scale=1.0'/>
11 <meta name='language' content='en'/>
12 <meta name='robots' content='index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1'/>
13 <meta expr:content='data:blog.pageTitle' name='title'/>
14 <meta expr:content='data:blog.author.name' name='author'/>
15 <meta name='theme-color' content='#e95454'/>
16 <meta expr:content='data:blog.url' property='og:url'/>
17 <meta content='website' property='og:type'/>
18 <meta expr:content='data:blog.title' property='og:site_name'/>
19 <b:if cond='data:blog.pageType == "item"'>
20 <meta expr:content='data:view.description.escaped' name='description'/>
21 <meta expr:content='data:blog.pageName' property='og:title'/>
22 <meta expr:content='data:blog.pageName' name='twitter:title'/>
23 <meta expr:content='data:view.description.escaped' property='og:description'/>
24 <meta expr:content='data:view.description.escaped' name='twitter:description'/>
25 <b:else/>
26 <meta expr:content='data:view.description.escaped' name='description'/>
27 <meta expr:content='data:blog.pageTitle' property='og:title'/>
28 <meta expr:content='data:blog.pageTitle' name='twitter:title'/>
29 <meta expr:content='data:view.description.escaped' property='og:description'/>
30 <meta expr:content='data:view.description.escaped' name='twitter:description'/>
31 </b:if>
32 <!-- Add images for social media sharing -->
33 <meta content='' property='og:image'/>
34 <meta content='' name='twitter:image'/>
35 <meta name='twitter:card' content='summary_large_image'/>
36 <meta name='twitter:site' content='@storyofalgo'/>
37 <link rel='canonical' expr:href='data:blog.url'/>
38 <link rel='icon' type='image/x-icon' href=''/>
39 <link rel='preconnect' href='https://fonts.googleapis.com'/>
40 <link rel='preconnect' href='https://fonts.gstatic.com'/>
41 <link href='https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Merriweather:wght@700&display=swap' rel='stylesheet'/>
42 <b:skin><![CDATA
43 /* Theme variables */
44 :root {
45 --highcolor: #e95454;
46 --fontcolor: #1f2937;
47 --headercolor: #111827;
48 --mutedcolor: #6b7280;
49 --surfacecolor: #ffffff;
50 }
51
52 /* Base page styling */
53 body {
54 margin: 0;
55 padding: 0;
56 display: flex;
57 flex-direction: column;
58 font-family: "Open Sans", sans-serif;
59 font-optical-sizing: auto;
60 font-size: 17px;
61 font-weight: 400;
62 font-style: normal;
63 font-variation-settings: "wdth" 100;
64 line-height: 1.7;
65 color: var(--fontcolor);
66 background-color: var(--surfacecolor);
67 }
68
69 pre {
70 margin: 0;
71 padding: 0;
72 tab-size: 4;
73 white-space: pre;
74 }
75
76 /* Link and typography styles */
77 a {
78 text-decoration: none;
79 color: inherit;
80 transition: color 0.2s;
81 }
82
83 a:hover {
84 color: var(--highcolor);
85 }
86
87 h1, h2, h3, h4, h5, h6 {
88 font-family: 'Merriweather', serif;
89 margin: 0;
90 padding: 0;
91 color: var(--headercolor);
92 line-height: 1.3;
93 letter-spacing: -0.02em;
94 }
95
96 #blog-pager a {
97 font-size: 24px;
98 font-weight: 700;
99 color: var(--highcolor);
100 }
101
102 h1,h2 {
103 font-size: 32px;
104 font-weight: 700;
105 }
106
107 h3 {
108 font-size: 24px;
109 font-weight: 700;
110 }
111
112 h4 {
113 font-size: 20px;
114 font-weight: 700;
115 }
116
117 /* Main layout containers */
118 header, #social-media, main, footer {
119 margin-left: auto;
120 margin-right: auto;
121 width: min(1104px, 100%);
122 max-width: 1104px;
123 }
124
125 header {
126 font-family: 'Merriweather', serif;
127 font-size: 36px;
128 justify-content: center;
129 text-align: center;
130 color: var(--highcolor);
131 border-bottom: 4px solid var(--highcolor);
132 }
133
134 main {
135 display: flex;
136 gap: 40px;
137 min-height: 100vh;
138 }
139
140 section {
141 width: 728px;
142 }
143
144 article {
145 margin-bottom: 50px;
146 }
147
148 .post-date {
149 margin: 8px 0 18px;
150 font-size: 12px;
151 line-height: 1.4;
152 font-weight: 700;
153 letter-spacing: 0.08em;
154 text-transform: uppercase;
155 color: var(--mutedcolor);
156 }
157
158 .post-date .post-date-icon {
159 color: var(--highcolor);
160 margin-right: 6px;
161 }
162
163 /* Sidebar and widget styles */
164 aside {
165 width: 336px;
166 font-size: 15px;
167 color: var(--fontcolor);
168 }
169
170 .side-bar {
171 margin: 0 0 15px;
172 }
173
174 .side-bar h3 {
175 margin: 0 0 14px;
176 }
177
178 aside ul {
179 margin: 0;
180 }
181
182 .download-link {
183 display: inline-flex;
184 align-items: center;
185 justify-content: center;
186 margin: 0 0 18px;
187 padding: 10px 18px;
188 border: 1px solid var(--highcolor);
189 border-radius: 999px;
190 background: linear-gradient(135deg, rgba233, 84, 84, 0.12, rgba233, 84, 84, 0.04);
191 color: var(--highcolor);
192 font-size: 13px;
193 font-weight: 700;
194 letter-spacing: 0.08em;
195 text-transform: uppercase;
196 transition: all 0.25s ease;
197 box-shadow: 0 6px 18px rgba(233, 84, 84, 0.12);
198 }
199
200 .download-link:hover {
201 color: var(--surfacecolor);
202 background: linear-gradient(135deg, var--highcolor, #d54a4a);
203 box-shadow: 0 10px 24px rgba(233, 84, 84, 0.22);
204 transform: translateY(-1px);
205 }
206
207 /* Social media icons */
208 #social-media {
209 display: flex;
210 justify-content: flex-end;
211 margin-bottom: 30px;
212 }
213
214 #social-media > span {
215 display: flex;
216 gap: 10px;
217 }
218
219 #social-media a:hover {
220 color: #fff;
221 }
222
223 .fa {
224 padding: 7px;
225 width: 60px;
226 box-sizing: border-box;
227 text-align: center;
228 text-decoration: none;
229 color: var(--surfacecolor);
230 }
231
232 .fa svg {
233 fill: currentColor;
234 margin: auto;
235 }
236
237 /* Footer and search field */
238 footer {
239 padding: 25px 0;
240 margin-top: auto;
241 text-align: center;
242 font-size: 15px;
243 color: var(--headercolor);
244 border-top: 1px solid var(--highcolor);
245 }
246
247 #usearch {
248 display: block;
249 width: 100%;
250 box-sizing: border-box;
251 margin: 0;
252 padding: 12px 16px;
253 font-size: 15px;
254 border: 2px solid var(--highcolor);
255 border-radius: 8px;
256 background: var(--surfacecolor);
257 color: var(--fontcolor);
258 font-family: inherit;
259 line-height: 1.4;
260 transition: all 0.3s ease;
261 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
262 }
263
264 #uform {
265 display: block;
266 width: 100%;
267 margin: 0;
268 padding: 0;
269 }
270
271 #usearch:focus {
272 outline: none;
273 border-color: var(--highcolor);
274 box-shadow: 0 0 0 3px rgba(245, 106, 106, 0.15);
275 }
276
277 #usearch::placeholder {
278 color: #999;
279 }
280
281 #usearch:hover {
282 border-color: #d94f4f;
283 }
284
285 #PopularPosts1 ul li {
286 margin-bottom: 10px;
287 }
288
289 /* Responsive adjustments */
290 @media (min-width: 811px) {
291 aside {
292 position: sticky;
293 top: 24px;
294 align-self: flex-start;
295 max-height: calc(100vh - 48px);
296 overflow-y: auto;
297 }
298 }
299
300 @media (max-width: 810px) {
301 body {
302 margin: 10px;
303 }
304
305 header, #social-media, main, footer {
306 width: 100%;
307 }
308
309 #social-media {
310 width: 100%;
311 }
312
313 main {
314 flex-direction: column;
315 gap: 30px;
316 }
317
318 section, aside {
319 width: 100%;
320 }
321
322 .fa {
323 padding: 7px;
324 width: 38px;
325 }
326 }
327
328 /* Code and syntax highlighting */
329 .codeSection {
330 font-size:16px;
331 padding:0px;
332 margin:0px;
333 }
334
335 .fileName {
336 color:#c586c0;
337 margin-bottom:5px;
338 font-weight:600;
339 letter-spacing:0.03em;
340 }
341
342 .code {
343 line-height:1.6;
344 padding:15px;
345 overflow:auto;
346 color:#e6edf3;
347 background-color:#0d1117;
348 border-left:5px solid #30363d;
349 border-radius:4px;
350 }
351
352 pre {
353 margin:0px;
354 padding:0px;
355 font-family:Consolas, "Courier New", monospace;
356 -moz-tab-size:4;
357 -o-tab-size:4;
358 tab-size:4;
359 }
360
361 .lI {
362 color:#e6edf3;
363 }
364
365 .kC {
366 color:#ff7b72;
367 }
368
369 .cC {
370 color:#8b949e;
371 }
372
373 .qC {
374 color:#a5d6ff;
375 }
376
377 .pC {
378 color:#c9d1d9;
379 }
380
381 .iPC {
382 color:#79c0ff;
383 }
384
385 .bC {
386 color:#c9d1d9;
387 }
388
389 .iBC {
390 color:#79c0ff;
391 }
392 ]></b:skin>
393 <b:if cond='data:blog.title != "Story of Algorithm"'>
394 <style>
395 body { background-color:white; }
396 </style>
397 </b:if>
398 </head>
399 <body>
400 <header>
401 <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>
402 </header>
403 <div id='social-media'>
404 <!-- Add social media links -->
405 <span style='background-color: var(--highcolor);'>
406 <a href='' target='_blank' title='Follow Twitter' class='fa'><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
407 <path d="M18.42,14.009L27.891,3h-2.244l-8.224,9.559L10.855,3H3.28l9.932,14.455L3.28,29h2.244l8.684-10.095,6.936,10.095h7.576l-10.301-14.991h0Zm-3.074,3.573l-1.006-1.439L6.333,4.69h3.447l6.462,9.243,1.006,1.439,8.4,12.015h-3.447l-6.854-9.804h0Z"></path>
408 </svg></a>
409 <a href='' target='_blank' title='Follow Facebook' class='fa'><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
410 <path d="M16,2c-7.732,0-14,6.268-14,14,0,6.566,4.52,12.075,10.618,13.588v-9.31h-2.887v-4.278h2.887v-1.843c0-4.765,2.156-6.974,6.835-6.974,.887,0,2.417,.174,3.043,.348v3.878c-.33-.035-.904-.052-1.617-.052-2.296,0-3.183,.87-3.183,3.13v1.513h4.573l-.786,4.278h-3.787v9.619c6.932-.837,12.304-6.74,12.304-13.897,0-7.732-6.268-14-14-14Z"></path>
411 </svg></a>
412 <a href='' target='_blank' title='Follow Tumblr' class='fa'><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
413 <path d="M18.5,30c-4.211,0-7.349-2.166-7.349-7.349V14.35h-3.827v-4.495c4.211-1.094,5.972-4.717,6.175-7.856h4.373v7.127h5.102v5.224h-5.102v7.228c0,2.166,1.094,2.915,2.834,2.915h2.47v5.507h-4.677Z"></path>
414 </svg></a>
415 <a href='' target='_blank' title='Follow Reddit' class='fa'><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
416 <path d="M27.332,10.323c-1.07,0-2.055,.361-2.842,.967-2.143-1.326-4.848-2.16-7.807-2.271v-.013c0-1.983,1.474-3.629,3.386-3.9v-.003c.347,1.47,1.666,2.564,3.242,2.564,1.84,0,3.331-1.491,3.331-3.331s-1.491-3.331-3.331-3.331c-1.609,0-2.95,1.14-3.262,2.657-2.694,.289-4.798,2.574-4.798,5.343v.017c-2.93,.123-5.605,.957-7.729,2.274-.789-.611-1.779-.974-2.853-.974-2.578,0-4.668,2.09-4.668,4.668,0,1.871,1.099,3.483,2.688,4.228,.155,5.419,6.06,9.778,13.323,9.778s13.176-4.364,13.323-9.787c1.576-.75,2.666-2.357,2.666-4.217,0-2.578-2.09-4.668-4.668-4.668ZM7.334,17.952c.078-1.693,1.203-2.992,2.51-2.992s2.307,1.373,2.229,3.066c-.078,1.693-1.054,2.308-2.363,2.308s-2.453-.689-2.375-2.382Zm13.596,4.424c-.804,1.922-2.703,3.273-4.919,3.273s-4.114-1.351-4.919-3.273c-.095-.228,.061-.483,.306-.508,1.437-.145,2.991-.225,4.613-.225s3.175,.08,4.613,.225c.245,.025,.401,.28,.306,.508Zm1.384-2.043c-1.307,0-2.285-.614-2.363-2.308-.078-1.693,.92-3.066,2.229-3.066s2.433,1.299,2.51,2.992c.078,1.693-1.068,2.382-2.375,2.382Z"></path>
417 </svg></a>
418 <a href='' target='_blank' title='Follow Github' class='fa'><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
419 <path d="M16,2.345c7.735,0,14,6.265,14,14-.002,6.015-3.839,11.359-9.537,13.282-.7,.14-.963-.298-.963-.665,0-.473,.018-1.978,.018-3.85,0-1.312-.437-2.152-.945-2.59,3.115-.35,6.388-1.54,6.388-6.912,0-1.54-.543-2.783-1.435-3.762,.14-.35,.63-1.785-.14-3.71,0,0-1.173-.385-3.85,1.435-1.12-.315-2.31-.472-3.5-.472s-2.38,.157-3.5,.472c-2.677-1.802-3.85-1.435-3.85-1.435-.77,1.925-.28,3.36-.14,3.71-.892,.98-1.435,2.24-1.435,3.762,0,5.355,3.255,6.563,6.37,6.913-.403,.35-.77,.963-.893,1.872-.805,.368-2.818,.963-4.077-1.155-.263-.42-1.05-1.452-2.152-1.435-1.173,.018-.472,.665,.017,.927,.595,.332,1.277,1.575,1.435,1.978,.28,.787,1.19,2.293,4.707,1.645,0,1.173,.018,2.275,.018,2.607,0,.368-.263,.787-.963,.665-5.719-1.904-9.576-7.255-9.573-13.283,0-7.735,6.265-14,14-14Z"></path>
420 </svg></a>
421 </span>
422 </div>
423 <main>
424 <section>
425 <b:section id='content-section'>
426 <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'>
427 <b:includable id='main'>
428 <b:loop values='data:posts' var='post'>
429 <article>
430 <b:if cond='data:blog.pageType == "index"'>
431 <h2><a expr:href='data:post.url' rel='follow'><data:post.title/></a></h2>
432 <b:else/>
433 <h1><data:post.title/></h1>
434 </b:if>
435 <div class='post-date'><span class='post-date-icon'>●</span><data:post.timestamp/></div>
436 <data:post.body/>
437 <b:if cond='data:blog.pageType == "item"'>
438 <script type='application/ld+json'>
439 {
440 "@context": "https://schema.org",
441 "@type": "BlogPosting",
442 "mainEntityOfPage": {
443 "@type": "WebPage",
444 "@id": "<data:post.url/>"
445 },
446 "headline": "<data:post.title.jsonEscaped/>",
447 "author": {
448 "@type": "Person",
449 "name": "<data:post.author.name/>"
450 },
451 "publisher": {
452 "@type": "Organization",
453 "name": "<data:blog.title.jsonEscaped/>"
454 },
455 "datePublished": "<data:post.timestampISO8601/>",
456 "dateModified": "<data:post.timestampISO8601/>"
457 }
458 </script>
459 </b:if>
460 </article>
461 </b:loop>
462 <div id='blog-pager'>
463 <b:if cond='data:newerPageUrl'>
464 <span id='blog-pager-newer-link'>
465 <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' rel='follow' title='Newer Post'>Newer Post</a>
466 </span>
467 </b:if>
468 <b:if cond='data:olderPageUrl'>
469 <span id='blog-pager-older-link'>
470 <a class='blog-pager-older-link' expr:href='data:olderPageUrl' rel='follow' title='Older Post'>Older Post</a>
471 </span>
472 </b:if>
473 <a class='home-link' expr:href='data:blog.homepageUrl' rel='follow'>Home</a>
474 </div>
475 </b:includable>
476 </b:widget>
477 </b:section>
478 </section>
479 <aside>
480 <div class='side-bar'>
481 <h3>Search</h3>
482 <form expr:action='data:blog.searchUrl' id='uform' target='_top'>
483 <input type='text' id='usearch' placeholder='Search' name='q' expr:value='data:view.isSearch ? data:view.search.query.escaped : ""' autocomplete='off'/>
484 </form>
485 </div>
486 <div class='side-bar'>
487 <h3>Popular Posts</h3>
488 <b:section id='popularpost-section'>
489 <b:widget id='PopularPosts1' locked='true' title='' type='PopularPosts' version='1'>
490 <b:includable id='main'>
491 <ul>
492 <b:loop values='data:posts' var='post'>
493 <li><a expr:href='data:post.href'><data:post.title/></a></li>
494 </b:loop>
495 </ul>
496 </b:includable>
497 </b:widget>
498 </b:section>
499 </div>
500 <div class='side-bar'>
501 <h3>Label</h3>
502 <b:section id='label-section'>
503 <b:widget id='Label1' locked='true' title='Labels' type='Label' version='1'>
504 <b:includable id='main'>
505 <ul>
506 <b:loop values='data:labels' var='label'>
507 <li><a class='label' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/> (<data:label.count/>)</a></li>
508 </b:loop>
509 </ul>
510 </b:includable>
511 </b:widget>
512 </b:section>
513 </div>
514 </aside>
515 </main>
516 <footer>
517 Copyright Ⓒ <data:blog.title/>. All rights reserved.
518 </footer>
519 </body>
520 </html>